jQuery Style Sheet Switcher with preview
Change your CSS easily for any site visitor
This jQuery plugin gives you very simple way to change your stylesheet theme. Brought to us by immortalwolf.com, this easily configurable addon to the already easy to use jQuery is a cinch.
Even cooler, this plugin is tested for IE6+, Firefox, Safari, Chrome, Opera, and even Android and iPhones!
How does it work?
First we add in our main stylesheet (seen below as styles.css) and then we load our theme file which can have different colors, fonts, layouts, or background images – whatever you want!
[html]
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link type="text/css" rel="stylesheet" id="theme" href="css/theme1.css" />
[/html]
Next we load up jQuery, in this case using the Google CDN, along with our style switcher file:
[html]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script>
<script type="text/javascript" src="js/jquery.style-switcher.js"></script>
[/html]
And finally we put it to action! Here we tell the style switcher to load style sheets from the links presented in the div with id=”header”.
[html]
<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher();
});
</script>
<div id="header">
<a href="javascript: void(0)" title="switch styling" id="theme1">Default</a>
<a href="javascript: void(0)" title="switch styling" id="theme2">Darkness</a>
<a href="javascript: void(0)" title="switch styling" id="theme3">Colorful</a>
</div>
[/html]
The only thing to note here is that the id for each of the links relates to the name of the CSS file that the style switcher will locate. In other words, they must match.
Once you have all the above in place, the style switcher takes care of the rest! It even shows a preview of the alternate CSS files when the links are hovered over.
Jump to the demo or read on!
Using the Style Switcher configuration options
There are a handful of items to make the jQuery CSS style switcher work better for you!
Here is the full list of configuration options:
- slidein [default = true]
- preview [default = true]
- container [default = this.selector]
- directory [default = “css/”]
- useCookie [default = true]
- cookieExpires [default = 30]
- manageCookieLoad [default = true]
And here are some examples that will help you understand each of them:
Turn off the slidein on page load (default is turned on):
[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher({
slidein:false
});
});
</script>
[/javascript]
Disable the preview on hover (default is on):
[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher({
preview:false
});
});
</script>
[/javascript]
Change the default directory of the theme CSS files (default is “css/”):
[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher({
directory:"http://www.fullpath.com/to/css/"
});
});
</script>
[/javascript]
Make sure to include the trailing slash in the directory!
That’s it!
Update – 1/27/11
1/27/2011: Thanks to a comment from Redwan, we updated jQuery Style Sheet Switcher to include a cookie option that will save the user CSS choice and load it on each page change. We have updated the component with the modification!
Cookie support
By default, CSS choices are now saved in the cookies and handled 100% via JavaScript. You have three new configuration options to control the usage of cookies.
Change the time to expire for the cookie in days (default is “30” days). Here we change the expire time to 60 days:
[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher({
cookieExpires: 60
});
});
</script>
[/javascript]
The jQuery Style Sheet Switcher plugin will automatically check the cookie and load the correct style sheet.
You can disable the JavaScript handling of the site visitor’s CSS choice (default is on):
[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher({
manageCookieLoad: false
});
});
</script>
[/javascript]
You can use this option if you would prefer to have PHP or some other server-sided script handle the cookie on page load (this is recommended).
So first you would turn off the JavaScript handled CSS switching on page load (as discussed above):
[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher({
manageCookieLoad: false
});
});
</script>
[/javascript]
And second you would add in a server-side script call to load the cookie info for the style sheet to load (in this example we will use PHP):
[html]
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<?php
$styleToLoad = $_COOKIE["style_selected"];
if(isset($styleToLoad)){
?>
<link type="text/css" rel="stylesheet" id="theme" href="css/<?php echo $styleToLoad;?>.css" />
<?php
} // end if
else{
?>
<link type="text/css" rel="stylesheet" id="theme" href="css/theme1.css" />
<?php
}// end else
?>
[/html]
And finally, if you would like to use this script without any cookies at all, you can simply turn off the feature completely (default is on – cookies enabled).
Note that manageCookieLoad will be overridden by this setting, and any server-sided script will still load the cookie if it is on a client’s machine.
[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher({
useCookie: false
});
});
</script>
[/javascript]
Update – 6/24/11
6/24/2011: In response to a comment from Jo, here is some sample code that will disable the preview on hover, disable the JS management of the cookie loading, and use PHP to load the correct stylesheet.
[html]<script type="text/javascript">
$(document).ready(function() {
$(‘#header’).styleSwitcher({
preview:false,
manageCookieLoad: false
});
});
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<?php
$styleToLoad = $_COOKIE["style_selected"];
if(isset($styleToLoad)){
?>
<link type="text/css" rel="stylesheet" id="theme" href="css/<?php echo $styleToLoad;?>.css" />
<?php
} // end if
else{
?>
<link type="text/css" rel="stylesheet" id="theme" href="css/theme1.css" />
<?php
}// end else
?>
[/html]
For every additional stylesheet, you will need another block in the if statement (or you can use the PHP array technique that is described in detail here).
Get the download and view the demo:
Demo jQuery Style Sheet Switcher
Download jQuery Style Sheet Switcher
Support and questions
Please direct any inquiries for this file in the comments below.