CSS Style Switcher

by on 21st May 2007 with 24 Comments

Placing multiple colour or font schemes on your website blog is often an excellent addition, and it can help to customise your look and feel. It’s easy to add multiple stylesheets to your blog, and ensure that the user’s selection is stored on their computer so the style remains the same on each page.

1. Download the styleswitcher javascript file

You need to download the following file, and make sure that it is included in all the pages you’d like to run the style switcher.

Download The File

2. Link to the javascript file in your tag

Go to the area in your index.php source code, just before the tag. Enter the following line of text, to ensure that the javascript file is included correctly:


3. Create the various stylesheets

Make a copy of your main style sheet, and alter the colours and layout to create the new colour scheme for your website. Rename the new style sheet along the lines of “style-orange.css”. Do this as many times as required (you can always add more later).

4. Link to the stylesheets in your header

For the main, default stylesheet, enter the following just after the line we added above including the javascript file. This ensures that this is the stylesheet that loads when the page is opened for the first time.


For all the other stylesheets you have created, enter a line such as the following, changing the name of the colour for each style sheet you have added. Repeat it for all your additional styles.


5. Place CSS switcher links in your page

For each stylesheet you have created, just enter a link similar to the following. This will cause the selected stylesheet for the page to change to the one clicked on in the link. The setActiveStyleSheet(’orange’); part needs to be altered to reflect the title of the alternate style sheets you specified before.

Orange

It’s also a good idea to enter a link similar to the following, in case a visitor wants to switch back to the default stylesheet:

Default

So there you have it – an easy and straight forward way to add additional style sheets to your website, giving your visitors a choice as to which colour or layout they see. This method can also be used for adding a high contrast accessible style sheet, which is something recommended for any website.

Comments & Discussion

24 Comments

Comments & Discussion

24 Comments

  1. Hope it’ll work as smoothly as it looks.

    Thank you very much.

  2. devanshu says:

    man…it looks so simple…thanx

  3. devanshu says:

    this is not workin..

  4. lynn says:

    I can’t get it to work either. When I click on a link to change the style sheet it sends me to my web host home page. I’ve tested it in firefox, opera and ie6.

  5. thom23 says:

    It will work after changing the inverted commas to apostrophes – at the setActiveStyleSheet(’orange’) function around the default/color name – have fun

  6. Dreams Media says:

    Just waiting to use this on my site. I have been making CSS based sites since last 6 months, but never tried this. I am currently re-designing my own site, and would use most of the things you mentioned in this website.

  7. Cosmin says:

    Working perfect, follow thom23′s advice and that’s it!

    Nice job! Simple and straight to the point. :)

  8. M says:

    I have followed all the advise and when I click to change the page style it goes to my local host page :s any way around this?

    The site im making is saves a .php

  9. luciffere says:

    Not work in IE7, only Firefox and opera…

  10. Tom says:

    Thx, work’s fine with ”-fix.
    Tested and working as intended in ff3, ie6-8

  11. Barbara says:

    Working perfectly, just follow thom23′s instructions. Maybe the OP should correct the inverted comma issue in the post…

  12. SEO says:

    Thnks for this Great

  13. John says:

    Thanks, but everytime I refresh the page it goes back to the default color for a second or two. Any way to stop this from happening as it’s really annoying.

  14. snocaps says:

    When the page refreshes the style doesn’t change.. The paths are right though, I can’t figure it out :(

    Someone help please.

  15. gun says:

    Working Great

    Thanks mate

  16. Great script says:

    Good script. :)

    But what if to use the selected style on a popup window.

    I was wondering, how can I get the current cookie style name?

    I mean – something like using this on another page (popup):

    Won’t work. What should I do? Thanks alot :)

  17. Ger says:

    Great! Thank you so much for your tutorial :)

Leave a Comment

Subscribe
Membership
About the Author