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;
}

Thanks!

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.

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...

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:

Do you have the FireFox browser? It should add itself on once you request it.

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?

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:

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.

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/

I've been looking around the forum for various issues and I've noticed a lot of questions about what does what on the style sheet.

Apologies for those who know about this but I thought it might be useful to some if I mentioned FireBug - it's the greatest web design tool ever invented in my view and if you've not used it, download and install it now. It'll change your life forever! :smile:

Obviously this is assuming that you use FireFox when designing websites (which is a very good idea).

Go to https://addons.mozilla.org/en-US/firefox/addon/1843 and download and install FireBug.

Once that's done there are two ways you can use it quickly and easily to see what element is doing what.

First you can simply right click on whatever bit of the website you're looking at and select "Inspect element". This will open up the Firebug window at the foot of your browser. On the left you'll see the source code, on the right you'll see the relevant CSS.

It shows you what stylesheeet it's on, and the best bit is that you can edit the values in each element and it'll change on the browser, so you can see in real time what different it's making.

Secondly, once you've got the Firebug window open (click the bug symbol on the status bar at the bottom of your browser) you can use your mouse to scroll over the screen and highlight each of the different elements used to make the page. Just click on the button shown on the top left of the Firebug window then run your mouse over the webpage.

I use this all the time as a way to determine exactly what's going on, what elements are being shaped and coloured by what parts of the style sheet and so on.

Thanks Graham!
Didn't know about this handy addon. Just installed and I can see this is going to be very helpful - especially to a novice like me.
Much appreciated.

Hi janissaire.

Thanks for the information.It's pleasure to be a part of your forum. I love to try also what you are discussing here. Thanks!

I just downloaded this and it is fantastic for sure! One thing I haven't figured out yet, is when I select an element on the page, Firebug automatically reverts to html when it's the css that I need to work with. When I select the css tab, it does indeed show stylesheet.css, however I'm still faced with the problem of locating in that file which bit I need to work with to change that portion of the page I want. Have the same problem with any editor. Which section of stylesheet.css controls which section of the site?

Not sure if you aware but the same type of tool is available for IE8out of the box. Just hit the same "F12" key as you would in Firefox. You can also outline any of the items, such as tables, divs, etc. a bit handy if you're working with css and trying to build table-less more fluid layouts. It also has built in IE modes which is helpful to aid in layouts for the more predominant browsers out there (IE).

I'm using firebug too and i can tell that is very simple to understand and modify the css. Great tool.

i dont know how to use these codes :( where i should paste em?? please helo me..

for sure i will try it ,, thank you ^^

This is great for css work.
Any tips on an easy method for altering the html.

Hi,

1. set Zen up on your local pc if you haven't done it yet.
2. If not sure where to look you can do a search *.css and it will pull up every css file on your pc - look to see which one is the zencart one.
3. open that in a text editor of some sort and you will see the code.
4. BE SURE TO MAKE A COPY OF IT BEFORE YOU START FOOLING AROUND WITH IT!!!:P

Great walk thru the "park". thanks for doing this. the best way to learn is to do.:clap:

I tried to get fire bug to work before but gave up. It is pretty easy to connect to the server with fireftp and open a file in notepad (or any text ed). I make changes in one window and F5 another window to the active site. you can see changes instantly. If you have two monitors - even better

okay I had been trying to use the bug within the file i was linking to and NOT the actual page on the web. thanks for pointing this out - this is great

okay - firebug and web developer tool in firefox - together is one powerful tool. One question - while I can see all the changes in real time, can it actually make changes to my site? If so I guess its obvious that I would have to be logged into the server through firefox and/or the admin tool? Has anybody used these tools this way?

Firebug is a great tool i was able to do it in firefox but i am facing an issue. While i was able to get the changes realtime i am unable the same lines in my CSS which is there in my ftp. Are there few things/areas which i cant edit it in CSS but need to edit it html only?

When I hover over the product image in the product listing, the 'larger image' text has a decoration where the underline vanishes when you hover over it. Does anyone know how to remove this?

so this tool just shows you where to look? I still have to open it in an editor and make the changes?
sue

Quote:

---

Originally Posted by CreateJADS

One question - while I can see all the changes in real time, can it actually make changes to my site?

---

It cannot do this, and the authors of these plugins are unlikely to add this functionality for security reasons.

Quote:

---

Originally Posted by keetch

so this tool just shows you where to look? I still have to open it in an editor and make the changes?
sue

---

Correct - make a backup copy - then open in editor and have fun :laugh:

Doing it this way is probably the best way of getting to know the code and will help you feel more confident if/when you need to change any of ther other coding.

:bigups:This is good what you have put up here and I kinda had the same idea to do this sort of thing for other zenners also. I have learned a couple of new things so thank you.

Regards
Claire

Stylesheet Analysis Technique
(Save as web page complete)

Another technique you can use, for those who want to keep various static records of a dynamic site, is to navigate to the pages in your site, starting of course from your home page, and going to all the back pages which can be generated from the web store.

Do this for any page you want to record in it's static state, then you can open it in your web editor/design tool, and look at stuff in a copy, with all the code frozen in time, at that state of theweb page / stylesheet, with all the support files saved and frozen there too.

1.) Save the web page you are at to an eval folder, save as web page complete, all supporting files will be placed in a folder with the same name. Stylesheet paths will change, but you can check live source for the location, and most are in the same place, if not all.

