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

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.

Getting started

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

How to do it

We will go with the following steps:

  1. We now change the style for div5 class. 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 menu. See the following image:
  3. div5 class contains the search bar for our shop. We will ...

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