Switch Themes Without a Page Refresh: Part 2

So in part one of this post we got all the CSS and other theme file we needed to stuck them in a document library.

With JavaScript you can change the CSS file a page uses without requiring a page refresh.  I have used this technique many times on non-SharePoint sites but there are some special challenges implementing this in SharePoint.  Most of the scripts I have used in the past use the alternate style sheet method as describred by A List Apart here. That method works fine but I had to find another way because I was already using that script to allow users to change the font size. After some research I found this script from CSS Newbie that worked pretty well without using alternate style sheets.

The problem

While the script works just fine on regular HTML pages it cause problems in SharePoint here is why :

 $("link").attr("href",$(this).attr('rel')); 

This line of code basically finds all the linked CSS files in the page and changes thier value to point to the new style sheet you select.  This is fine on a site that just uses one CSS file but in SharePoint bad things happen.  In most cases we dont want to completely remove the reference to core.css. For most themes many elements don’t need to be changed so we only have to write the CSS to change them and let core.css do the rest.  If you remove core.css its like using a global reset (discussed in more detail here) which means you will have to restyle everything.  So them point is we want to leave core.css in the page and just add our theme.

To do this I had to make some changes to the master page to create to interface users will use to swap themes.

Edit the Masterpage

Here is the code I added to the masterpage. This can be styled to look however you want and can be added anywhere in the page that makes sense.

<ul>
	<li><a rel="" href="#">Reset CSS</a></li>
	<li><a rel="/Site Styles/Verdant/theme.css" href="#">Verdant</a></li>
	<li><a rel="/Site Styles/Belltown/theme.css" href="#">Belltown</a></li>
	<li><a rel="/Site Styles/Petal/theme.css" href="#">Petal</a></li>
</ul>

In addition to this we also need to add a link to our css file to the master page. I put it at the end of the head section.

 <link class="altStyle" href="" type="text/css" rel="stylesheet"/>

I added a class to the link so that we can use jQuery to target only that css link and change it to match the theme the user selects. Initially I left the href value blank but if you want to apply some default styles you would just add the link to the css file there.

Use jQuery to Swap the CSS

So here is the code I used to swap the stylesheet. The main thing I changed is on lines 7 and 12.  I changed the selector so it will only target <link> tags with a class of ‘altStyle’.  This allows us to swap themes without breaking the link to core.css.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script src="cookie.js" type="text/javascript"></script>

<script type="text/javascript">// <!&#91;CDATA&#91;
 if($.cookie("css")) {
 $("link.altStyle").attr("href",$.cookie("css"));
 }
$(document).ready(function() {
//alert( $.cookie("css") );
 $("#nav li a").click(function() {
 $("link.altStyle").attr("href",$(this).attr('rel'));
 $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
 return false;
 });
});
// &#93;&#93;></script>

Resources

• You will need jQuery either locally or linked from Google.  Just update the link on line 1 as needed.
• In the code above you will notice a link to cookie.js, this is the jQjuery cookie plugin that you will need in order to save users’ theme selections.  In the code above on line 13 you will see where I create a cookie named css.  For testing purposes you can uncomment line 10 to see what the cookie value is on page load.   You can download the plugin from here.  jQuery Cookie Plugin
• You can see the original code I started from in this script from CSS Newbie

Conclusion

While this is a very simple solution it is a quick way to add in some fuctionality that many users want without alot of custom code or requiring the user to navigate to multiple pages.  Users like to feel that they have some control over the site (even if its just changing the color).  Feel free to post any questions or comments.