Header Structure in OpenCart: Styling the language bar

There are language and payment units below the search bar. div6 class controls the styles for the language bar. We will apply some styles in this recipe. Like the previous recipe, we will also create images for this class. This will be a step-by-step guide to create an image for div6 class background color.

1.  Getting started

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

2. How to do it

See the following steps for this recipe:

1. In the div6 class, we have the language and payment unit We shorten div5 class, so, we also need to make adjustment for the div6 class. Currently, it has only margin-bottom attributes.

#header .div6 {

clear: both;

margin-bottom: 10px;

}

2. We will remove margin-bottom. First, we set margin to 0px 14% So, the code block becomes this:

#header .div6 {

clear: both;

margin : 0 14% 10px;

}

3. Then, the language bar becomes like this:

4. Like div5 class, div6 class also has three different parts: left, right, and center. We can find the location of the left image from the style code:

#header .div6 .left {

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

width: 5px;

height: 32px; float: left;

}

5. We will open the image with Let’s change the image color to our needs.

6. As the image is too small to work with, we will enlarge the image with zoom in. Then, the image will become like the following:

7. As there will be a problem selecting the boundary area first, we will select the center region first. We will choose the select by color tool from the Then, the area will be selected.
8. To fill the region, we select #9fe4f8 from the color Using the Bucket Tool from the toolbox, we will pour the color in the selected region. Then, our image will become like this:

9. Now, with the select by color tool of GIMP, select the boundary area and pour our chosen color into that So, our image stands like this:

10. When we see it in the browser, we found the change of our shop:

11. In the same way, we will change the right and center images First, we need to get the location of the right image. We can find it from style code block.

#header .div6 .right {

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

width: 5px;

height: 32px; float: right;

}

12. By applying the above procedures, our right image becomes the following:

13. And, in the browser, the changes will appear as well:

14. Now, open up the center You can get the location of the image from the stylesheet as well:

#header .div6 .center {

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

height: 32px;

margin-left: 5px;

margin-right: 5px;

padding-left: 5px;

padding-right: 5px;

}

15. For the center image, we will change the top section first. Select the region with the Select by color tool from the toolbox. Using the Bucket Tool, we fill the area with our selected color #9fe4f8. And our image now looks like this:

16. After filling the top section, select the bottom with the Select by color tool and fill it with our color. So, the center image looks like this:

17. When we go to the browser, it will appear as the following:

18. div7 class contains the language and payment units. You can place those units on the left side by changing the float property to the left. But we leave it as it We will apply a right padding to this class.

#header .div7 {

float: right;

padding: 2px 70px;

}

19. This will move the language and payment units to the You can see the change in the browser:

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