Table of Contents

  1. General Settings
  2. Header
    1. Drop Down Menu
    2. Header Navigation Links
  3. Breadcrumbs
  4. Blocks
    1. The Top part of the block
    2. The Middle part of the block
    3. The Bottom part of the block
  5. User Home
  6. Main Links
  7. Some blocks
    1. Block categories list
    2. Block latest
    3. Block offers
    4. Forum blocks
    5. Manual blocks
    6. Block left menu
  8. Footer
  9. Other styles
    1. Background
    2. Body
    3. Cells and Rows
    4. Tabs
    5. Tabs on "Edit Product" page
    6. Input, Select and Textaria
    7. Links
    8. Other classes
* - If you use the class for the "a.nameClass" tag please apply "a.nameClass:hover" as well (it changes visual representation of the link when you move the mouse over)
** - Please, note that it is not necessary to use long attributes. Instead, short attributes (shown in this column) can be applied:
  • font = font-style + font-variant + font-weight + font-size + line-height + font-family
  • border = border-top + border-right + border-bottom + border-left
  • padding = padding-top + padding-right + padding-bottom + padding-left
  • margin = margin-top + margin-right + margin-bottom + margin-left
  • background = background-color + background-image + background-repeat + background-attachment + background-position
*** - You can create your own custom design for any block (only for advanced css users)
Class/ID * Description Properties ** Notes Screenshot
General Settings Back to Top
.mainTable Table with movable blocks Width  
.mainTable75 Table without movable blocks Width  
.mainTable50 "Checkout Login", "User Login" tables Width  
.mainTableCell Basket, Checkout, User Home... pages Padding
Vertical-align		  
.mainTableCellLeft Left column Padding
Vertical-align		  
.mainTableCellCenter Center column Padding
Vertical-align		  
.mainTableCellRight Right column Padding
Vertical-align		  
.homeGreeting Greetings block on the "index" page Padding
Vertical-align		  
.introBlock Intro block on "support" and other pages Border  
Header Back to Top
.headerMenu Site header Margin
Width
Border		  
.headerMenu td#logo Cell with a logo (if a logo is located above the navigation bar) Display
Background
Vertical-align		 If your logo is located above navigation please use "display: none;" for ".headerMenu td#logoL"
.headerMenu td#logo img Logo image modification Margin
Border		  
.headerMenu td#logoL Cell that contains a logo (if a logo is located on the left side of the navigation bar) Display
Background
Vertical-align		 If your logo is located on the left side of the navigation bar please use "display: none;" for ".headerMenu td#logo"
.headerMenu td#logoL img Logo image modification Margin
Border		  
.headerMenu td#menu Cell that contains the header navigation bar Background
Width
Border
Padding		  
.headerMenu td#menu #begin img#Img Left side of the navigation bar Background
Width
Height		  
.headerMenu td#menu #end img#Img Right side of the navigation bar Background
Width
Height		  
.headerMenu td#menu td Cell that contains the navigation link Background
Text-align		  
Drop Down Menu Back to Top
.subMenuBlock Drop Down Menu display
position
border
z-index		  
a.subMenu Drop Down Menu links font
color
width
padding
border
display
text-decoration
text-align
background		  
Header Navigation Links Back to Top
a.menu:link, a.menu:visited, a.menu:hover, a.menu:active Navigation links Text-decoration
Color
Font
Text-transform
Display
Border
Padding
Background		  
a.menuActive:link, a.menuActive:visited, a.menuActive:hover, a.menuActive:active Active navigation links Text-decoration
Color
Font
Text-transform
Display
Border
Padding
Background		  
Breadcrumbs Back to Top
.breadcrumb Breadcrumbs border
margin
background		  
.breadcrumbBegin Left side of the breadcrumb block vertical-align
width
border
background		  
.breadcrumbBegin img width
height		  
.breadcrumbDelimiter width
white-space
border
font
padding
background		  
.breadcrumbDelimiter a Link in the breadcrumb color
text-decoration
font		  
.breadcrumbDelimiter span Text delimiter color
font
display
margin		 Use "display: none;" for ".breadcrumbDelimiter img"
.breadcrumbDelimiter img Image delimiter width
height
display
background		 Use "display: none;" for ".breadcrumbDelimiter span"
.breadcrumbRSS border
background		 Please use such property as ".breadcrumbDelimiter"
.breadcrumbEnd Right side of the breadcrumb block vertical-align
width
border
background		  
.breadcrumbEnd img width
haight		  
Block (all blocks on the site) *** Back to Top
The top part of the block Back to Top
.titleTop Margin  
.titleTopLeft width
border
background		  
.titleTopImgLeft width
height		  
.titleTopCenter width
border
background		  
.titleTopCenter div display
color
font
text-transform
z-index
position
bottom
margin
background
padding
border		  
.titleTopRight width
border
background		  
.titleTopImgRight width
height		  
The middle part of the block Back to Top
.block border
background
Border		  
.blockTD background
padding		  
The bottom part of the block Back to Top
.titleBot Margin  
.titleBotLeft width
border
background		  
.titleBotImgLeft width
height		  
.titleBotRight width
border
background		  
.titleBotImgRight width
height		  
User Home Back to Top
td.userHomeTitle "logout" button at the top of the block width
border
background
display		 If You use "logout button at the  top of the block" please use "display: none;" for "div.userHome"
div.userHomeTop margin
border
background
padding		  
div.userHomeTop td border
background
padding		  
div.userHomeTop td a color
text-decoration
font		  
div.userHome "logout" button at the bottom of the block display
margin
border
background
padding		 If You use "logout button at the bottom of the block" please use "display: none;" for "td.userHomeTitle"
div.userHome td border
background
padding		  
div.userHome td a color
text-decoration
font		  
td.userHome padding  
td.userHome div margin  
td.userHome img.orders,
td.userHome img.profile,
td.userHome img.arr,
td.userHome img.support,
td.userHome img.forum,
td.userHome img.products,
td.userHome img.pages,
td.userHome img.merchant,
td.userHome img.affiliates,
td.userHome img.payments,
td.userHome img.carts		 Images on the "user home" page width
height
background
border
float
margin		  
Main Links Back to Top
td#butTd span#spacer Show and hide a separator between links display
font
color
a.button:link, a.button:visited, a.button:hover, a.button:active "Add to cart", "View cart", "Check out" links are available on the site, except for "basket" and "small cart" blocks color
font
border
background
text-decoration
a.button#add span,
a.button#view span,
a.button#check span		 Text link color
border
background
display		 If You use "text" link please use "display: none;" for "a.button#**** img"
a.button#add img,
a.button#view img,
a.button#check img		 Image link width
height
border
background
display		 If You use "image" link please use "display: none;" for "a.button#**** span"
a.buttonBasket:link, a.buttonBasket:visited, a.buttonBasket:hover, a.buttonBasket:active "Continue shopping", "Retrieve Cart", "Save cart", "Clear cart", "Checkout" links are available on the "basket" block color
font
border
background
text-decoration
a.buttonBasket#shopping span,
a.buttonBasket#retrieve span,
a.buttonBasket#save span,
a.buttonBasket#clear span,
a.buttonBasket#checkout span		 Text link color
border
background
display		 If You use "text" link please use "display: none;" for "a.buttonBasket#**** img"
a.buttonBasket#shopping img,
a.buttonBasket#retrieve img,
a.buttonBasket#save img,
a.buttonBasket#clear img,
a.buttonBasket#checkout img		 Image link width
height
border
background
display		 If You use "image" link please use "display: none;" for "a.buttonBasket#**** span"
a.buttonCart:link, a.buttonCart:visited, a.buttonCart:hover, a.buttonCart:active "Amend cart", "View cart", "Check out" links are available on the "small cart" block color
font
border
background
text-decoration
a.buttonCart#amend span,
a.buttonCart#view span,
a.buttonCart#check span		 Text link color
border
background
display		 If You use "text" link please use "display: none;" for "a.buttonCart#**** img"
a.buttonCart#amend img,
a.buttonCart#view img,
a.buttonCart#check img		 Image link width
height
border
background
display		 If You use "image" link please use "display: none;" for "a.buttonCart#**** span"
a.buttonMore:link, a.buttonMore:visited, a.buttonMore:hover, a.buttonMore:active "Read more..." links are available on the site color
font
border
background
text-decoration
a.buttonMore#add span Text link color
border
background
display		 If You use "text" link please use "display: none;" for "a.buttonMore#**** img"
a.buttonMore#add img Image link width
height
border
background
display		 If You use "image" link please use "display: none;" for "a.buttonMore#**** span"
.disabled disabled "Add to cart" links are available on the site. You can see them if you use stock level for your products and "Quantity In Stock = 0" and check "Disable Off Limits Products" color
font
border
background
text-decoration
Some blocks Back to Top
Block categories list Back to Top
.topCategory Parent category background
margin
padding
border		  
.selectedtopCategory Selected Parent category background
margin
padding
border		  
.topCategory Subsidiary category background
margin
padding
border		  
.selectedtopCategory Selected Subsidiary category background
margin
padding
border		  
.topCategory .category_img,
.subCategory .category_img,
.selectedtopCategory .category_img,
.selectedsubCategory .category_img		 Category's Left image margin  
Block latest Back to Top
td.topArticle padding  
td.subArticle padding  
a.subArticle padding
font
background		  
Block offers Back to Top
#offerTitleTop The product title above the image and description display  
#offerTitle The product title right from the image and above the description display  
.offerImg text-align  
.offerImg img An image for offer product margin
float		  
.offerImg div text-align  
.offerImg div#offerText The description of offer product display  
Forum blocks Back to Top
.forumAdmin color
font		  
.forumUser color
font		  
.forumGuest color
font		  
.forumMessageLeft background
border		  
.forumMessageRight background
border		  
.forumMessageTop background
border		  
Manual blocks Back to Top
.level* padding * - number of subsidiary level
.level* a font
color		 * - number of subsidiary level
Block left menu Back to Top
.menuLeft .level* padding * - number of subsidiary level
.menuLeft #parent* padding * - number of subsidiary level
.menuLeft #active* padding * - number of subsidiary level
.menuLeft .level* a Links font
color		 * - number of subsidiary level
.menuLeft .level* .a a Links of active level font
color		 * - number of subsidiary level
Footer Back to Top
.footerAll background
border
margin		  
.footerMenu background
border
margin
font		  
.footerMenu span font
display		  
.footerMenu img.separator width
height
border
background
display		  
.footerHTML background
border
margin
font		  
.footerHTML font font  
.footerImg text-align  
.footerImg img width
height
border		  
Other styles Back to Top
Background Back to Top
.commonbg,
.headerbg,
.middlebg,
.usualbg,
.errorbg		 background  
Body Back to Top
body font
background
margin
pading		  
body.popup Pop-up windows font
background
margin
pading		  
Cells and Rows Back to Top
tr, td
tr.usual, td.usual,
tr.header, td.header,
tr.middle, td.middle,
tr.error, td.error		 font
background
color		  
Tabs Back to Top
.tab Tab on the product details page font
text-decoration
color
background		  
.tab:hover Tab on the product details page when mouse over text-decoration  
.tabActive Active Tab on the product details page font
text-decoration
color
background		  
.tabActive:hover Active Tab on the product details page when mouse over text-decoration  
.tabline Line under tabs background  
Tabs on "Edit Product" page Back to Top
div.adminTab Tab on the "Edit Product" page font
border
padding
margin
cursor
background
white-space		  
div.adminTabActive Active tab on the "Edit Product" page font
border
padding
margin
cursor
background
white-space		  
td.adminTab border  
td.adminTabActive border  
td.beginTab border
padding		  
td.endTab border
padding
width		  
Input, Select and Textaria Back to Top
input font  
input.usualprice Usual price on "Checkout" pages background
border
font		  
input.orderprice Order price on "Checkout" pages background
border
font		  
input.search border  
input.text,
input.field		 border  
input.submit Submit buttons font
color
cursor
background
border
height
margin
border		  
input#clear,
input#reset,
input#preview,
input#cancel,
input#delete		 Color of the buttons "clear", "reset", "preview", "cancel", "delete" correspondingly color  
select font
border		  
select.search border  
textarea border  
Links Back to Top
a.header,
a.title,
a.smallText,
a 		font
color
text-decoration		  
Other classes Back to Top
.articleDate font
color		  
.realprice Real price font
text-decoration
border
background		  
.ourprice Price with discount font
color
border
background		  
.taxprice Tax price font
color
width		  
.editprice text  
.top font
color		  
.smallText font
color		  
.middleText font
color		  
.bigText font
color		  
.comment font
color		  
.message font
color		  
.title font
color		  
.bigtitle font
color		  
.error font
color		  
.terms height
width
overflow
border