Earlier, we have changed the width and background image of the search bar. In this recipe, we will adjust the fonts and hover styling for the language and currency units. There is a switcher 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 to be followed in this recipe:
- There is a class named switcher. It holds the language and currency If we want to show the language and currency unit in a single column, we just remove the float property from the switcher class. The code will be like this for the switcher class:
.switcher {
margin-top: 3px;
margin-left: 10px;
}
Then, it will show this:
- But we will not use this style for our shop So, we restore the float attribute. If you want to change the image of the language and currency unit, get the location of the image from the style code:
.switcher .selected {
background: #FFFFFF url(‘../image/switcher.png’) repeat-x;
}
- Open up the image with GIMP and make the changes as you We apply #e2f7f8 and choose the gradient option to apply on the image:
We view the new image on the browser:
- We will change the background color to So, the code will be:
.switcher .selected {
background: transparent url(‘../image/switcher.png’) repeat-
x;
}
- For font color in the switcher class, we adjust the following code style:
.switcher a {
text-decoration: none;
display: block;
color: #888;
}
- And remove the color style from .switcher .selected a and .switcher .option a. You need to remove the following style:
.switcher .selected a {
color: #666666;
}
And this too:
.switcher .option a {
color: #000;
}
- When you go to the browser, you will find this:
- From the switcher class, we remove the border You can keep it if you want. We remove it from the following code section:
.switcher .selected a {
border: 1px solid #CCCCCC;
}
Then, see the effect in the browser:
- On hover, we change the background color to #c0eefb:
.switcher .selected a:hover {
background: #c0eefb url(‘../image/arrow_down.png’) 116px center no-repeat;
}
- When we hover over the language or currency block, it appears as:
- In the drop-down window, we change left and right border color to #f1f1f1, bottom border width to 7px, and change the background-color to #d5f6ff.
.switcher .option {
position: absolute; z-index: 3;
border-left: 1px solid #f1f1f1;
border-right: 1px solid #f1f1f1;
border-bottom: 7px solid #CCCCCC;
background-color: #d5f6ff;
display: none;
width: 131px;
}
Now, refresh our browser to see the change:
- When we hover over our currency units, we change the background color to #c0eefb:
.switcher .option a:hover {
background: #c0eefb;
}
We can view the change:
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.