Let the Users decide!

You have probably visited a number of public Web sites which have the function "Change text size", where you visitors can influence the text size or contrast as shown on the site.


Click on Black to load CSS-black, or click on Blue to load CSS-blue.

The technology behind this has many good uses in SharePoint, you can, for example, build your design with fixed width but still let the user determine the width of the content as needed. Other ways to use this may be to turn on or off one or more controls in the content areas at a particular moment or situation, or why not give the possibility to change the color scheme for the entire site. Do you want to let the users save the settings, a permanent cookie can be used, or - if you prefer to use this "on the fly", you can have this without cookie.

In the following example, we switch between two CSS files, and for this we take the help of Jquerys API in the latest version and a separate Jquery plugin for the switching function.

By the way, Jquery offers many interesting possibilities for UI design and development in SharePoint! More about that in a another blogpost..
Learn more about this Jquery plugin here.

For testing this stuff, do the following:

1. Download the latest Jquery API and place it in any folder, eg /Jquery/
2. Get Styleswitcher.js and place it in the same folder, eg /Jquery/
3. We now have two CSS files, one master file and one alternative file. Either you have two completely separate files with different content, or you have a master file, and a variant with only a few deviations, then use the @import, to load other CSS classes from the main file.
4. Linking the CSS files in your Master Page:
5. Link up the Jquery files.
6. Creating text links in your Master Page at the appropriate place, or link some icons:



Happy StyleSwitching!