div1 class contains the logo of our store shop. In this recipe, we are going to see how we can adjust the position of the logo with the div1 class. We will apply different style attributes to the class and also do some magic with GIMP.
1. Getting started
We need to open up our stylesheet, stylesheet.css, in our favourite editor. For this, go to catalog\view\theme\shop\stylesheet.
2. How to do it
We will do the following steps for this recipe:
- We make the height of the div1 class to 200px. You can make it according to your For this, we need to add the following style to the stylesheet. There are no styles defined for the div1 class in the default stylesheet:
#header .div1 {
height: 200px;
}
- This will make the height of the header larger, like the following:
- We need to change the padding-top amount to 128px. So, the code style becomes like this:
#header .div2 {
float: left;
padding-top: 128px;
}
- Adding this style brings the logo down a little:
- And change the padding-left properties to 14%. We use percent as our unit:
#header .div2 {
float: left;
padding-top: 128px;
padding-left: 14%;
}
- This makes the header like this:
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.