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 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:
- To change the search bar styling, we customize the Search We change the font weight to Normal, give left padding to 25px and change the color to #F1F1F1:
#search {
color:#F1F1F1;
font-weight:normal;
padding-left:25px;
padding-top:7px;
}
If we refresh our browser, we can easily find the changes:
- In the div8 class, which contains the search label, we apply 8px top:
#header .div8 {
float: left;
margin-top: 8px;
}
You will see that the search label gets lowered a little:
- Now, we will add an extra style for the keyword input field: #filter_keyword. See the following style code:
#search #filter_keyword {
border:1px solid #F1F1F1;
padding:2px;
}
- Here, we apply a border to the keyword input field and a padding of 2px. In the browser, you can easily view the changes:
- Now, we apply style to the category list select We change the border color to #f1f1f1:
#search select {
border: 1px solid #f1f1f1;
padding: 1px;
}
The select box for category becomes like this after applying the above styling:
- There is a link for advance search We will add a hovering style to the link. We have added color and background-color to hover effect. See the following code block:
#search a:hover {
color: #7a7a7a;
background-color: #f1f1f1;
}
So, when we hover over the advance search block, we can see our new style in action:
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.