From a designer’s point of view, another useful feature is that it is remarkably simple to copy the Hex code of any given colour on the chart for easy use in Photoshop or your CSS file. You can save a load colour palettes for different projects.

There is also a Pro version offering additional features such as the ability to drop and drop colours to create small swatches on screen and the ability to automatically import colours from a picture or a screenshot. This hasn’t yet been released for Mac so we couldn’t review it at this time, but we’ll let you know when it becomes available.

Take a look for yourself and decide whether it’s a piece of software which would enhance your design workflow. There’s also an online version so you can get a feel for how the software works.

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:

1

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

1

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

1

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

1

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

1

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