If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

“Styleswitcher”

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: