Ecommerce Templates > General Help > Cascading style sheets (CSS)

Cascading Style Sheets

On the Ecommerce Templates we use cascading style sheets (css) to allow you to easily manage the various formatting properties. In the root of your web you will have a file typically called style.css and on each page a link to it like this <link rel=stylesheet type="text/css" href="style.css">

Editing the hyperlink properties with CSS

After double clicking on the file you should see some lines like this:

A:link {
color: #3366FF;
text-decoration: none;
}

A:visited {
color: #3366FF;
text-decoration: none;
}

A:active {
color: #3366FF;
text-decoration: none;
}

A:hover {
color: #FF9966;
text-decoration: underline;
}

The parameters are pretty clear, any hex value will suffice for the color and if you require an underline when the cursor passes over a link, change "none" to "underline".

Top of page

Editing the font properties with CSS

The font type and size is also set in the css file, here's an example:

p {
font-size: 12px;
font-family : Verdana,Arial;
}

This means that all text that is between <p> tags will be Verdana, size 12 - if Verdana is not installed on the user's machine then it will revert to Arial. If you want to change the color of the text from the default then add a line like this for red text:

p {
font-size: 12px;
font-family : Verdana,Arial;
color: #CC0000;
}

Top of page

Editing the horizontal rule properties with CSS

This line of code will give you a blue horizontal rule, one pixel in height:

HR {
height: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #006AC8;
}

Top of page

Using CSS classes

CSS classes allow you to vary your styles on a page, for example giving a section smaller text or different link properties - this can be really handy when for example you have light and dark backgrounds and you need your links to show up well on both. Here's an example of using a class for hyperlink properties:

A.dark:link {
color: #FFFFFF;
text-decoration: none;
}

A.dark:visited {
color: #FFFFFF;
text-decoration: none;
}

A.dark:active {
color: #FFFFFF;
text-decoration: none;
}

A.dark:hover {
color: #FF9966;
text-decoration: none;
}

This will give you white links with an orange mouseover. To apply it to individual links you'll need to add the class like this:

<a class="dark" href="mylink.html">link text</a>

To change text size or color between <p> tags you might have something like this:

P.smaller {
font-size: 11px;
font-family : Verdana;
color : #CC0000;
}

This will give you red 11 pixel size text when you add a class like this for a paragraph:

<p class="smaller">

Top of page

Editing the category layout

If you are using a table based layout for the category page you can still use some css to tweak the display.

The first thing you will want to do is set up the category format that best suits your site, this involves adding a parameter to your vsadmin/includes.asp or vsadmin/includes.php files, depending on your version. Please note, these don't apply if you are using css based category, product and detail pages

Next thing to do is open your CSS file, this is found in the root of your store and is typically called style.css

Copy and paste these lines into the CSS file:

P.catname {
text-align: center;
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
}

P.catdesc {
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
}

IMG.catimage {
border: 1px solid #000;
vertical-align:top;
}

TD.catimage {
vertical-align:top;
}

TD.catname {
vertical-align:top;
text-align: center;
}

TD.catnavigation {
vertical-align:middle;
text-align: left;
}

The classes explained

P.catname: The alignment of the category name
P.catdesc: The alignment of the category description
IMG.catimage: The properties of the category image
TD.catimage: The alignment of the category image
TD.catname: The alignment of the category name
TD:catnavigation: The alignment of the top category navigation

P.navdesc: The properties of the text "View all products in all categories". (introduced in version 4.9.0)

div.catdiscounts: The properties of the discounts text on the category pages. (introduced in version 5.2.6)

Some examples

Using the settings as listed above would show the category page as in the example here:

CSS example 1

If you would like the titles and text left aligned and without an image border, the CSS would need to be changed like this:

P.catname {
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
text-align: left;
}

P.catdesc {
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
}

IMG.catimage {
border: 1px solid #000;
vertical-align:top;
}

TD.catimage {
vertical-align:top;
}

TD.catname {
vertical-align:top;
text-align: left;
}

TD.catnavigation {
vertical-align:middle;
text-align: left;
}

...and the layout would look like this:

Categories css

To move the top navigation to the right, change

TD.catnavigation {
vertical-align:middle;
text-align: left;
}

to

