Header Structure in OpenCart: Creating the header banner

Earlier, we changed the width and background image of the search bar. In this recipe, we will adjust the fonts and hover styling for the search units. There is a search ID to control these properties. We apply different changes to this ID. We also add extra attributes to the HTML elements to apply additional styles.

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

Followings are the steps needed in this recipe:

1. To create the header banner, first, we need to get the banner We will use Firebug to get the dimension:

2. Now, with the inspector selected, click the header div We will get the dimension in the layout section of Firebug:

3. So, we will create a banner with height 378px and width 96px. We are using a smaller width and we will use the repeat-x property so that the image will cover all the header area.
4. Now, open up GIMP and create an image with our chosen dimension.
5. We select foreground and background colors in the color For this recipe, we chose #0d9492 and #32b7c3 as foreground and background colors respectively. So, our color panel becomes like this:

6. We will select the Gradient tool from the tool box:

7. If we apply the gradient from top down, then the image will become like this:

8. We are going to use different types of So, first select the brush from the tool box:

9. From brush tool options, we will choose circle(19):

10. You can select your favorite We set the opacity to 71:

11. We choose #c6a50c for our Now, apply the brush in the image. The banner becomes like this:

12. We change the opacity and scale to 60 and 50 and place the brush on the image. It produces this:

13. If we gradually decrease the opacity and scale, then the image becomes like the following:

14. We now change the color of our We will make it #ffffff. And change the opacity to 100 and scale to 1.7. Use the brush in our banner. So, it is now like this:

15. Again, we gradually decrease the scale and use the brush in our So, it produces the following image:

16. We change the brush color to #e1df10 and apply it, gradually decreasing the scale on the We place the newly created brush circles on the white circles. So, our banner looks like this:

17. Place the image under catalog\view\theme\shop\image. We need to add some cascading styles for our The width needs to cover the whole header area.

So, we set the width as 100%:

#header {

width: 100%; margin: auto;

background: transparent url(‘../image/header-back.png’) repeat-

x;

}

18. And set the margin as We use the newly created banner as the background of header block. We repeat the image towards the x axis using repeat-x property. The background color will be transparent.
19. When we open our site in the browser after applying the above change, we see the header banner as the following:

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