2.) Have a look in the support folder, within the directory you saved the page to. You can then see what images and other supporting files are in the static local disk folder, and have a backup copy.

3.) There are a few good design tools for local work, I use Microsoft Expression Web 3, and others. In your editor, open the static page from your disk. In Expression, as you scroll in split design/code view, you can select areas in the saved page, in design view, and it will highlight the extent of a wrapper for example, and you can see the css names under the main menu. Many pages shared common css selectors and classes.

I liked this approach, because I had a copy of the page I could look at a specific point in time, and it saved the stylesheet to the supporting directory, and other needed files, at that point in time.

4.) Make notes of some of the css element names, and go to your live site, opened maybe in an web editor and experiment with the elements you want to modify, which you can note from the saved static page you have for reference.

5) Repaeat this for all the web page members of the shop. Then you have a referenceable record of each page, and exactly what was going on in it when it was dynamically generated to your browser. You can also go around the web to other pages, and try it too, then look at the support folder, and check out the css files, and whats going on in the page referencing that css file.

Another good experiment is to go through ALL the colors in the stylesheet, and make a html table, with each cell containing the colors in the sheet, just to see them against eachother. This alone can give you a snapshot of the color palette in use in for example the classic template. You can also open all the images, or thumbnail view them to see whats what.
For my purposes I like to simplify wacked out color palettes, to a handful of good colors that work well with eachother and the page dominant backgrounds, which will usually be a single background color fill or 2 and some foreground, and edge defining colors. You could go around changing colors to greens and yellows and pinks, in places to see where they are coming up one, two or three at a time, then change back till your ready to start applying. As you do, start commenting the css text
/*comment*/
to describe the elements - even hard copies are good for this, as you have a visual to work from quickly.

You can then, if you want to simplify, narrowing 2 or 3 colors to a new color, and so on, till you narrow the 25 or so colors the classic template uses to 5 to 10, or less.

Another thing is that if you use more colors, like 10 or twenty, relate them to a 2, 3 or 4 color hue palette, and vary out from these base colors, with varying saturations, or lighter/darker versions of those colors. This can help pull insanity into variety with a logic.

Make your template at the end. Another thing you can do, is modify the core stuff, since you can copy it all to a template at the end, and then you have it worked out for either template; the one which will be overwritten at upgrade time, and your modified clone of it. This saved me time, because I can make layout and color changes, and I know I'm going to, when I'm close to done, copy them into a template override, that I can apply later.

This may be a little slower, but you have:

a static record, that you can re-open and have a look at anytime, you can even comment the saved pages,
you can have progressive versions over time,
and you have a copy of the stylesheet at that time,
plus all the images you might want to modify, that that page is calling.

You can select visual elements, and see their css element counterpart name. You can then work realtime on your site, or experiment previewing the local file, with experimental changes made locally.

janissaire you made a great work... IT IS Necessary. That saves a lot of trouble for a newzenner. Thank You

Thank you janissaire!! This is a really useful thread for understanding the CSS. This + Firebug saves a lot of headaches. :smile:

Thank you for this topic, it's just what I needed.

Hi Janissaire,
Well done.
I have downloaded the firebug thingy, but your rundown has made it a whole lot easier to start with. Thank you for doing this.:clap:

Jen

