The Quickest and Easiest way to work out what does what on the CSS style sheet
Hi thought this would be helpful for noobies like me doing their store up for the first time - it will help explain what you are looking at. It's a help sheet only - please fool around with yours:laugh:
my comments are in blue the rest is the code
/** Comment Tab - Open
* Main CSS Stylesheet File Title Info
*
* @package templateSystem Info
* @copyright Copyright 2003-2007 Zen Cart Development Team Info
* @copyright Portions Copyright 2003 osCommerce Info
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 Info
* @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $ Info
*/ Comment Tab – Close
body { This is the area around the main cart
margin: 0;
font-family: verdana, arial, helvetica, sans-serif; this is the font used un the cart font-size: 62.5%;
color: #000000; this is the text colour on your page – i.e. the little home link in breadcrumbs
background-color: #2c445d; Colours the Background around the main cart }
a img {border: none; }Unsure
a:link, #navEZPagesTOC ul li a {the colour of the Log yourself in link and the links of your products etc
color: #00ffff;
text-decoration: none;
}
a:visited {links that you’ve been too
color: #09F;
text-decoration: 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; the colour of the link when the mouse pointer is over it }
a:active {Unsure
color: #0FF;
}
h1 {
font-size: 1.5em; size of it
color: #9a9a9a; Changes the size of the Titles of your shopping cart items – i.e. if you had an item under the heading of artwork – then the title of artwork is controlled here
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}
.biggerText {
font-size: 1.2em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0;
}
/* Might uncomment either or both of these if having problems with IE peekaboo bug: Comment Tab - Open
h1, h2, h3, h4, h5, h6, p {
position: relative;
}
*html .centerColumn {Unsure
height: 1%;
}
*/ Comment Tab – Close
CODE {
font-family: arial, verdana, helvetica, sans-serif; changing this changes these types of messages
This content is located in the file at: /languages/english/html_includes/YOUR_TEMPLATE/define_main_page.php
font-size: 1em; this changes the size of the above
}
FORM, SELECT, INPUT {
display: inline;
font-size: 1em; when I changed this to 15 the top bar where the Home link is repeated continually for a bit margin: 0.1em;
}
TEXTAREA {Unsure
margin: auto;
display: block;
width: 95%; }
input:focus, select:focus, textarea:focus {
background: #E4FEF5; Unsure
}
FIELDSET {Unsure
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #cccccc;
}
LEGEND {Unsure
font-weight: bold;
padding: 0.3em;
color: black;
}
LABEL, h4.optionName {
line-height: 1.5em; changed the heading of the right side boxes to get a repeating action padding: 0.2em;
}
LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em; changed the location of words to buttons on the client registration page moved it further right
}
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left; Unsure
}
#logo {display:none;} Unsure
LABEL.inputLabel { Unsure
width: 9em;
float: left;
}
LABEL.inputLabelPayment { Unsure
width: 14em;
float: left;
padding-left: 2.5em;
}
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel { Unsure
width: 11em;
float: left;
}
#checkoutPayment LABEL.radioButtonLabel { Unsure
font-weight: bold;
}
P, ADDRESS {Unsure
padding: 0.5em; }
ADDRESS {Unsure
font-style: normal; }
.clearBoth {Unsure
clear: both;
}
HR {
height: 15px; Changes the size of the horizontal lines
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #000000; changes the solid density of the hr and the colour }
/*warnings, errors, messages*/ Comment Tab – Open and Close
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution { Unsure
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #9a9a9a;
}
.messageStackWarning, .messageStackError { Unsure
background-color: #ff0000;
color: #ffffff;
}
.messageStackSuccess { Unsure
background-color: #99FF99;
color: #000000;
}
.messageStackCaution { Unsure
background-color: #FFFF66;
color: #000000;
}
/*wrappers - page or section containers*/ Comment Tab – Open and Close
#mainWrapper {
background-color: #006666; Changes the main colour inside the cart text-align: left;
width: 750px; Changes the width of the cart – try to leave at 750 for old monitors are only 800 px wide
vertical-align: top;
border: 1px solid #000000; Changes the line that goes around the outside of the cart }
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}
#logoWrapper{
background-image: url(/images/header_bg.jpg); Where the header image is background-repeat: repeat-x;
background-color: #000000; Unsure
height:300px; the size of the image in the header
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em; pushes left row boxes to the right
margin-right: 0.5em; pushes right row boxes to the left
}
#tagline {
color:#000000; Unsure – as I may have removed this before doing this. font-size: 2em;
text-align : center;
vertical-align: middle;
}
#sendSpendWrapper {
border: 1px solid #cacaca; Unsure
float: right;
margin: 0em 0em 1em 1em;
}
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%; Unsure }
.wrapperAttribsOptions {
margin: 0.3em 0em; Unsure
}
/*navigation*/ Comment Tab – Open and Close
.navSplitPagesResult {} Unsure
.navSplitPagesLinks {} Unsure
.navNextPrevCounter { Unsure margin: 0em;
font-size: 0.9em;
}
.navNextPrevList { Unsure display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3; Unsure
background-image: url( /images/tile_back.gif); this background image at the top of your store and side boxes padding: 0.5em 0.2em; this controls the box – or that little annoying line you sometimes get at the top of the header image – also doe some of the others – look around your store font-weight: bold; Unsure color: #000000; Unsure
height: 1%; Unsure }
#navCatTabsWrapper {
background-color: #000000; changes category colour under the header color: #9a9a9a; Unsure
background-image:none; Unsure}
#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em; changes some dimensions of boxes – look around list-style-type: none;
text-align: center;
line-height: 1.5em;
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff; changed the Home links white-space: nowrap;
}
#navCatTabs ul li a {
color: #000; changes the colour of the links in the categories line }
#navEZPagesTOCWrapper { Unsure font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}
#navEZPagesTOC ul { Unsure margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}
#navEZPagesTOC ul li { Unsure white-space: nowrap;
}
#navEZPagesTOC ul li a { Unsure
padding: 0em 0.5em;
margin: 0;
}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription { Unsure
margin: 0.5em;
}
#navMainSearch { Unsure
float: right;
}
#navBreadCrumb {
padding: 0.5em 0.5em;
background-color: #006666; changes the colour of the breadcrumbs line font-size: 0.95em;
font-weight: bold;
margin: 0em;
}
#navEZPagesTop { Unsure background-color: #abbbd3;
background-image: url(images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}
#navColumnOne, #navColumnTwo {
background-color: transparent; changing this colours in the left and right side box columns }
/*The main content classes*/ Comment Tab – Open and Close
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}
/*.content,*/ Comment Tab – Open and Close
#productDescription, .shippingEstimatorWrapper {
/*font-size: 1.2em;*/
padding: 0.5em;
}
.alert {
color: #FF0000; changing this changes the warnings in the client logon and maybe other areas too
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}
/*Shopping Cart Display*/ Comment Tab – Open and Close – for the shopping cart I made no changes
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}
.tableHeading TH {
border-bottom: 1px solid #9a9a9a;
}
.tableHeading, #cartSubTotal {
background-color: #e9e9e9;
}
#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}
.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}
.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}
#scUpdateQuantity {
width: 2em;
}
.cartQuantity {
width: 4.7em;
}
.cartNewItem {
color: #33CC33;
position: relative; /*do not remove-fixes stupid IEbug*/
}
.cartOldItem {
color: #660099;
position: relative; /*do not remove-fixes stupid IEbug*/
}
.cartBoxTotal {
text-align: right;
font-weight: bold;
}
.cartRemoveItemDisplay {
width: 3.5em;
}
.cartAttribsList {
margin-left: 1em;
}
#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
background-color: #E4FEf5;
border: 1px solid #003D00;
}
.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}
.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}
.orderHistList {
margin: 1em;
padding: 0.2em 0em;
list-style-type: none;
}
#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}
#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}
#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}
.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}
.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}
.amount {
width: 5.5em;
}
/*Image Display*/ Comment Tab – Open and Close
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}
.categoryIcon {}
#cartImage {
margin: 0.5em 1em;
}
/*Attributes*/ Comment Tab – Open and Close
.attribImg {
width: 20%;
margin: 0.3em 0em;
}
.attributesComments {}
/*list box contents*/ Comment Tab – Open and Close
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}
.centerBoxWrapper {
border: 1px solid #9a9a9a; changes with of the box- usually seen around new products height: 1%;
margin: 1.1em 0;
}
h2.centerBoxHeading { changes new product heading
font-size: 1.3em;
color: #ffffff;
}
/*sideboxes*/ Comment Tab – Open and Close
.columnLeft {}
h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em; WOW change this to 15 and see what you get - lol color: #ffffff;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em; pretty clear what this changes
color: #ffffff;
}
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(/images/tile_back.gif);
padding: 0.5em 0.2em;
}
.leftBoxContainer, .rightBoxContainer { increases the spaces between the boxes on the left and right margin: 0em;
border: 1px solid #000000;
border-bottom: 5px solid #000000;
margin-top: 1.5em;
}
.sideBoxContent { changes colour of side boxes ad the padding
background-color: #2c445d;
padding: 0.4em;
}
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover { Unsure
color: #FFFF33;
text-decoration: none;
}
.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited { Unsure
color: #FFFFFF;
}
Didn’t do any thing else from here down
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}
#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}
#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}
#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}
#bannerboxHeading {
background-color: #000;
}
#upProductsHeading {
text-align: left;
}
#upDateHeading {
text-align: right;
}
/* categories box parent and child categories */ Comment Tab – Open and Close
A.category-top, A.category-top:visited {
color: #ccccff;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #00ffff;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #FF0000;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */ Comment Tab – Open and Close
/*misc*/ Comment Tab – Open and Close
.back {
float: left;
}
.forward, #shoppingCartDefault #PPECbutton {
float: right;
}
.bold {
font-weight: bold;
}
.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}
.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}
.hiddenField {
display: none;
}
.visibleField {
display: inline;
}
CAPTION {
/*display: none;*/ Comment Tab – Open and Close
}
#myAccountGen li, #myAccountNotify li {
margin: 0;
}
.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/*vertical-align: top*/
}
.accountQuantityDisplay {
width: 10%;
vertical-align: top
}
TR.tableHeading {
background-color: #cacaca;
height: 2em;
}
.productListing-rowheading {
background-color: #abbbd3;
background-image: url(file:///E|/my%20websites%20folder/public/mystore/includes/templates/MyTemplates/images/tile_back.gif);
height: 2em;
color: #00ffff;
}
#siteMapList {
width: 90%;
float: right;
}
.ratingRow {
margin: 1em 0em 1.5em 0em;
}
LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}
.information {padding: 10px 3px; line-height: 150%;}
#shoppingcartBody #shippingEstimatorContent {
clear: both;
}
.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}
.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#seShipTo {
padding: 0.2em;
}
Re: The CSS Style sheet explained
Re: The CSS Style sheet explained (v1.3.8 classic)
Thank you. This is the kind of stuff I need. After months of trying to figure out zen-cart I gave up. That was a year ago so I am back to conquer. Thanks again for the information.
Re: The CSS Style sheet explained (v1.3.8 classic)
You've done a lot of digging and analysis - but it wasn't necessary... :(
If you use Firefox browser with the Web Developer Plugin, it takes just a couple of seconds to analyse a displayed page, find out what style ID's and/or Classes apply to any displayed element and then do a quick (offline) edit to the stylesheet to see what changes occur. Your stylesheet edits in this offline mode can then easily be committed to your live stylesheet.
Most (if not all) of the regular helpers on the forum will at least have this tool - that's why we are often able to provide a very quick answer when people look for stylesheet assistance.
Web Developer Toolkit is also very useful for analysing and inspecting a host of other things as well...
Re: The CSS Style sheet explained (v1.3.8 classic)
You know, I downloaded that Firefox thing and can't figure out how to use it :laugh:
Sucks to be me - hahahahahaha :laugh::laugh::laugh:
Re: The CSS Style sheet explained (v1.3.8 classic)
Do you have the FireFox browser? It should add itself on once you request it.
Re: The CSS Style sheet explained (v1.3.8 classic)
Yes, I have it - was able to load the developer - now I have a lot of buttons - I press the css button and see the code that I see in dreamweaver.
Am I missing something?
Re: The CSS Style sheet explained (v1.3.8 classic)
OK Got It :smile:
For anyone who is having trouble with this:
In Firefox, once you install the developer module - you will see a bunch of buttons.
One of these says CSS with a drop down menu on the right.
Click the arrow and enable(click) view style information.
When you do the screen should split into two horizontal planes.
If you move you mouse over your page you will see a red box - clicking it will change the CSS code in the bottom half identifying what code you need to change. :laugh:
Re: The CSS Style sheet explained (v1.3.8 classic)
On the Web developer toolbar, there's a tab called "Information".
Call up a page on your site, then click this Information Tab, then click "Display ID and Class Details"...
Each element's style ID/Class will be rendered, showing you what is governing the elements' styles... Take note of the style ID/Class of the element you want to alter, then de-activate "Display ID and Class Details" so the descriptions disappear from the screen.
Then, press F12...
Then click the CSS tab that appears in the management console frame. Choose a stylesheet. Click EDIT (in the second grey row)...
Hey presto... ! You can now do an offline edit to the CSS and see real-time changes on-screen! (Remember this is OFFLINE - affecting only the page being displayed in your browser, so any changes you want to save will have to be committed to your live stylesheet(s) on the server.)
What I often do once I've done a stylesheet edit this way is highlight all the code, copy to clipboard, open the corresponding server-side stylehseet for editing, and just replace all the code (ctrl+v), save, then FTP the edited stylesheet back to the server... BUT while you're a novice, it's probably better to backup the original stylkesheet(s) first before you do this.
Re: The CSS Style sheet explained (v1.3.8 classic)
The firefox web developer addon is great, but I would highly recommend taking a look at the Firebug extension.
http://getfirebug.com/
I think this may be what schoolboy was referring to when he said to press F12, but there is a much quicker way to edit your stylesheet.
Once installed, just hit F12 to bring up the console. Click inspect element icon (2nd from the left) or push CTRL+SHIFT+C. Now you can hover over any element on the page, click and you be shown exactly where you are in the html tree in the left pane. On the right you will see any styles associated to the element you have selected and can make changes in real time.
There are lots of cool tricks, like clicking on a font size, or pixel dimension and use the up and down arrow keys to adjust the number incrementally.
You can also click anywhere in the html to select an element display it's associated styles.
There is a nice overview here.
http://www.evotech.net/blog/2007/06/...on-to-firebug/