O'Reilly logo

OpenCart 1.4 Template Design Cookbook by Tahsin Hasan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Getting started

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

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 dimension. We will use Firebug to get the dimension:
    How to do it

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required