Question

I’m using code I found for a jquery style sheet switcher.

From here: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

Now I’m running into a problem using this switcher.

I’m trying to us this to load a theme css file while keeping my main css file loaded.

My main css file contains my sites structure, and I’d like to keep this file loaded no matter what.

Now I’m trying to use this switcher to load alternate color themes for the site. The only problem is that my main css file is being unloaded and replaced by the color themes.

How can I go about having one main css file that doesn’t change and have this switcher only effect my theme css files?

thanks

Answer 1

The first script in that article replaces the stylesheet in all <link> elements. You’ll want to specify which <link> to change (as in the second example in that article which uses a class to differentiate).

For example:

<link rel="stylesheet" type="text/css" href="main.css" />
<link class="theme" rel="stylesheet" type="text/css" href="theme1.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
if($.cookie("css")) {
    $("link.theme").attr("href",$.cookie("css"));
}
$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link.theme").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});
</script>