Page 1 of 3 123 LastLast
Results 1 to 10 of 48

Hybrid View

  1. #1
    Join Date
    Sep 2008
    Location
    Toronto, Ontario, Canada
    Posts
    469
    Plugin Contributions
    0

    Default 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

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

  2. #2
    Join Date
    Jan 2008
    Location
    Portland, Oregon USA
    Posts
    356
    Plugin Contributions
    0

    Default Re: The CSS Style sheet explained

    Thanks!
    Doug

  3. #3
    Join Date
    Mar 2009
    Posts
    3
    Plugin Contributions
    0

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

  4. #4
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,262
    Plugin Contributions
    3

    Default 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...
    19 years a Zencart User

  5. #5
    Join Date
    Sep 2008
    Location
    Toronto, Ontario, Canada
    Posts
    469
    Plugin Contributions
    0

    Default 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

    Sucks to be me - hahahahahaha

  6. #6
    Join Date
    Aug 2004
    Location
    New York City
    Posts
    7,174
    Plugin Contributions
    0

    Default 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.
    Mary Ellen
    I came; I saw; I Zenned
    Taking over the world... one website at a time
    Make sure brain is engaged before putting mouth in gear... or fingers to keyboard.

    Holzheimer
    Fan Odyssey

  7. #7
    Join Date
    Aug 2009
    Posts
    3
    Plugin Contributions
    0

    Default The Quickest and Easiest way to work out what does what on the CSS style sheet

    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!

    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.

  8. #8
    Join Date
    Dec 2008
    Location
    Australia
    Posts
    3
    Plugin Contributions
    0

    Default Re: The Quickest and Easiest way to work out what does what on the CSS style sheet

    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.

  9. #9
    Join Date
    Aug 2009
    Posts
    19
    Plugin Contributions
    0

    Default Re: The Quickest and Easiest way to work out what does what on the CSS style sheet

    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?

  10. #10
    Join Date
    Sep 2009
    Posts
    9
    Plugin Contributions
    0

    Default Re: The Quickest and Easiest way to work out what does what on the CSS style sheet

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

 

 
Page 1 of 3 123 LastLast

Similar Threads

  1. v154 What's The Easiest Way To Create A Direct Link In The Sidebox?
    By DK_Scully in forum Setting Up Categories, Products, Attributes
    Replies: 35
    Last Post: 14 Jun 2017, 08:40 AM
  2. CSS Style Sheets - what is the best way to make changes?
    By isytes in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 4 Mar 2010, 07:28 AM
  3. What's the easiest way to add custom fields to the New Product page?
    By christopherw in forum Setting Up Categories, Products, Attributes
    Replies: 4
    Last Post: 18 Sep 2007, 06:16 PM
  4. What is the easiest way to add an extra sidebox and make some html pages in it?
    By hankliu in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 27 Dec 2006, 10:48 AM
  5. Shipping, what is the easiest way
    By jcoit1 in forum Managing Customers and Orders
    Replies: 1
    Last Post: 11 Jul 2006, 01:49 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR