In this tutorial we will style the column section of our OpenCart theme.
1. The first thing to do is get rid of the reviews. Open ‘layout.tpl’ (upload/catalog/template/default/). Rather than delete the PHP for this we will simply comment it out in the following manner. Change:
to:
Reviews should now be absent from your column. Remember because we have not deleted the PHP we can re-introduce reviews simply by uncommenting the code.
2. To increase the width and give the column a background colour. Change:
#column {
width: 167px;
margin: 10px 15px 15px 0px;
float: left;
}
to:
#column {
width: 203px;
float: left;
margin-top: 1px;
margin-right: 18px;
margin-bottom: 17px;
margin-left: 0px;
background-color: #DBDAD6;
height: 450px;
}
3. To separate the boxes containing the shopping cart and categories Change:
.box {
padding-bottom: 5px;
margin-bottom: 10px;
}
to:
.box {
padding-bottom: 9px;
margin-bottom: 18px;
}
4. To style the headings and backgrounds change:
.heading {
font-size: 15px;
font-weight: 600;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #990000;
padding-bottom: 2px;
border-bottom: 1px solid #EEEEEE;
clear: both;
margin-bottom: 10px;
width: 100%;
height: 18px;
}
to:
.heading {
font-size: 12px;
font-weight: normal;
font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding-bottom: 2px;
clear: both;
margin-bottom: 10px;
width: 185px;
height: 26px;
background-color: #91999E;
padding-left: 18px;
padding-top: 8px;
background-image: url(../image/butt_back.png);
background-repeat: repeat-x;
}
For the moment this will also affect the content section. We will deal with that as the tutorials go on.
5. To further shape the links in the column change the following:
.box .cart .a {
text-align: right;
border-top: 1px solid #EEEEEE;
margin-top: 8px;
padding-top: 3px;
}
.box .cart .b {
text-align: center;
}
to:
.box .cart .a {
text-align: right;
margin-top: 8px;
padding-top: 3px;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #91999E;
height: 18px;
margin-right: 18px;
margin-left: 18px;
}
.box .cart .b {
text-align: left;
padding-left: 18px;
font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
font-weight: bold;
color: #4F4B4A;
font-size: 11px;
}
6. To get rid of the bullets and put a hover state on the links, change:
.box .category a {
background: url('../image/bullet_1.png') no-repeat 15px 5px;
padding: 0px 0px 0px 25px;
display: block;
text-decoration: none;
margin-bottom: 8px;
}
to:
.box .category a {
display: block;
text-decoration: none;
margin-bottom: 8px;
font-weight: bold;
color: #474342;
height: 18px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 18px;
}
.box .category a:hover {
display: block;
text-decoration: none;
margin-bottom: 8px;
font-weight: bold;
color: #FFFFFF;
background-color: #53524E;
height: 18px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 18px;
}
That’s pretty much it for the column. You will notice the Information box is still there. Leave this for now. We will be changing this in the footer tutorial.
In the next tutorial Theming OpenCart – content I will be looking at styling the content section.
- Theming OpenCart – An overview
- Theming OpenCart – Design
- Theming OpenCart – Header
- Theming OpenCart – Column
- Theming OpenCart – Content
- Theming OpenCart – Footer
Theming Opencart 1.5 is now available in e-book format. You can purchase the book here.