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">// <![CDATA[
 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;
 });
});
// ]]></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.

Related posts:

1. Switch Themes Without a Page Refresh: Part 1
2. Switch List Displays with JQuery and CSS
3. Styling SharePoint Blog Comments: Part 2

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.  For this solution there were several requirements.

• Users need to be able to switch themes and have the setting saved
• No page refresh
• Should be able to use both out of the box themes and custom themes

So first I needed to get the CSS files and images for the themes I wanted to use.  When you assign a theme to a site all the files for the theme are copied to a folder named _themes in the root of the site.

_themes folder

So what I did was assign each theme I wanted to use to the site one at a time.  With SharePoint designer I copied the files folders for each theme into a document library called Site Styles.  Each folder contains all the resources needed or the theme to work. 

Here is what I ended up with

Site Styles Library

If I wanted to create a custom theme I could just add another folder with my custom CSS and images.

This same technique can be used when developing your own custom theme, just copy one that is similar to what you want and use the alternate CSS link on the master page settings page to add it to the site.  Inside of the folder for each theme is a file named theme.css. Link to that file and SharePoint will apply the theme to the site.

Alternate CSS URL

Now everything we have done so far is pretty basic and easy to do but we will pull all this together with some simple edits to the master page to complete the solution. In part 2 I’ll explain how we use JavaScript to switch styles and set a cookie to remember the users theme choice.

Related posts:

1. Switch Themes Without a Page Refresh: Part 2
2. Styling the MOSS horizontal navigation menu
3. Adding references to the page head: the easy way