Creative Web Specialist - An online portfolio and resource site of Warren Buckley

Hello all,
Well hopefully this will be a useful solution to the Umbraco CMS community. I have worked on a CSS style switcher that allows the user to change the look of your site with a different CSS stylesheet. For example you may have two coloured themes that you want your user to be able to decide which they want to use when browsing your site.

This solution requires two files, a VB.NET usercontrol and an XSLT file.

The VB.NET file checks if the style querystring exists if so it creates the cookie of StyleSwitch with the value from the style querystring otherwise it sets a default value. If your intrested take a look at the code in usercontrol, it is heavily commented and should be easy to understand.

The XSLT does the important part of loading the correct stylesheet depending on the cookie value. Using an XSL:Choose statement with the umbraco.library we are able to read the cookie value and load diffferent stylesheets depending on the cookie value.

This solution is very flexible as it is also possible to load in different JavaScript files as well to compliment the CSS stylesheets. For example I plan to use this style switcher in a future release of my Creative Website Wizard Package for Umbraco to load in different layouts and themes. However just simply changing the CSS will not change the font colour used in sIFR3 as this is set with a JavaScript config file. So I will need to load a new JavaScript file along with the CSS file when doing the theme switches.

If you want to add more styles to the switcher just simply add another XSL:When statement and follow by example, it is fairly straight forward, but if you have any problems or questions about using this please leave a comment and I will help you out.

How to install and use

1. Goto Developers section and right click Macros and select Import Package
2. Follow the wizard to install the package.
3. After installing close the wizard window and goto the developers section again to see the new changes
4. The installer has installed two macros one called [XSLT] CSS Switcher and [Usercontrol] CSS Switcher Cookie and uploads the relevant files for these macros.
5. Goto XSLT and open the CSSSwitcher.xslt
6. Ammend the paths to the CSS and remove the text about “I am using style one” etc….
7. Insert both macros into the head section of your HTML document in the template/s
8. Last step is to create links to allow your visitor to switch styles - see the example below

Example of using switch style links
<ul>
<li><a href=”?style=default” mce_href=”?style=default”>Default style</a></li>
<li><a href=”?style=1″ mce_href=”?style=1″>Style one</a></li>
<li><a href=”?style=2″ mce_href=”?style=2″>Style two</a></li>
</ul>

Finally any comments, feedback or concerns please leave a comment and I will get back to you.
Thanks,
Warren