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

  • http://www. Will Knot B. Revealed Snr.

    Hope it’ll work as smoothly as it looks.

    Thank you very much.

  • devanshu

    man…it looks so simple…thanx

  • devanshu

    this is not workin..

  • http://www. lynn

    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.

  • http://www. thom23

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

  • http://www.dreamsmedia.in Dreams Media

    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.

  • Cosmin

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

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

  • http://www. M

    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

  • http://www.artmakeup.ro luciffere

    Not work in IE7, only Firefox and opera…

  • Pingback: Style Sheet Switcher, hojas de estilo alternativas para nuestros usuarios - MixInformatico.com

  • Tom

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

  • Pingback: Style Switchers Are Back: Ideas, Examples and a Contest « Smashing Magazine

  • http://beautifullalaland.com/ Barbara

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

  • Pingback: css switcher

  • http://www.e-seo.info SEO

    Thnks for this Great

  • Pingback: ThemeSwitcher in Web Design, Fantstic Examples and Tutorials | Design Reviver

  • Pingback: Pattern Inc » ThemeSwitcher in Web Design, Fantstic Examples and Tutorials

  • Pingback: ThemeSwitcher in Web Design, Fantstic Examples and Tutorials

  • John

    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.

  • snocaps

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

    Someone help please.

  • gun

    Working Great

    Thanks mate

  • Great script

    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 :)

  • Ger

    Great! Thank you so much for your tutorial :)

  • Pingback: Looking for a style swicher | BlogoSfera

Subscribe
Membership
About the Author