Results 1 to 10 of 10
  1. #1
    Join Date
    Jun 2007
    Location
    Bronx, New York, United States
    Posts
    932
    Plugin Contributions
    9

    Default Overriding CSS sheets

    This is a simple question and forgive me for not going through the mountains of threads:

    Currently my ZenCart uses the style sheet so that any H1 tag is treated with blue text and a horizontal rule underneath. What I'm wondering is there a way to revert, on demand, any H1 tag to its original style.

    That is to have H1 tags appear normal using the inline sheet?

  2. #2
    Join Date
    Jan 2004
    Posts
    66,444
    Plugin Contributions
    279

    Default Re: Overriding CSS sheets

    Got a specific use case?
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  3. #3
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Overriding CSS sheets

    You can address any <h1> tag which has an id (I think all of them do in ZC) in your template's stylesheet.

    h1#yourHeading {text-decoration: whatever; color: whatever;}

    Or you can address it by what container it is in:

    #yourContainer h1 {text-decoration: whatever; color: whatever;}

  4. #4
    Join Date
    Jun 2007
    Location
    Bronx, New York, United States
    Posts
    932
    Plugin Contributions
    9

    Default Re: Overriding CSS sheets

    Quote Originally Posted by DrByte View Post
    Got a specific use case?
    http://www.justuptowngames.com/index...x&cPath=1_2_61

    This will show you what I'm having a problem with and I'd rather not use the ID attribute and edit the CSS sheet if possible.

  5. #5
    Join Date
    Jun 2007
    Location
    Bronx, New York, United States
    Posts
    932
    Plugin Contributions
    9

    Default Re: Overriding CSS sheets

    Quote Originally Posted by gjh42 View Post
    You can address any <h1> tag which has an id (I think all of them do in ZC) in your template's stylesheet.

    h1#yourHeading {text-decoration: whatever; color: whatever;}

    Or you can address it by what container it is in:

    #yourContainer h1 {text-decoration: whatever; color: whatever;}
    This particular usage doesn't use id's. It's simply a tag CSS change where all usages of that tag by default use that CSS code.

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Overriding CSS sheets

    Of course the <h1> tag is styled for general usage. If you want specific <h1>s to not follow that style, you will have to style them differently - there is no getting around that. Doing this in the stylesheet is the recommended way of altering presentation.

  7. #7
    Join Date
    Jun 2007
    Location
    Bronx, New York, United States
    Posts
    932
    Plugin Contributions
    9

    Default Re: Overriding CSS sheets

    Quote Originally Posted by gjh42 View Post
    Of course the <h1> tag is styled for general usage. If you want specific <h1>s to not follow that style, you will have to style them differently - there is no getting around that. Doing this in the stylesheet is the recommended way of altering presentation.
    Bleh. Something told me that so I just used firebug to tell me what was changed undid that through in-line styles.

    Thanks anyways.

  8. #8
    Join Date
    Jan 2004
    Posts
    66,444
    Plugin Contributions
    279

    Default Re: Overriding CSS sheets

    Um ... You're using H1 tags all over the place.
    Proper structure is to use H1 only ONCE per page. Search engines see multiple H1 tags as spammy, somewhat akin to keyword-stuffing.

    Since you're styling all kinds of other stuff inline, why don't you just create your own new style and wrap a <span class="mystyle"> around it instead of a big long complex <h1 ..........> ?
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  9. #9
    Join Date
    Jun 2007
    Location
    Bronx, New York, United States
    Posts
    932
    Plugin Contributions
    9

    Default Re: Overriding CSS sheets

    Quote Originally Posted by DrByte View Post
    Um ... You're using H1 tags all over the place.
    Proper structure is to use H1 only ONCE per page. Search engines see multiple H1 tags as spammy, somewhat akin to keyword-stuffing.

    Since you're styling all kinds of other stuff inline, why don't you just create your own new style and wrap a <span class="mystyle"> around it instead of a big long complex <h1 ..........> ?
    I was trying to find out what was the H1 header supposed to be like. I know it's like a size eighteen font but I forget after that.

    EDIT: Nevermind, I just found it... and it's size 24 point text. Would you say it's probably better I redid all of the H1's as <p style="..."> instead?

  10. #10
    Join Date
    Jan 2004
    Posts
    66,444
    Plugin Contributions
    279

    Default Re: Overriding CSS sheets

    You can style it using whatever is best suited to your needs. Take care to watch out for inheritance from other defaults that might be set by whatever tag you choose. ie: <P> may have certain padding defaults already set, whereas <span> tags usually have no defaults so display exactly as you define them. You can find more about that topic on the W3C sites.

    As for finding out what a given tag is set to, you can read it in the stylesheet of your template, and/or use a tool like FireBug to read it from your live site. There are numerous discussions about doing that elsewhere in these forums, as well as in your favorite search engine.
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

 

 

Similar Threads

  1. small change in CSS sheets ruins page
    By melissamiller8 in forum Templates, Stylesheets, Page Layout
    Replies: 22
    Last Post: 7 Jan 2012, 11:43 PM
  2. CSS - overriding default style not working
    By nigelt74 in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 15 Apr 2011, 03:25 AM
  3. 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
  4. Edit your style sheets with CSS VISTA
    By james739 in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 21 Sep 2007, 10:42 PM

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