Customisation - Templates - Stylesheets - Annotated
From Zen Cart(tm) Wiki
[edit]
Annotated Main CSS Stylesheet (Part 1)
/* * * Main CSS Stylesheet * * @package templateSystem * @copyright Copyright 2003-2005 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * @version $Id: stylesheet.css 4376 2006-09-03 20:42:22Z drbyte $ * */ body { /* the body tag defines the overall look of your web page */ margin: 0; /* This property sets the margins of an element */ font-family: verdana, arial, helvetica, sans-serif; /* Font families may be assigned by a specific font name or a generic font family. */ font-size: 62.5%; /* This property is used to modify the size of the displayed font. */ color: #000000; /* This property allows authors to specify the color of an element.(text) */ background-color: #e5edf5; /* This property sets the background color of an element */ } /* BOF link defines */ /* This section defines the link elements of your web page */ a img {border: none; } /* This property is a shorthand for setting the width, style, and color of an element's border. */ a:link, #navEZPagesTOC ul li a { color: #3300FF; /* This property allows authors to specify the color of an element. (text) */ text-decoration: none; /* This property allows text to be decorated with one of five values: underline, overline, line-through, blink, or the default, none. */ } a:visited { color: #3300FF; /* This property allows authors to specify the color of an element. (text) */ text-decoration: none; /* This property allows text to be decorated with one of five values: underline, overline, line-through, blink, or the default, none. */ } a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover { color: #FF0000; /* This property allows authors to specify the color of an element. (text) */ } a:active { color: #0000FF; /* This property allows authors to specify the color of an element. (text) */ } /* EOF link defines */ h1 { /* Defines all h1 elements */ font-size: 1.5em; /* This property is used to modify the size of the displayed font. */ } h2 { /* Defines all h2 elements */ font-size: 1.4em; /* This property is used to modify the size of the displayed font. */ } h3 { /* Defines all h3 elements */ font-size: 1.3em; /* This property is used to modify the size of the displayed font. */ } h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{ /* defines each of these elements */ font-size: 1.1em; /* This property is used to modify the size of the displayed font. */ } .biggerText { font-size: 1.2em; /* This property is used to modify the size of the displayed font. */ } h1, h2, h3, h4, h5, h6 { margin: 0.3em; /* This property sets the margins of an element */ } CODE { font-family: arial, verdana, helvetica, sans-serif; /* Font families may be assigned by a specific font name or a generic font family. */ font-size: 1em; /* This property is used to modify the size of the displayed font. */ } /* BOF form definitions */ FORM, SELECT, INPUT { display: inline; /* This property is used to define an element with one of four values: block, inline, list-item, none */ font-size: 1em; /* This property is used to modify the size of the displayed font. */ margin: 0.1em; /* This property sets the margins of an element */ } TEXTAREA { float: left; /* This property allows authors to wrap text around an element. */ margin: auto; /* This property sets the margins of an element */ display: block; /* This property is used to define an element with one of four values: block, inline, list-item, none */ width: 95%; } input:focus, select:focus, textarea:focus { background: #F0F8FF; /* This property sets the background color of an element */ } FIELDSET { padding: 0.5em; /* The amount of space between the border and the content of the element. */ margin: 0.5em 0em; /* This property sets the margins of an element */ border: 1px solid #cccccc; /* This property is a shorthand for setting the width, style, and color of an element's border. */ } LEGEND { font-weight: bold; /* This property is used to specify the weight of the font. */ padding: 0.3em; /* The amount of space between the border and the content of the element. */ } LABEL, h4.optionName { line-height: 1.5em; padding: 0.2em; /* The amount of space between the border and the content of the element. */ } LABEL.checkboxLabel, LABEL.radioButtonLabel { margin: 0.5em 0.3em; /* This property sets the margins of an element */ } LABEL.inputLabel { width: 11em; float: left; /* This property allows authors to wrap text around an element. */ } LABEL.inputLabelPayment { width: 15em; float: left; /* This property allows authors to wrap text around an element. */ } LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel { width: 12em; float: left; /* This property allows authors to wrap text around an element. */ } /* EOF form definitions */ .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg { float: left; /* This property allows authors to wrap text around an element. */ } #logo { float: left; /* This property allows authors to wrap text around an element. */ } P, ADDRESS { padding: 0.5em; /* The amount of space between the border and the content of the element. */ } ADDRESS { font-style: normal; /* This property defines that the font be displayed in one of three ways: normal, italic or oblique. */ } .clearBoth { clear: both; } HR { height: 1px; margin-top: 0.5em; /* This property sets the margins of an element */ border: none; /* This property is a shorthand for setting the width, style, and color of an element's border. */ border-bottom: 1px solid #9a9a9a; /* This property is a shorthand for setting the width, style, and color of an element's border. */ } /* BOF warnings, errors, messages*/ .messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution { line-height: 1.8em; padding: 0.2em; /* The amount of space between the border and the content of the element. */ border: 1px solid #000000; /* This property is a shorthand for setting the width, style, and color of an element's border. */ } .messageStackWarning, .messageStackError { background-color: #ff0000; /* This property sets the background color of an element */ color: #ffffff; /* This property allows authors to specify the color of an element. (text) */ } .messageStackSuccess { background-color: #99FF99; /* This property sets the background color of an element */ color: #000000; /* This property allows authors to specify the color of an element. (text) */ } .messageStackCaution { background-color: #FFFF66; /* This property sets the background color of an element */ color: #000000; /* This property allows authors to specify the color of an element. (text) */ } /* EOF warnings, errors, messages*/ /* BOF wrappers - page or section containers*/ #mainWrapper { background-color: #ffffff; /* This property sets the background color of an element */ text-align: left; /* This property can be applied to block-level elements (P, H1, etc.) to align the element's text. (left, center, right, justify) */ width: 100%; vertical-align: top; } #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage { margin: 0em; /* This property sets the margins of an element */ padding: 0em; /* The amount of space between the border and the content of the element. */ } #navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper { margin: auto; /* This property sets the margins of an element */ } #tagline { color:#000000; /* This property allows authors to specify the color of an element. (text) */ font-size: 2em; /* This property is used to modify the size of the displayed font. */ text-align : center; vertical-align: middle; } #sendSpendWrapper { border: 1px solid #cacaca; /* This property is a shorthand for setting the width, style, and color of an element's border. */ float: right; /* This property allows authors to wrap text around an element. */ margin: 0em 0em 1em 1em; /* This property sets the margins of an element */ } .floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper { margin: 0; /* This property sets the margins of an element */ width: 47%; } .wrapperAttribsOptions { margin: 0.3em 0em; /* This property sets the margins of an element */ } /* EOF wrappers - page or section containers*/ /* BOF navigation*/ .navSplitPagesResult {} .navSplitPagesLinks {} .navNextPrevCounter { margin: 0em; /* This property sets the margins of an element */ font-size: 0.9em; /* This property is used to modify the size of the displayed font. */ } .navNextPrevList { display: inline; /* This property is used to define an element with one of four values: block, inline, list-item, none */ white-space: nowrap; margin: 0; /* This property sets the margins of an element */ padding: 0.5em 0em; /* The amount of space between the border and the content of the element. */ list-style-type: none; } #navMainWrapper, #navSuppWrapper, #navCatTabsWrapper { margin: 0em; /* This property sets the margins of an element */ background-color: #9a9a9a; /* This property sets the background color of an element */ font-weight: bold; /* This property is used to specify the weight of the font. */ color: #ffffff; /* This property allows authors to specify the color of an element. (text) */ height: 1%; width: 100%; } #navMain ul, #navSupp ul, #navCatTabs ul { margin: 0; /* This property sets the margins of an element */ padding: 0.5em 0em; /* The amount of space between the border and the content of the element. */ list-style-type: none; text-align: center; /* This property can be applied to block-level elements (P, H1, etc.) to align the element's text. (left, center, right, justify) */ line-height: 1.5em; } #navMain ul li, #navSupp ul li, #navCatTabs ul li { display: inline; /* This property is used to define an element with one of four values: block, inline, list-item, none */ } #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a { text-decoration: none;/* This property allows text to be decorated with one of five values: underline, overline, line-through, blink, or the default, none. */ padding: 0em 0.5em; /* The amount of space between the border and the content of the element. */ margin: 0; /* This property sets the margins of an element */ color: #ffffff; /* This property allows authors to specify the color of an element. (text) */ white-space: nowrap; } #navEZPagesTOCWrapper { font-weight: bold; /* This property is used to specify the weight of the font. */ float: right; /* This property allows authors to wrap text around an element. */ height: 1%; border: 1px solid #000000; /* This property is a shorthand for setting the width, style, and color of an element's border. */ } #navEZPagesTOC ul { margin: 0; /* This property sets the margins of an element */ padding: 0.5em 0em; /* The amount of space between the border and the content of the element. */ list-style-type: none; line-height: 1.5em; } #navEZPagesTOC ul li { white-space: nowrap; } #navEZPagesTOC ul li a { padding: 0em 0.5em; /* The amount of space between the border and the content of the element. */ margin: 0; /* This property sets the margins of an element */ } #navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription { margin: 0.5em; /* This property sets the margins of an element */ } #navBreadCrumb { background-color: #cc9900; /* This property sets the background color of an element */ } #navEZPagesTop { background-color: #ffff33; /* This property sets the background color of an element */ } #navBreadCrumb, #navEZPagesTop { font-size: 0.95em; /* This property is used to modify the size of the displayed font. */ font-weight: bold; /* This property is used to specify the weight of the font. */ margin: 0em; /* This property sets the margins of an element */ padding: 0.5em; /* The amount of space between the border and the content of the element. */ } #navColumnOne { background-color: #FFCC99; /* This property sets the background color of an element */ } #navColumnTwo { background-color: #00BFBF; /* This property sets the background color of an element */ } /* BOF navigation*/
