CSS Style Switcher Tutorial
3 years, 7 months ago 
Placing multiple colour or font schemes on your blog is often an excellent addition to your website, and it can help to customise your look and feel. After implementing this on my site, I recieved several requests from people wanting to see how it is done.
I have put together this simple tutorial to show how easy it is 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. Please click ‘Read More’, or go to the tutorials page in order to view step by step instructions.
Step 1 - Download the styleswitcher javascript file
- Download The File
- Upload it to the same directory Word Press is installed in
Step 2 - Link to the javascript file in your blog’s <head> area
- Go to the area in your index.php source code, just before the </head> tag
- Enter <script type="text/javascript" src="styleswitcher.js"></script>
- This links the functions required for switching the styles to the main index.php page
Step 3 - Create the various stylesheets for each desired theme
- Make a copy of the main stylesheet (wp-layout.css)
- In the new file (e.g wp-layout-orange.css) make the required changes to alter the colour of various elements
- Do this as many times as required (you can always add more later)
Step 4 - Link to the required stylesheets in your header
- For the main, default stylesheet, enter <link rel="stylesheet" type="text/css" href="wp-layout.css" title="default" /> just after the line you added before. 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 <link rel="alternate stylesheet" type="text/css" href="wp-layout-orange.css" title="orange" />
- Repeat this for all the other stylesheets you have created
Step 5 - Place the links in your page to allow a visitor to change the style
- For each stylesheet you have created, just enter a link similar to the following:
- <a href="/" onclick="setActiveStyleSheet(’orange’); return false;">Orange</a>
- This will cause the selected stylesheet for the page to change to the one clicked on in the link. It is 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>
Additional, Optional Code (for PHP users)
[PHP]
< ?
$d = dir("style/");
$styles=array();
while (false !== ($entry = $d->read())) {
if ((strpos($entry,’.') !== 0) && ($entry !== “default”)) print “<link rel=’alternate stylesheet’ type=’text/css’ media=’screen’ href=’” . get_settings(’siteurl’) . “/style/$entry/style.css’ />”;
}
$d->close();
?>
[/PHP]
This code (or similar, it may need alteration) would generate a link to each CSS file you had in your stylesheet directory automatically, saving you the hassle of entering each of them by hand. It is very useful if you have numerous stylesheets. You can download a text copy here. It assumes all stylesheets are called ’style.css’ and reside in /baseurl/style/style_sheet_name’. It shouldn’t be too hard to put together some code that generates the activation link for each style, too.
If you have any problems implementing this script, please feel free to contact me. Please note that I take no credit for creating the styleswitcher.js file, it is simply a collection of functions collated from across the Internet. If there are several queries about one particular aspect of the tutorial, I will update it or create a Frequently Asked Questions section.
Databases have always been the backbones of the business whether it comes to using data mining techniques to run your email marketing campaigns or just storing the data. Increasing trend of Distributed Databases caused by broadband internet services is encouraging professionals to take advanced DB courses. Now more of Oracle professionals are attempting 70-431 exams to get certified while MSSQL followers are going for 1z0-040 exam. Most of the web hosting companies like startlogic provide MySQL support, anhosting even provides unlimited MySQL databases. Yet it has failed to challenge the giants like Oracle and Microsoft which are leading the corporate DB market.
Css, Stylesheet, Colour
February 23rd, 2005 at 2:56 am
Ah… for me, for some reason, if i am in a page other than my main site is it sorta screws up.. what it does is it goes back to the main page and it doesnt change the style. Also if go to a page off the main one after the style has been changed it doesnt stay the same… it’s probably something I did but dont know.
February 23rd, 2005 at 3:09 am
Edit: Ok, auctually it stays the same until you click a comment thing
March 16th, 2005 at 10:41 pm
Ok, having one problem.. the theme will not change while viewing a comment page or anything besides the main page. If you have heard of that problem and know how to fix it, please inform me of how.
April 25th, 2005 at 7:11 am
[…] ctive how users can choose their own taste If you need any further information you can go here . Thanks DavidAppleyard. enjoy clicking squares . . .
Posted by ilmol in […]
April 26th, 2005 at 6:27 pm
[…] tever, click on a link/color and it should change the color of the site Red Blue Default This is how I did it. It’s not working as perfect as I would li […]
May 15th, 2005 at 9:25 am
[…] es area. Try clicking on the blue. *Woah* Haha. I did it thanks to David Appleyard’s site. Woot! It rocks. This even saves your settings into a cookie… so, if you like blue, you̵ […]
June 16th, 2005 at 9:55 am
The cookie on my site (Home / Themes) is not being accepted by all the folders even though the path is set to /. Any suggestions?
June 29th, 2005 at 10:16 am
oeluoploogkew
July 20th, 2005 at 10:54 am
Just…….gah THANK YOU. I tried so many different methods to get that stuff to work and only yours did.
Consider yourself hugged!
July 20th, 2005 at 10:58 am
[…] 20th 2005, 11:58 am
Filed under: Cool websites
I just wanted to say thank you to David Appleyard for explaining how to install the style switcher into […]
September 9th, 2005 at 5:48 pm
Thank you so much!
September 25th, 2005 at 4:10 am
I did a workaround for a problem that occured for me in Opera (maybe all browsers?) while loading the page. He always displays the default theme first (for some ms) and then switchs to the style saved in the cookie.
Add folowing line in all styles you have in the #wrapper object:
visibility: hidden;
and in the styleswitcher.js right after if(a.getAttribute(”title”) == title) a.disabled = false; add:
if(a.getAttribute(”title”) == “activator”) a.disabled = false;
create a new .css file, let’s take as an exaple style-activator.css, content:
#wrapper {visibility: visible;}
and in the header.php template file add right after the other /style-activator.css” title=”activator” />
if you are using the php script to display all styles you need to exclude the activator.. you can figure that out on your own
Hope somebody is interested in this small workaround..
Nice Script David and thanks for your great work!
September 25th, 2005 at 5:29 am
oh and added the domain to the js cookie creation, if you use www.domain.com and domain.com this could be handy:
document.cookie = name+”=”+value+expires+”; path=/”;
to
document.cookie = name+”=”+value+expires+”; path=/; domain=milchbar.nl;”;
October 12th, 2005 at 4:02 pm
[…] ders that may not “love the warm golden tones”…since I’ve already met one. http://ppleyard.org.uk/index.php?p=69#comments David Appleyard - CSS Style Switcher Tutorial […]
February 24th, 2006 at 3:38 pm
Hi,
I’ve just used your style switcher on www.fruttacotta.co.uk/sparkedit and it works great apart from one thing.
The first style for every page I open is not the deafult one! It always pickes the second style (larger text).
Any idea what this could be?
Thanks,
Konrad
February 24th, 2006 at 4:28 pm
Just figured out what I did wrong - all my stylesheets were alternate sheets, rhater than the default one being just a stylesheet.
Unfortunately the cookie doesn’t seem to work: when switching to a larger font the browser doesn’t remember this when clicking through to the next page and displays in the default font again.
Any ideas?
Ta,
Konrad
April 15th, 2006 at 7:00 am
The cookie doesnt seem to work when I choose a different page.. any suggestions?
April 20th, 2006 at 6:51 pm
does this work for wordpress 2.0 and above?
May 22nd, 2006 at 11:47 pm
hello piople!!!piople was burn here!!! i am hope.
February 3rd, 2007 at 2:07 pm
Awesome, man
April 23rd, 2007 at 10:06 pm
[…] ials of using style shee switcher just like Alex has done in his site. Here’s a link http://ppleyard.org.uk/index.php?p=69 Explore posts in the […]