CSS Style Switcher | Design Shack

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 `<head>` tag

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

<script type="text/javascript" src="styleswitcher.js"></script>

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.

<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.