- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
“Styleswitcher”
November 15, 2010
This script allows you to switch between several .css files by a single click, thus completely changing the design of your site. The main advantage is that all design changes remain when you open the site again.
JavaScript
In order to make the script work, the index-#.html file with a style switcher should contain these lines of HTML code in order to include the styleswitch.js script and the jQuery framework:
HTML
Below you can see the general HTML script representation:
Each link (<a> tag) requires rel attribute that defines the name of .css file, which will be opened when the link is clicked.
CSS
First we include the main style.css file using the following construction:
This is necessary, since alternative style sheets will not duplicate all original style properties. With each new alternative style sheet we are going to redefine certain style values only.
Next, we’re going to create and include alternative .css files with new values for existing attributes. The <head> section of the index-#.html file contains these lines of code that include alternative style sheets:
