SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot dbworm's Avatar
    Join Date
    Apr 2003
    Location
    Lausanne
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Same page, different styles?

    '<link rel="alternate stylesheet"...' forces us to load the same stylesheet multiple times even if it's only to change the background color of the page (at least, that's what I understand).

    Is there a way to keep a base stylesheet and add to it or change some value in it without reloading the whole thing?

    Thanks,

    Dan

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Zealot martin's Avatar
    Join Date
    Jun 2001
    Location
    London
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if this is what you are asking for, but I split my style sheets up to make editing easier (thanks to Doug Bowman for this idea). So all html pages link to a master css file. Then in the master file I have something like this:
    Code:
    @import url("css/header.css");
    @import url("css/menu.css");
    @import url("css/content.css");
    @import url("css/images.css");
    This then pulls in the various bits I need, so if I need to amend the menu for example, I only need to edit the 'menu.css'.

    If you are talking about changing background colours per page I tend to id the body tag on each page i.e. <body id="home"> <body id="contact">

    Then in my style sheet:

    #home { background-colour: #FFF; }
    #contact { background-colour: #333; }

    Hope this (long winded) answer helps!
    Martin

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,373
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Some useful info here also :

    http://www.notestips.com/80256B3A007.../NAMO5GK2NM#10

    Paul

  5. #5
    SitePoint Zealot dbworm's Avatar
    Join Date
    Apr 2003
    Location
    Lausanne
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by martin
    I don't know if this is what you are asking for, but I split my style sheets up to make editing easier (thanks to Doug Bowman for this idea). So all html pages link to a master css file. Then in the master file I have something like this:
    Code:
    @import url("css/header.css");
    @import url("css/menu.css");
    @import url("css/content.css");
    @import url("css/images.css");
    This then pulls in the various bits I need, so if I need to amend the menu for example, I only need to edit the 'menu.css'.

    If you are talking about changing background colours per page I tend to id the body tag on each page i.e. <body id="home"> <body id="contact">

    Then in my style sheet:

    #home { background-colour: #FFF; }
    #contact { background-colour: #333; }

    Hope this (long winded) answer helps!
    Hi Martin,

    Thanks for your reply, I am going to try it later.

    In fact, I am reffering to these fancy sites that let you change the look of the site by clicking different links (http://www.csszengarden.com/)

    I do it like this:

    in the <head>:
    Code:
    <link rel="stylesheet" type="text/css" media="screen" href="mysite.css" title="default" />
    <link rel="alternate stylesheet" href="alternate1.css" title="alt1" />
    in the HTML
    Code:
    <a href="#" onclick="cssswitcher('alt1')">Style 1</a>
    Finally, in my JS file:
    Code:
    function cssswitcher(title) {
      var i; var elem;
      for (i=0; (elem = document.getElementsByTagName("link")[i]); i++) {
        if(elem.getAttribute("rel").indexOf("style") != -1 && elem.getAttribute("title")) {
          elem.disabled = true;
          if(elem.getAttribute("title") == title) elem.disabled = false;
        }
      }
    }
    It works like a charm but the alternate1.css is just a copy of mysite css with just one or two things changed. Myquestion was: Is there a way to just add to or overwrite a few things in mysite.css on the fly, without reloadind the full copy (alternate1.css). I hope I am making myself clear enough.

    Any idea?

    Thanks, Dan

  6. #6
    SitePoint Zealot dbworm's Avatar
    Join Date
    Apr 2003
    Location
    Lausanne
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Great educational link!

    Thanks Paul.

    Dan

  7. #7
    SitePoint Zealot dbworm's Avatar
    Join Date
    Apr 2003
    Location
    Lausanne
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sorccu
    Great tech. info article but not too engaging due to @#-*&! browsers interpretation (again...)

    Thanks Sorccu,

    Dan

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,373
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Dan,

    Myquestion was: Is there a way to just add to or overwrite a few things in mysite.css on the fly, without reloadind the full copy (alternate1.css). I hope I am making myself clear enough.
    I think that was explained in the link I gave above .

    Persistent stylesheets are always present so additional alternate stylesheeets should get merged.

    The javascript above (if i'm not mistake) disables only preferred stylesheets (i.e. those with the title attribute). So I am assuming that any alternate stylesheets get merged with the persistent stylesheet.

    Of course if you are only changing the odd color or two you could just change the style through js directly.

    Paul

  9. #9
    SitePoint Zealot dbworm's Avatar
    Join Date
    Apr 2003
    Location
    Lausanne
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Dan,


    I think that was explained in the link I gave above .

    Persistent stylesheets are always present so additional alternate stylesheeets should get merged.

    The javascript above (if i'm not mistake) disables only preferred stylesheets (i.e. those with the title attribute). So I am assuming that any alternate stylesheets get merged with the persistent stylesheet.

    Of course if you are only changing the odd color or two you could just change the style through js directly.

    Paul
    Yes, I read that article in the interval and it explains it all.
    Things like giving a title to your main stylesheet will make it preferred (or is it persistent) is essential information and this article is a must-read. I obviously will have to go back to it in order to to master it all.

    Vive CSS!

    Au revoir.

    Thanks, Dan

  10. #10
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    forgive me if this has been answered, I have used dbworm's method within my site..works great!

    But when you click on another link the stylesheet in my example goes back to default. Is there anyway of keeping the stylesheet that the user has clicked, until they click on another stylesheet.

    My different stylesheets just change text size.

    Thanks

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,373
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You would need to set a cookie to store the name of the stylesheet selected.

    There are details in the link I gave above and also some more info here below.

    http://www.alistapart.com/articles/alternate/


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
  •