CSS Style Switcher for SharePoint Master page

I recently went through a CSS Style switcher article done in JQuery and PHP – http://net.tutsplus.com/tutorials/javascript-ajax/jquery-style-switcher/

Here is the online demo for the style switcher which looks pretty neat – http://demos.net.tutsplus.com/03_jQueryStyleSwitcher/demo/

Click on Day and Night tabs to switch over the effects. You can notice that the jquery fading effect makes it a perfect switching.

Now, why don’t we have the same in SharePoint for our Master Pages. This would be an excellent add-on for sites that need Accessibility features, basically style sheet switching for people who are color blind. You will be able to understand it better visiting this BBC site – http://www.bbc.co.uk/accessibility/index.shtml .

On the top right hand side of the page, you can see icons where it mentions diferent colours possible for the site dynamically.

Click on the icons and you will notice what I meant. These are one of the accessibility feature that I was talking about

Ok, Now how about adding all these into a SharePoint master page, so that you can switch your styles dynamically on a button click.

1. First of all, you need to upload the jquery.js and the styleswitcher.jquery.js file into the SharePoint Style library. Download all the files at the bottom of the post. Also add the loading.gif file into  the path - /Style Library/Images/ inside your root site.

2. Add the js file references in the head section of your master page.

[sourcecode language="xml"]
<script src="/Style Library/en-us/js/jquery.js" type="text/javascript"></script>
<script src="/Style Library/en-us/js/styleswitcher.jquery.js" type="text/javascript"></script>
[/sourcecode]

3. Add the div tags in your master page. As a demo, you can add the div inside the PlaceHolderPageDescription, just below the s4-pagedescription css class. This will be added in your master page just below your Site title. Make sure that the div id name is style-switcher always, or you will have to change the final call in Step 5.

The css classes whiteandblue.css and blackandyellow.css should be added in the path - /Style Library/en-us/Core Styles/ in your SharePoint site. These styles are the one that will be switched finally.

[sourcecode language="xml"]
<div id="style-switcher">
<h4>Choose your style:</h4>
<ul>
<li id="day"><a href="" name="whiteandblue.css">White and Blue</a></li>
<li id="night"><a href="" name="blackandyellow.css">Black and Yellow</a></li>
</ul>
</div>
[/sourcecode]

4.  Now its the main script that is called within the styleswitcher.js file. The function onClickStyleChange below adds the css link for the master page. This is the place where the switching takes place.

[sourcecode language="xml"]
<script type="text/javascript">
function onClickStyleChange(strvalue)
{
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement(‘link’);
cssNode.type = ‘text/css’;
cssNode.rel = ‘stylesheet’;
cssNode.href = ‘/Style Library/en-us/Core Styles/’ + strvalue;
cssNode.media = ‘screen’;
headID.appendChild(cssNode);
}
</script>
[/sourcecode]

5.  Add the below script in the master page which ultimately calls the function inside the jquery. This gives the fade in and fade out effect for our master page which is really cool.

[sourcecode language="xml"]
<script type="text/javascript">
$(‘#style-switcher a’).styleSwitcher(); // Calling the plugin…
</script>
[/sourcecode]

6. Save, checkin and publish your master page. You are good to go.

For convenience I have zipped all the necessary js files and loading.gif file over here. Special thanks to the person who initially created this in Php.

About Deepu Nair

Currently working as Technical Lead in SharePoint for Ernst and Young in Kerala, Technopark. He has been enjoying SharePoint since 2007 . He is also MCTS certified for MOSS and SharePoint 2010. You can follow him in Twitter - @deepuvnair

2 thoughts on “CSS Style Switcher for SharePoint Master page

  1. I have customized the original solution to work for SharePoint applications. You might look into the original source that I have provided above and convert it into any different site and programming language that you need.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>