Header Structure in OpenCart: Styling the search bar

This recipe will guide us through the styling of div5 class. This class contains the search bar. At first, we adjust the width of the search bar. We use percentage unit for this. Later, we’ll see how we can create an image for the search bar and replace it.

1.  Getting started

We need to open up our stylesheet, stylesheet.css, in our favourite editor. Go to this: catalog\view\theme\shop\stylesheet.

2.  How to do it

We will go with the following steps:

1. We now change the style for div5 We set 0% margin for top and bottom; 14% margin for left and right.

#header .div5 {

clear: both;

margin : 0 14%;

}

2. Applying this will squeeze our navigational See the following image:

3. div5 class contains the search bar for our We will change the color of this bar. Let’s see how we can do this with GIMP.
4. The search bar is divided into three sections: left, center, and right.

5. For the left side, the default style code is as follows:

#header .div5 .left {

background: url(‘../image/header_1_left.png’) no-repeat;

width: 5px;

height: 40px;

float: left;

}

6. To change the image, go to catalog\view\theme\shop\image. Open up png in GIMP. The image will be pretty narrow, so, we will zoom in. Click the zoom tool from the toolbox:

7. Then, click several times on the image, it will become larger:

8. We first change the color of the outside We select the outer boundary with select by color tool:

9. Now, click on the boundary area so that it will be See the following image:

10. We pick the color that we want to fill Click on the color panel. We choose #0599c4. You can choose your favorite color.

11. We will fill the border with the bucket fill So, select it from the toolbox:

12. And click on the selected boundary region to fill it with the selected Now, our left side image will look like this:

13. We will color the center region of our You need to select the fuzzy select tool from the toolbox:

14. To fill the region, again, select the Bucket Tool and click on the So, our left image is done. We will save it.

15. If we refresh our browser now, we will see our left image in action:

16. We will change the center and right image in the same way and save The style code block for right class of div5 class is the following:

#header .div5 .right {

background: url(‘../image/header_1_right.png’) no-repeat;

width: 5px;

height: 40px;

float: right;

}

17. Pick the image and edit it with We will end up with the following image if you follow the above steps:

18. After saving the image, the search bar area will be like this:

19. You will find our new image on the left and right side of the search
20. To change the center image, you need to open the image with Get the location of the image from the corresponding style code:

#header .div5 .center {

background: url(‘../image/header_1_center.png’) repeat-x;

height: 40px;

margin-left: 5px;

margin-right: 5px;

}

21. We need to change the color of the top, middle, and bottom section of the center The process is the same as the above two processes. After changing the top and bottom color, the image will become like this:

22. After changing the color in the middle region, the image will become like this:

If we go to the browser, then the site will look like this:

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.