Page 1 of 5 123 ... LastLast
Results 1 to 10 of 48
  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
    Sep 2008
    Location
    Toronto, Ontario, Canada
    Posts
    469
    Plugin Contributions
    0

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

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

    Default Re: The CSS Style sheet explained (v1.3.8 classic)

    OK Got It

    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.

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

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

  10. #10
    Join Date
    Jan 2005
    Location
    NY
    Posts
    149
    Plugin Contributions
    0

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

 

 
Page 1 of 5 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