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.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
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.
2. Link to the javascript file in your
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.