Switch CSS stylesheets using jQuery

. Sunday, June 15, 2008
  • Agregar a Technorati
  • Agregar a Del.icio.us
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks

CSS Stylesheet Switcher - what does it mean?
A stylesheet switcher allows your visitors to choose from a number of stylesheets they would like to view your website with. For example, you may have three pre-made stylesheets (say red, blue and green) and you want your visitors to choose and apply any one of them in your webpage without redirecting them to a new page or refreshing the page.

This tutorial will show you how to create such a client side css stylesheet switcher using jQuery javascript library.

Default Stylesheet
I assume you already have a default stylesheet implemented in your webpage

<link rel="stylesheet" href="default.css" type="text/css">

The list of options available to your visitors
List your available stylesheets here (follow the format)
<ul>
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>

Time for some JavaScript
This is the jQuery code that switches your stylesheets instantly once the visitor clicks on any of the links (listed above in ul tag)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
// red
$("#css-red").click(function() {
$(
"link[rel=stylesheet]").attr({href : "red.css"});
});

// blue
$("#css-blue").click(function() {
$(
"link[rel=stylesheet]").attr({href : "blue.css"});
});

// green
$("#css-green").click(function() {
$(
"link[rel=stylesheet]").attr({href : "green.css"});
});
});
</script>

13 comments:

Anonymous said...

just what i was looking for. nice tutorial. thanks

Pere said...

Hi!

Very nice post...

I was scratching my head a bit to figure out how could I 'translate' it to an @import of a stylesheet, to override only some styles and not the entire stylesheet.

It is pretty simple: just do it the same way but with
$('style[type="text/css"]').text('@import url("yourstylesheet.css");');

Anonymous said...

Hey there!

Great post...

I'm really beginning to love jquery.
moo who? proto what? :)

Thanks for this post.

R.

Anonymous said...

Thanks.. just what I was looking for to use on my blog.

You rock!!

http://www.lrwv.com

-Tyler

Anonymous said...

Ok I got this to working great on my site, Thank you again.....

but how do I make it so that it remember the last css style chosen byt the visitor.

ex: if blue.css when click, then blue.css would be the user selection when they visit the site again.. and not the default green.css

can this setting be saved in their browse cookies??

Anonymous said...

Maybe Pere or someone could expand on this - $('style[type="text/css"]').text('@import url("yourstylesheet.css");');

To override some styles. Not sure exactly how to use that code instead.

Thanks

Unknown said...

Pretty good. Works like a charm. However, you should do a follow up on cookies because the chosen style isn't remembered at all.

Anonymous said...

If you want a css to be user specific, use a cookie :)

Anonymous said...

This thing is AWESOME but when the browser is refreshed, it goes back to the default style! Any word on how that can be fixed?

Marney C said...

Hi!

Great little tool for the toolbox!

Pere, your 'translation' to an @import seams to be working for me in Firefox, Mozilla and Safari, but not IE.

Any clues?

boutmos said...

This code overwrite all existing stylesheet so you can't use multiple .css.

I didn't manage to use @ import.

my solution is :

- put an id on the stylesheet you want to switch an then

$("link[type='text/css']").each( function(i){
if ($(this).attr('id') == 'theme') {
$(this).attr({href : "squelettes/css/bleu.css"});
}
});

Daniel M said...

@Tyler:

In order to remember the last CSS file, store it in a Javascript variable during the page, and use cookies. e.g. each time it changes, put it in a cookie, and then use onload

in Jquery: document.ready(function() { //do stuff });

and retrieve the data from the cookie and update it.

@SC:

$() is a selector. so:

$('style[type="text/css"]')

finds all style tags with the attribute text/css

then .text() sets the text in it, so we update all stylesheets inside text with @import(URL), which effectively is an inline styles while letting the href="" on the tag remain, so you get the original stylesheet and the new one you're putting in.

@Marney:

it's probably not doing the selector right in IE, put an ID on the style instead. See below.

@Boutmos:

That's a inefficient way to do it, the selector works for ID's. You can just do:

$("#theme").attr({href: "URL"});

Hope this helps!

Anonymous said...

To append styles using jQuery:
$('<link>').attr({ 'rel': 'stylesheet', 'href': 'http://path/to/stylesheet.css' }).appendTo('head')