SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    It's Warmer in the Basement xxJoyfulxx's Avatar
    Join Date
    Jul 2004
    Location
    Elmhurst, IL
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing color schemes with CSS - Question

    I think I have the answer to my question, but I just want to confirm that there isn't an easier - or better - way to do what I am working on.

    I have a basic html page using all CSS. What I want to do is have the option for the user to change the color scheme of the entire page by clicking on a little color coded "changer" thingie at the top of the page. I'm looking at doing 3 different schemes right now.
    So obviously I have 3 different CSS files with the appropriate color settings.

    My question is this: When they click on, say, the "blue" color scheme - do I have to make a whole new set of pages for the blue scheme - or how can I load the blue CSS to the current page?

    Like if my home page is index.htm, and I want the blue scheme, so I have to make a page called index_blue.htm or something. That seems rather tedious.

    Is there a way to switch the color scheme without loading all new re-named pages?

    This seems like something that common sense should answer for me, but I'm in a daze today.

    Thanks
    Joy

  2. #2
    SitePoint Zealot Dano's Avatar
    Join Date
    Jun 2004
    Location
    Buenos Aires, Argentina
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cant help a lot. I think i read about that after a long search.

    What i know is that you need a cookie. I dont remember if i read a how-to on sitepoint (search for this) or on webmonkey.com. You can figure how webmonkey applies it to the text size.
    ---
    Dano De Weert
    ---

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You will have to use some javascript to make it work. Here is a tutorial that may help.

    Hope it does.

    Johnny

  4. #4
    It's Warmer in the Basement xxJoyfulxx's Avatar
    Join Date
    Jul 2004
    Location
    Elmhurst, IL
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ooh that sounds perfect. I will read through it. Thanks Johnny.

    this part of the article cracked me up:
    "You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are."

    hahaha..

  5. #5
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i use to have a color scheme changer on my site. here's how i did it. it uses a bit of javascript tho. you can grab it here.

    in the <head>...</head> i had
    HTML Code:
    <script type="text/javascript" src="http://www.karinne.net/js/styleswitcher.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.karinne.net/css/green/display.css" />
    <link rel="alternate stylesheet" type="text/css" href="http://www.karinne.net/css/blue/display.css" title="blue" />
    <link rel="alternate stylesheet" type="text/css" href="http://www.karinne.net/css/red/display.css" title="red" />
    and this was my code that created little colored boxes
    HTML Code:
    <a href="#" onclick="setActiveStyleSheet('', 1);return false;" title="Switch to default theme"><div style="width: 15px; height: 13px; background-color: #696; border: 1px solid #000; margin: 2px 5px 2px 0; float: left"></div></a>
    <a href="#" onclick="setActiveStyleSheet('blue', 1);return false;" title="Switch to blue theme" class="noline"><div style="width: 15px; height: 13px; background-color: #285577; border: 1px solid #000; margin: 2px 5px 2px 0; float: left"></div></a>
    <a href="#" onclick="setActiveStyleSheet('red', 1);return false;" title="Switch to red theme" class="noline"><div style="width: 15px; height: 13px; background-color: #d48e8e; border: 1px solid #000; margin: 2px 5px 2px 0; float: left"></div></a>
    the important stuff in there is the onclick="setActiveStyleSheet('red', 1);return false; where red or blue is the title attribute to my alternate stylesheet.

    hth

  6. #6
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ooops... too late... johnny beat me to it

  7. #7
    It's Warmer in the Basement xxJoyfulxx's Avatar
    Join Date
    Jul 2004
    Location
    Elmhurst, IL
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But thank you for including the script!! I hadn't had time to search the site and make sense of it. Your post is perfect, thank you!
    Joy


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
  •