CSS Style Switcher
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.
Get unlimited downloads of 1 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Shopify, Tumblr & More
Logos, Print & Mockups
Titles, Openers & Stings
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.
Go to the area in your index.php source code, just before the
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
<link rel="stylesheet" type="text/css" href="style.css" title="default" />
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.
<link rel="alternate stylesheet" type="text/css" href="style-orange.css" title="orange" />
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.
<a href="/" onclick="setActiveStyleSheet(’orange’); return false;">Orange</a>
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:
<a href="/" onclick="setActiveStyleSheet(’default’); return false;">Default</a>
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.