Archive for December, 2010
On the shopping cart page of a zen cart, the default background color for the items in the cart and table headings are different shades of gray.
While gray is a nice neutral color, it may not be what you want displayed on YOUR zen cart website design. Here are a few steps to follow by editing includes/templates/YOUR TEMPLATE NAME HERE/css/stylesheet.css
In your stylesheet.css you will find the following code:
.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}
.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}
If you change the background-color to white eg:#ffffff this is the result you will see:
Next, you may want to change the top heading line to another color. To do this, find the following in your stysheet.css and change the background color to the color of your choice:
TR.tableHeading {
background-color: #cacaca;
height: 2em;
}
We have changed our heading to a green that matches the green in our website as shown here:
If you want to change the color of the line that is at the bottom of this table, you would need to search for and revise this code:
.tableHeading TH {
border-bottom: 1px solid #00bec8;
}
Our next step is to change the color of the sub total bar. In your stylesheet, find:
.tableHeading, #cartSubTotal {
background-color: #f1d4d3;
}
And if you want to change the color of the lines around this, you can do that here:
#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}
In our case, we have now changed the shopping cart page to where it beautifully matches our design!
