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.
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.
<h4>Choose your style:</h4>
<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>
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.
var headID = document.getElementsByTagName("head");
var cssNode = document.createElement(‘link’);
cssNode.type = ‘text/css’;
cssNode.rel = ‘stylesheet’;
cssNode.href = ‘/Style Library/en-us/Core Styles/’ + strvalue;
cssNode.media = ‘screen’;
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.
$(‘#style-switcher a’).styleSwitcher(); // Calling the plugin…
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.