jQuery Style Sheet Switcher with preview

jquery style 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!

<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link type="text/css" rel="stylesheet" id="theme" href="css/theme1.css" />

Next we load up jQuery, in this case using the Google CDN, along with our style switcher file:

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

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

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

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

<script type="text/javascript">
$(document).ready(function() {
	$('#header').styleSwitcher({
             slidein:false
        });
});
</script>

Disable the preview on hover (default is on):

<script type="text/javascript">
$(document).ready(function() {
	$('#header').styleSwitcher({
             preview:false
        });
});
</script>

Change the default directory of the theme CSS files (default is “css/”):

<script type="text/javascript">
$(document).ready(function() {
	$('#header').styleSwitcher({
             directory:"http://www.fullpath.com/to/css/"
        });
});
</script>

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:

<script type="text/javascript">
$(document).ready(function() {
	$('#header').styleSwitcher({
             cookieExpires: 60
        });
});
</script>

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

<script type="text/javascript">
$(document).ready(function() {
	$('#header').styleSwitcher({
             manageCookieLoad: false
        });
});
</script>

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

<script type="text/javascript">
$(document).ready(function() {
	$('#header').styleSwitcher({
             manageCookieLoad: false
        });
});
</script>

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

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

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.

<script type="text/javascript">
$(document).ready(function() {
	$('#header').styleSwitcher({
             useCookie: false
        });
});
</script>

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.

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

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.

Related Posts
  • http://www.globalidea.co.uk Chris

    This is the best switcher i have seen yet, great stuff

  • http://electrokami.com Metawriter

    Thank you Chris! Glad to hear it!

    Nice website by the way!

  • http://yesbd.com Redwan

    Thanks, But There is no Cookie option when i Load again the css shows default one. Can u please Make the it with cookie.

  • http://electrokami.com Metawriter

    Good idea Redwan! We will make an upgraded version with a cookie feature!

  • http://electrokami.com Metawriter

    Alright Redwan – we have updated the jQuery Style Switcher to v1.4 and added in cookie control!

  • http://budclick.com Redwan

    Many many Thanks! I m Really happy and Wish u all the Success in Life.

  • Pingback: A cool PHP tip to make your programs more efficient: Associative Array Logic | electro kami()

  • searny

    this is the right place to find jQuery stuff – thanks

  • Kaye

    Easy to use and easy to submit

  • jo

    Hi,
    I’m not too good at php coding, so I have question.
    How do I combine some of the options?
    e.g I want cookies off, and hover default off.

    thanks in advance!

    • http://electrokami.com Cameron

      Hey Jo – here is a basic rundown of the functionality that you have requested:
      First we configure the JS to not manage the cookie load, and second, we use PHP to load the CSS based off of the existing cookies for your site.

      If you take a look a the end of the article, I have added new sample code that you can use to achieve this effect.

  • http://mypigsfly.com julie

    Great chunk of code, thank you! I’m a total hack when it comes to jquery…any possibility of adding an easing/fadein feature to the hover preview just so the transition wouldn’t be so abrupt? Again, thank you!

  • costin

    hi, very very good work, thank you!

    I,m working on a template and a have a question:

    i want to change some colors and backgounds patterns:

    How can i put in the head 2 link of css ? ( I have separated colors and separated backgounds )??????

    ps,i changed the directory address

  • http://ianrobertdouglas.com Ian Douglas

    Anyone can give baby instructions on implementing this on a WordPress site?