Theming OpenCart – content

Craig Nugent
Wednesday, November 12th, 2008

In this tutorial we will look at restyling the content section.

Please remember to view your changes at the Home page in your browser.

1. Let’s take care of the content div first of all. In the ‘default.css’ file (upload/catalog/template/default/css/) change:

#content {
margin: 10px 0px 15px 0px;
float: right;
padding-left: 15px;
border-left: 1px solid #EEEEEE;
width: 581px;
}

to:

#content {
float: right;
width: 645px;
margin-top: 1px;
margin-right: 0px;
margin-bottom: 36px;
margin-left: 0px;
}

2. To fix the headings in the content section add:

#content .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: 627px;
height: 27px;
padding-left: 18px;
padding-top: 7px;
background-color: #FFFFFF;
}

3. Change:

.products, .images, .categories {
float: left;
width: 33.3%;
text-align: center;
cursor: pointer;
font-size: 10px;
height: 140px;
}

to:

.images, .categories {
float: left;
width: 33%;
text-align: center;
cursor: pointer;
font-size: 10px;
height: 164px;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.products {
float: left;
width: 33.33%;
text-align: center;
cursor: pointer;
font-size: 10px;
height: 200px;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

To have the cost of the products displayed next to the product description. Change:

.heading .right {
float: right;
text-align: right;
}

to:

.heading .right {
float: left;
text-align: left;
margin-top: 0px;
margin-right: 18px;
margin-bottom: 0px;
margin-left: 18px;
color: #FFFFFF;
}

Select a product to view this change.

4. In your browser click on the Account link. We will now make some gentle changes to the Account forms. Open ‘account_login.css’ (upload/catalog/template/default/css/). Change:

#login .b, #login .h {
font-weight: bold;
color: #000000;
margin-bottom: 2px;
}

to:

#login .b, #login .h {
font-weight: bold;
color: #434341;
margin-bottom: 2px;
padding-left: 18px;
}

Minor titles should now be in the right place and the right colour.

5. Change:

#login .d, #login .j {
margin-top: 12px;
_margin-top: 20px;
}

to:

#login .d, #login .j {
margin-top: 18px;
_margin-top: 20px;
}

6. Change:

#login .e, #login .k {
margin-top: 20px;
_margin-top: 20px;
}

to:

#login .e, #login .k {
margin-top: 18px;
_margin-top: 20px;
}

7. Change:

#login .c, #login .i {
border: 1px solid #EEEEEE;
padding: 10px;
height: 140px;
}

to:

#login .c {
height: 200px;
padding-left: 18px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #EEEEEE;
}
#login .i {
height: 200px;
width: 424px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 18px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
border-left-color: #EEEEEE;
}

8. Change:

#login .g {
float: right;
}

to:

#login .g {
float: left;
margin-left: 18px;
height: 162px;
}

9. Change:

#login .a, #login .g {
width: 285px;
}

to:

#login .a {
width: 203px;
float: left;
}
#login .g {
float: left;
margin-left: 18px;
height: 162px;
width: 424px;
}

10. Change:

#login .f, #login .l {
margin-top: 12px;
_margin-top: 20px;
text-align: right;
}

to:

#login .f {
margin-top: 12px;
_margin-top: 20px;
text-align: right;
}
#login .l {
margin-top: 12px;
_margin-top: 20px;
text-align: right;
padding-right: 18px;
}

11. To alter the form text labels, erase the ‘td’ tag in the ‘default.css’ file (upload/catalog/template/default/css/):

body, td, th, input, textarea, select, a {
font-size: 11px;
color: #000000;
}

becomes:

body,th, input, textarea, select, a {
font-size: 11px;
color: #000000;
}

Now add the following to the style sheet:

td {
font-size: 11px;
color: #434341;
}

This resizes and colours the form labels.

12. To complete this alteration, remain in ‘default.css’ and change:

b, strong, th {
color: #000000;
}

to:

b, strong, th {
color: #434341;
}

and add Lucida Grande to the font stack:

* {
font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;

That’s the lot for the content section. In the next tutorial Theming OpenCart – Footer we will look at restyling the footer.

Tutorials

  1. Theming OpenCart – An overview
  2. Theming OpenCart – Design
  3. Theming OpenCart – Header
  4. Theming OpenCart – Column
  5. Theming OpenCart – Content
  6. Theming OpenCart – Footer

Theming Opencart 1.5 is now available in e-book format. You can purchase the book here.

Posted on Wednesday, November 12th, 2008 at 11:52 pm
Filed under Design, OpenCart, Tutorials.
Follow any responses to this entry through the RSS 2.0 feed.
Both comments and pings are currently closed.