I used to use the firebug extension on firefox until recently, but I decided to try out google crome because firefox was running so slow. Google crome also has some of the functions of firebug built in. If you right click and select select element, you can amend the css on the page to preview it, once your happy make a note of your changes and change the in the css file.

I have used a lot of different carts but Zen Cart is by far the easiest to customize and use.

Thanks a lot
Jovan

Holy moly, I love Firebug! I'd been going through the CSS for a while trying to figure out everything, and it was very slow going. Then I found this thread and it's like everything just came together. The write up at the beginning was very helpful, and the firebug add on is incredible, I had no idea that stuff like this was available. Thanks to all.

What helped when I wanted to single out one element on a page and find out what that color was or the padding on top that made that box so 'fat' was to use the Web Developer Firefox addon which helped pinpoint specific elements so that I could look at the source and see what I needed to modify.

If you install the addin, there are two things you can use very quickly to pick out and identify the source of .css elements on a page. One is the Tools > Add-ons > Web Developer > CSS > Use Border Box Model and the other is Tools > Add-ons > Web Developer > CSS > View style information.

What you get when you use those two options is a nifty red-bordered box that outlines the element on a page that you are looking at. So, for example, if you move your mouse over 'home' on your main page, then left-click on it with your mouse, these two options will generate a look at the .css file you need to look at, in this case on my site, the one in /includes/templates/[my custom style folder for template-related stuff]/css/stylesheet.css.

For the graphic I'm using as my page header, clicking on that graphic using these two options generates this:

#logoWrapper (line 230)

{
width: 100%;
height: 250px;
background-image: url("../images/imagename.gif");
background-repeat: no-repeat;
}

Which is handy if I forget the name or where I put the file if I decide to modify it, or if I want to modify the height.

I found that using this addon really speeded up a bunch of edits I wanted to make. Made me kind of regret that I hadn't used it when I first installed my site - would have saved me a lot of guessing.

Hi. I am truly brand new to Zen Cart, I plan to study and learn Zen Cart. I have no IT background, and the info about the stylesheet does not yet make any sense to me at all. I don't yet know what a stylesheet is. Can someone recommend a website that will help me get started?

Where are the diagrams? Such as matching the admin name of a banner/box with its specific location on the computer screen?

Thanks for your help! I hope to hear from you soon.

Check out http://www.w3schools.com/css/default.asp for a good source of CSS constructs; they also have information about HTML.

I know this has been here a long time, and I could search to see if anyone has already mentioned this:

a img {border: none} This removes the blue border from images used as links.

Firebug Tips for the power user:
http://www.jquery4u.com/utilities/li...gging-firebug/
http://www.jquery4u.com/utilities/firebug-console-tips/

Thank you guys for Firebug

I am running the latest version of Zen Cart 1.3.9h, I am trying with no success to change the white background color around my products. Link is Gizzys I have been able to figure out how to do it on other things but this one has got me stumped:censored:

Any help that someone can give will be greatly appreciated

[email protected]

I have no problem finding the CSS stylesheets, but my problem is finding the HTML code that it applies to?
When I look at any of the pages, all I see is a message "load the html_define for the page_2 default",
I can go online and "view source code" and see the HTML and even edit it in FireBug, but where do I find it in ZenCart?
As you can tell, I am also a neewbie,
Thanks,
Rick

The "html" is in literally THOUSANDS of places - all in tiny little "pieces" mostly - and practically all of it is shrouded in PHP CODE.

What you see on your browser screen (when you VIEW PAGE SOURCE), is just the RESULT of the php CONSTRUCTING that page, from all the myriad of resources it gets information from.

There are no "HTML" pages in a dynamic content website. ALL pages are cobbled together by the code, and then delivered to the browser screen. When the viewer clicks a link, or performs an action (eg: add to cart), the page they are on EVAPORATES FOREVER... and a brand new page is built up on-the-fly by the PHP. Any click on a page makes it vanish forever, and a new page is built in its place....

... along the way, calculations can be performed, data captured, and specified conditions "tested" (eg: the visitor can only do this of they are logged in).

So... if you are looking for the HTML, it is there... but not in the format you are expecting it to be...

Add to that:
The fast way to find out which specific file to edit is by using the Developers Toolkit in your Admin:
http://www.zen-cart.com/content.php?...-files-to-edit
http://www.zen-cart.com/content.php?...lopers-toolkit

But even then, it's important to realize that there's seldom any reason to edit files outside of the templates or languages folders.