Stylesheet Switching
Greetings All,
I’ve just been asked for the third time this week how to do the stylesheet switching you can see at the top right hand side of this site – so, here’s a quick guide :-
Add the following code to the section of the page (for a wordpress theme, you’ll find this in the theme directory in header.php) :-
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/styleswitcher.js"></script>
The above assumes you’re using wordpress & that you have a copy of styleswitcher.js in the same directory as your themes stylesheet.
If you’re not using wordpress, you need to use the following :-
<script type="text/javascript" src="http://www.domain.co.uk/javascript/styleswitcher.js"></script>
Again – make sure that the path is correct.
Then, Use something like the following to actually create the links to switch styles :-
<a href="#" onclick="setActiveStyleSheet('bfg'); return false;">Turn stylesheet ON</a>
<a href="#" onclick="setActiveStyleSheet('none'); return false;">Turn stylesheet OFF</a>
In this example, the first link will cookie the browser to use a stylesheet called bfg.css & the second will set it to use none.css (both of which exist).
I forget where I got the javascript from originally, but a quick search tells me it was probably A List Apart.
Hope this helps.
TTFN
BFG
A shorter URL for this post:-
http://›.ws/抛
This entry was posted
on Thursday, January 8th, 2009 at 23:37 and is filed under Random, Tech Stuff, Various.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
March 2nd, 2009 at 22:37
Thank you for your help!
December 2nd, 2009 at 22:56
Hello there.
I have a theme that have a “customize” link to change the style “on the fly”. It’s ok to see what color fits best, but I want to choose one so people coming to my site only see that one. By default it’s based on white wich, for my bad luck, is not the color I want. I’ve found the links on the “customize” link and discover this “setActiveStyleSheet” function but since it works on a link I can’t do much with it. What would suggest me to do?
Regards
Vitor Martins
December 2nd, 2009 at 23:04
Hi Vitor,
In your header, you have this :-
link rel=”stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/style.css” />
link rel=”stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/white.css” title=”white” />
link rel=”alternate stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/black.css” title=”black” />
link rel=”alternate stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/blue.css” title=”blue” />
link rel=”alternate stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/green.css” title=”green” />
link rel=”alternate stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/grey.css” title=”grey” />
If you wanted (for example) the green to be default – you would change it to look like this :-
link rel=”stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/style.css” />
link rel=”stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/green.css” title=”green” />
link rel=”alternate stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/black.css” title=”black” />
link rel=”alternate stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/blue.css” title=”blue” />
link rel=”alternate stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/white.css” title=”white” />
link rel=”alternate stylesheet” type=”text/css” href=”http://puramistura.net/wp-content/themes/minimalist/styles/grey.css” title=”grey” />
(I had to remove the opening ‘<‘s from the above code).
Hope this helps,
BFG
July 28th, 2010 at 19:33
Hello there. Sorry to be so late answering your comment but I’ve found it only yesterday, when analising Google Analytics links to my site…
Well, I’ve tried what you told me and it didn’t work. I’m sure I’ve used correct names for the style. What happens is like the site has lost his style, showing the default browser colors defined to links.
Thank you for your attention.
If possible answer to vinixtito@gmail.com or geral@puramistura.net so I can answer back sooner!
Vitor Martins