TD.catnavigation {
vertical-align:middle;
text-align: right;
}

The best thing is to play around with the settings until you find the one that best suits your site. You can always come back here to get the default settings if you run into difficulty.

Top of page

Editing the mini cart and mini login

There are two CSS classes that can be used in conjunction with the mini cart and mini login. If you purchased a template with the mini cart incorporated then these classes should already be present in style.css, if not you can add these (Please note the class is called mincart

td.mincart {
font-size: 10px;
font-family : Verdana;
}

p.mincart {
font-size: 10px;
font-family : Verdana;
}

This will make the text size 10px and the font Verdana.

If you want different link properties from the rest of your main links, use something like this

a.mincart:link {
color: #069;
text-decoration: none;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
}

a.mincart:visited {
color: #069;
text-decoration: none;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
}

a.mincart:active {
color: #fff;
text-decoration: none;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
}

a.mincart:hover {
color: #fff;
text-decoration: none;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
}

Top of page

Editing the price color

In version 4.1.6 we added the possibility of changing the color of the price from the style sheet. All you need to do is add the following to style.css, this example would make the price show as red:

span.price {
color: #FF0000;
}

Top of page

Editing the product options properties

In version 4.2.0 we added the possibility of changing the format of the product options from the style sheet. All you need to do is add the following to style.css, this example would make the text show as red with Verdana 11px font:

select.prodoption {
font-size: 11px;
font-family : Verdana;
color : #FF0000;
}

If you are using stock management with the product options, introduced in version 4.4.0, it's possible to "grey out" the options which are no longer in stock by adding the following to your main style.css file

option.oostock {
color : #A0A0A0;
}

If you want to edit the text that introduces the product option then you need these classes (Version 5.2.2 required)

span.prodoption {
font-size: 11px;
font-family : Verdana;
color : #FF0000;
}

span.detailoption {
font-size: 11px;
font-family : Verdana;
color : #FF0000;
}

To format the multi-options introduced in version 5.5.0, use the following class

span.multioption {
font-size: 11px;
font-family : Verdana;
color : #FF0000;
}

This will change the text to red that accompanies the quantity boxes in the multi option feature on the product and product detail pages.

Top of page

Editing the top product navigation

In version 4.6.0 we added the possibility of changing the format of the top product navigation eg. Home >> Product from the style sheet. All you need to do is add the following to style.css, this example would make the text show as red with Verdana 11px font:

td.prodnavigation {
font-size: 11px;
font-family : Verdana;
color : #A0A0A0;
}

P.prodnavigation {
font-size: 11px;
font-family : Verdana;
color : #A0A0A0;
}

Top of page

Editing the page numbers

In version 4.7.0 we added the possibility of changing the format of the page numbers from the style sheet. All you need to do is add the following to style.css, this example would make the page numbers show as Verdana size 12:

P.pagenums {
font-size: 12px;
font-family : Verdana;
}

In version 5.1 you can also change the appearance of the page number currently being viewed for example

SPAN.currpage {
color: #FF0000;
font-weight: bold;
}

...would show a page number bold and in red like this:

Page numbers

Top of page

Editing the currency format

In version 4.7.0 we also included the possibility of changing the format of the alternative currencies. All you need to do is add the following to style.css, this example would make the currencies show in Verdana, size 10 and gray:

SPAN.extracurr {
font-size: 10px;
font-family : Verdana;
color: 666666
}

Top of page

The product detail page

In version 4.9.0 we added some new classes which are specific to the product detail page:

div.detailid: The properties of the text "Product ID"
div.detailname: The properties ofthe product name on the product detail page
div.detaildiscounts: The properties of the discounts text for the product detail page
span.detaildiscountsapply : The Discounts apply text on the product detail page
td.detailimage: The alignment of the product image on the product detail page
img.prodimage: The properties of the product image
div.detaildescription: The properties of the text in the long product description
div.detailoptions: The properties of the product options on the product detail page
div.detailprice: The properties of the price on the product detail page
div.detailcurrency: The properties of the alternative currencies on the product detail page

Top of page

The product page

In version 4.9.0 we added some new classes which are specific to the product page:

div.prodid: The properties of the text "Product ID"
div.prodname: The properties of the product name on the product page
div.proddiscounts: The properties of the discounts text for the product page
span.discountsapply : The Discounts apply text on the product page
td.prodimage: The alignment of the product image on the product page
img.prodimage: The properties of the product image
div.proddescription: The properties of the text in the short product description
div.prodoptions: The properties of the product options on the product page
div.prodprice: The properties of the price on the product page
div.prodcurrency: The properties of the alternative currencies on the product page

Top of page

Editing the number of items in stock message

In version 5.0.0 we added the ability to show the number of items in stock in the products page. This is the class that governs the look of the entry.

div.prodinstock {
font-size: 10px;
font-family : Verdana;
color: 666666
}

Top of page

Editing the productbody3 display

In version 5.0.0 we added a new product layout, which by default should look something like this

productbody3

The set up of this layout requires the productbody3 setting in includes.asp or includes.php

These are the classes associated with the display

table.cpd - outer table background color which forms the outlines of the cells
td.cpdll - cell background
td.cpdhl - header background
div.cpdhlid - product id header
div.cpdhlimage - product image header
div.cpdhlname - product name header
div.cpdhldescription - product description header
div.cpdhldiscounts - discounts header
div.cpdhllistprice - list price header
div.cpdhlprice - price header
div.cpdhlpriceinctax - price including tax header
div.cpdhlinstock - number in stock header
div.cpdhloptions - product options header
div.cpdhlquantity - quantity box header
div.cpdhlbuy - buy button header
div.prod3id - product id properties
div.prod3name - product name properties
div.prod3discounts - discounts properties
div.prod3description - product description properties
div.prod3listprice - list price properties
div.prod3price - price properties
div.prod3pricetaxinc - price including tax properties
div.prod3instock - number in stock properties
div.prod3quant - quantity box properties
div.prod3buy - buy button properties

For example to have a table looking like this

productbody3

You would need to add this to style.css

.cpd {
background : #FFCC00;
}

.cpdll {
background : #000;
color: #F0F0F0;
}

.cpdhl {
background : #666;
color: #F0F0F0;
font-weight: bold;
}

Top of page

Editing cross selling format

It is possible to use different formatting for the cross selling features from that of the classes defined in the main product layout. You would need to add this

csstyleprefix="cs"

to vsadmin includes.asp or

$csstyleprefix="cs";

to vsadmin/includes.php

Then you would need to prefix the classes with cs so they only apply to the cross selling section like this

.csprodname {
font-size: 10px;
font-family : Verdana;
}

.csprodimage {
font-size: 10px;
font-family : Verdana;
}

Top of page

Editing the list price display

In version 5.1.3 we added the possibility of editing the list price display, typically people would want to center the text like this:

div.listprice {
text-align: center;
}

Please note that the strikethrough and font color are set in vsadmin/inc/languagefile_en.asp / .php

For the product detail page the class would be div.detaillistprice and was added in version 5.2.6

Top of page

Editing the cart thumbnail image

Version 5.4 saw the introduction of adding a thumbnail image to the cart. This has its own class:

img.cartimage {
width: 100px;
border:1px;
}

Top of page

Editing the link properties in the store pages

Version 5.4 also saw the addition of a new class for all links in the store and they can be set like this:

A.ectlink:link {
color: #333;
text-decoration: none;
}

A.ectlink:visited {
color: #333;
text-decoration: none;
}

A.ectlink:active {
color: #333;
text-decoration: none;
}

A.ectlink:hover {
color: #8D2800;
text-decoration: none;
}

Top of page

Editing the sku properties

The SKU display introduced in Version 5.4 can be formatted like this for the product page:

div.prodsku {
color: #333;
}

... and for the product detail page:

div.detailsku {
color: #333;
}

Top of page

Editing the manufacturer properties

The Manufacturer display was introduced in Version 5.5 and can be formatted like this for the product page:

div.prodmanufacturer {
color: #333;
}

... and for the detail page

div.detailmanufacturer {
color: #333;
}

If you want the same formatting on both the product and product detail page then just set the div.prodmanufacturer class.

Top of page

Editing the product reviews and ratings format

These are the classes available for the product reviews and rating features introduced in Version 5.5.0:

span.review reviewheader (the title of the review)
span.review numreviews (the number of reviews and average rating)
span.review showallreview (the text properties for the "Show all")
hr.review (the horizontal rule)
span.review clickreview (the text properties of the "Click review")
span.review reviewname (the name of the person and date of review)
span.review reviewcomments (the comments left for the review of the product)

To achieve the following layout

Product reviews

... add the following to your css file

.review {
color: #000;
font-weight: bold;
}

.showallreview, .reviewcomments {
color: #000;
font-weight: normal;
}

.reviewname {
color: #999;
font-weight: bold;
}

hr.review {
width: 100%;
text-align:left;
height: 0;
border-width: 1px 0 0 0;
border-style: dashed;
border-color: #006AC8;
}

In version 5.6.0 we introduced the ability to show the rating on the products page. The two new classes are

div.prodrating - the text of the rating
img.prodrating - the ratings image properties

Top of page

Extra image classes

There are two classes associated with the extra images. This for example will control the formatting of the text "1 of 5"

span.extraimage{
color: #CC0000;
}

and this just for the first number

span.extraimagenum{
color: #000;
}

Top of page

Giant images

The text associated with the giant image has two classes

.giantimgname{
background-color:blue;
}

will give the product name a blue background

.giantimgback{
background-color:yellow;
}

will give the "Back to product page" text a yellow background.

Top of page

The add to cart button

From version 5.7.0 there is a new class that can be applied to the cart button. One simple tweak would be to make the cart button line up nicely with the quantity box like this

buy button alignment

.buybutton{
vertical-align:bottom;
}

You could also look to style the button through css.

Top of page

Gift registry and Wish lists

The Gift Registry feature has the following css classes

span.cartloginname - the name of the person logged in
p.cartloggedin - the text for "Logged in as" and "Logout"
span.cartwishlists - the text for "View Gift Registries" on the cart page

The List screen uses the same classes as the cart and other table backgrounds.

Top of page

Product search filter

To show the product filter text and input box like this

Product filter

... use the following css

td.prodfilter {
color: #44BA04;
font-weight:bold;
}

input.prodfilter {
border: 1px solid #44BA04;
background-color: #EDEDED;
}

Top of page

Email and thanks page receipts

These are the classes associated with the email receipt

.receiptbody - the background color of the email receipt
.receiptoption - the background color of the product option row
.receipthr - the horizontal rule
.receipthl - the highlighted product row
.receiptheading - the header row

For an email layout like this

Email layout

Use the following css

td.receiptbody{background-color:#FFF6F2;}
td.receiptoption{background-color:#FFE6E6;}
td.receipthr{height: 0;border-width: 1px 0 0 0;border-style: solid;border-color: #9EBE25;}
td.receipthl{background-color:#FDD6E8;}
td.receiptheading{background-color:#980048;color: #FFFFFF;font-weight:bold; }

For the thanks page to get a layout like this

Thanks page

Use the following css

td.receiptoption{background-color:#FFEDB7;}
td.receipthr{height: 0;border-width: 1px 0 0 0;border-style: solid;border-color: #F89961;}
td.receipthl{background-color:#9FB5FF;}
td.receiptheading{background-color:#F89961;color: #FFFFFF;font-weight:bold; }

Top of page

Product filter bar

The class associated with the products filter bar is td.prodfilter

Use the following css

td.prodfilter{
background-color:#ececec;
border: 1px dotted #42619a;
padding:4px;
font-weight:bold;
color: #42619a;}

... to style the bar as in the example here

Product filter

Top of page

Email a friend / Ask a question

The Email a friend and Ask a question features can be formatted using the following classes...

table.emftbl - the main table
td.emfll - the header
td.emfhl - the main content

Top of page

Gift wrapping

The gift wrapping feature in the cart can be formatted using the following class...

div.giftwrap

Here's an example from our demo store.

div.giftwrap{
border:1px dotted #0075C2;
background-color:#FFF;
padding:6px;
margin:2px;
font-size: 12px;
font-family : Arial,sans-serif;
}

Top of page

Mobile friendly css classes

There were two new classes introduced in Version 6.2.1 that are particulary useful for mobile versions of the cart

textarea.addinfo

This is the additional information textarea field on checkout. You may need to make this narrower for mobile screens, like this

textarea.addinfo{
width:150px;
}

The other class is on the left hand details column of the shopping cart contents

td..cobcol1

You may want to hide that column for mobile users like this

td.cobcol1{
display:none;
}

Top of page

Overriding inline styles

Sometimes we have had to hard code css styles to give a feature a basic layout. Examples of this would be the notify back in stock pop up or soft cart. We have tried to keep this to a minimum but there may be instances when you need to override these styles in your external css file.

For example the notify back in stock pop up div is set to a 570 pixel width

<div class="cobtbl notifyinstock" id="notifyinstockdiv" style="position:absolute;visibility:hidden;margin:2px;padding:2px;border:#EBEBEB 2px solid;width:570px;z-index:100;">

If you want to make that smaller set the following in your css file

div.notifyinstock{
width; 440px !important;
}

Top of page

You are only $xx from free shipping

The div containing the text "You are only $xx from free shipping" can be formatted with the following class.

div.tofreeshipping{
font-size:16px;
}

if you want to change the font color use the following

div.tofreeshipping{
color: #000 !important;
}

Top of page

Store button styling

The store generated buttons already have image equivalents available through the includes file.

With the release of Version 6.3.3 you can use css classes to style the buttons. The classes match the image parameters but without the "img" prefix. For example the affiliate login button as an image would be

$imgaffiliatelogin="images/affiliatelogin.gif";

The css class added to your css file would be

input.affiliatelogin

So if you wanted a rounded blue button with white text you might want to add something like this to your css file

Affiliate login

input.affiliatelogin {
cursor: pointer;
padding: 6px;
text-align: center;
font-size: 105%;
font-weight: bold;
color: #fff;
background-color: #003471;
border: none;
border-radius: 10px;
}

Top of page

Keyword tags

The div containing the tags can be formatted with the following class.

div.searchwords{
border: 1px solid #ccc;
padding:6px;
}

The div for the header text can be formatted like this

div.searchwordsheading{
font-weight:bold;
font-size:16px;
line-height:28px;
}

The link properties use the ectlink class but that can be overridden by using something like this

a.searchwords{
margin-left:8px;
line-height:20px;
}

This will give you a layout like this

Keyword tags

Top of page

Quantity Pricing

The display of the quantity pricing feature uses the following.

div.detailquantpricingwrap{
float:left;
width:100%;
}

div.detailquantpricing{
text-align:center;
margin:0 auto;
}

div.detailqpheading{
float:left;
padding:6px;
background:#999;
color:#fff;
width:300px;
}

div.detailqpheadquant{
float:left;
padding:6px;
width:140px;
}

div.detailqpheadprice{
float:left;
padding:6px;
width:140px;
}

div.detailqpquant{
float:left;
padding:6px;
width:140px;
}

div.detailqpprice{
float:left;
padding:6px;
width:140px;
}

Which will give you a layout like this

Quantity pricing

Top of page

Social Media Buttons

There are classes available for the Ask a Question and Email a Friend buttons as well as the general social media layout and individual buttons. The CSS used below would result in formatting like this

Social media buttons

input.askaquestion, input.emailfriend{
background:#1F3284;
color:#fff;
height:21px;
border:0;
border-radius:4px;
font-size:12px;
cursor:pointer;
margin-top:7px;
}

The CSS used for the social media container is

div.socialmediabuttons{
float:left;
width:97%;
padding:4px;
border:1px solid #ccc;
margin:4px;
background:#dedede;
}

The css for the individual buttons uses something like this

div.socialmediabutton{
float:left;
width:140px;
}

div.sociallinkedin{
margin-top:7px;
width:70px;
}

div.socialfacebook{
margin-top:5px;
}

div.socialtwitter{
width:70px;
margin-top:7px;
}

div.socialgoogle{
margin-top:4px;
width:70px;
}

div.socialpinterest{
margin-top:4px;
width:60px;
}

div.socialcustom{
margin-top:7px;
width:70px;
}

div.socialaskaquestion{
width:110px;
}

Top of page

Tweaking and previewing the store css classes

  • In this video we show how to tweak the the css on your store and preview the changes without them going live whilst testing.

Further reading

We've only scratched the surface here but we strongly recommend the use of CSS, for further reading take a look at this excellent site: www.w3schools.com