CSS Style Switcher
by David Appleyard on 21st May 2007 with 23 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.
Join the community as a Design Shack member, and you'll be able to:
- Feature your designs in the gallery
- Save your favourite designs into a collection
- Receive our weekly newsletter for designers
- Use keyboard navigation
- Gain early access to new features
David Appleyard
David Appleyard is a designer, editor, and online entrepreneur based in Manchester, UK. He manages Tuts+, along with having founded several design websites including Design Shack.
- Twitter: @davidappleyard Google+: David Appleyard
- Dribbble: davidappleyard
Comments & Discussion
23 Comments
Hope it’ll work as smoothly as it looks.
Thank you very much.
man…it looks so simple…thanx
this is not workin..
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.
It will work after changing the inverted commas to apostrophes – at the setActiveStyleSheet(’orange’) function around the default/color name – have fun
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.
Working perfect, follow thom23′s advice and that’s it!
Nice job! Simple and straight to the point. :)
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
Not work in IE7, only Firefox and opera…
Pingback: Style Sheet Switcher, hojas de estilo alternativas para nuestros usuarios - MixInformatico.com
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
Working perfectly, just follow thom23′s instructions. Maybe the OP should correct the inverted comma issue in the post…
Pingback: css switcher
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
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.
When the page refreshes the style doesn’t change.. The paths are right though, I can’t figure it out :(
Someone help please.
Working Great
Thanks mate
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 :)
Great! Thank you so much for your tutorial :)