Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

New Revised CSS Library Forums Web Tools

Style Sheet Switcher (v1.1)

Author: Dynamic Drive

Note: Updated Oct 10th, 06'. Added ability to randomly pick a stylesheet to apply to the page (automatically).

Description: You've seen such a feature on other CSS based sites, now you can have it too. This is a "plug & play" style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your site. With a change of style sheet the entire look of your site can be transformed. Persistent cookies are used to store the user's selection and automatically recall that style sheet upon his return. Here's a summary of the script's features:

Plug and play installation. Simply define on your page a list of selectable style sheets (using: <link rel="alternate stylesheet">), and that's it. The script automatically makes each of these external style sheets selectable by the user, dynamically applying the style sheet to the page while disabling any previously active alternate styles.
One main style sheet, many secondary ones. The script lets you maintain a primary style sheet on the page that is never disabled while letting the user choose from a list of alternate style sheets to add to the page. This lets you build off of your main style sheet with the alternate ones, so the later merely contain rules that are new or modified from the main one.
Customizable memory duration. Specify exactly how long you want the user's style selection to be remembered, in days, whether it's 5 days, or 180 days. Once this period has expired, the style sheet reverts back to the default one for that user. Uses site wide cookies for persistence across entire site.
Indicate currently active alternate stylesheet. If you're using radio buttons or a select menu as the interface for choosing an alternate style sheet, this script can automatically check/select the radio button/select option on the page that corresponds to the currently applied alternate style sheet.
Auto apply random stylesheet instead. New! Instead of letting the user manually select an alternate stylesheet to use, this script can instead randomly pick from your list of secondary stylesheets and apply one to the page automatically. Three different randomized settings are supported: "eachtime", "sessiononly", or "x days" to let you fine tune exactly how the random feature behaves.

How'd we do?

Demo: Use any one of the interfaces below to switch styles!

Directions:

Step 1: Download styleswitch.js (right click->select "Save As"), and upload it to a directory on your site.

Step 2: Add the below script to the HEAD section of all pages on your site that use the same set of alternate style sheets & allow the user to pick the style sheet. This script must appear as the last item in the HEAD, below any external style sheet definitions (<link>):

The basic script installation is now done. Here's how a typical page would look like then that takes advantage of this script to enable style sheet switching:

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="user.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="user2.css" />

<script src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</head>

<body>
<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">Default style<br />
<input type="radio" name="choice" value="blue-theme" onClick="chooseStyle(this.value, 60)">Blue Theme<br />
<input type="radio" name="choice" value="brown-theme" onClick="chooseStyle(this.value, 60)">Brown Theme
</form>
// Rest of body here
</body>
</html>

That's it, though read on to see a detailed explanation on how to set up your pages.

Quick guide to setting up your pages

The below guide explains in detail how to modify your existing pages to support user style switching. It may look long, but the process is very simple. Firstly, inside the HEAD section of each participating page, specify using <link> tags your default style sheet, plus a list of alternate ones that will be user selectable:

<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="custom.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="custom2.css" />

<script src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</head>

The red tag is your default, primary style sheet, while the orange ones are the alternate ones that the user can switch between. Notice the difference in syntax between the red and orange style sheets- the later ones must carry the "rel=alternate stylesheet" attribute plus a unique "title" attribute as well. From a design perspective, your default style sheet should simply be your original style sheet that contains all the CSS rules you had before. The alternate ones then should contain only the CSS rules from the default that are different in value to achieve the new look you want, whether it's a change in (or addition of) the background image of the body, width of the left column etc. When the user switches styles, the default stylesheet is untouched as an alternate style sheet is added or removed from the page. This approach is desirable in that your alternate style sheets build off of and only contain the rules that are new or different from the default style sheet to realize the new look you want, resulting in easier maintenance overall and very compact alternative style sheets.

In manual mode (default)

By default, this script expects the user to manually select the desired alternate stylesheet to apply to the page. With the HEAD section of your pages taken care of, all that's left is to add the HTML for letting the user switch styles from your list of alternate style sheets. However you do it, simply follow the basic syntax. Lets see 3 examples- radio buttons, a select menu, and normal links:

Radio buttons as the interface:

<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">Default style<br />
<input type="radio" name="choice" value="blue-theme" onClick="chooseStyle(this.value, 60)">Blue Theme<br />
<input type="radio" name="choice" value="brown-theme" onClick="chooseStyle(this.value, 60)">Brown Theme
</form>

A select menu as the interface:

<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none" selected="selected">Default style</option>
<option value="blue-theme">Blue Theme</option>
<option value="brown-theme">Brown Theme</option>
</select>
</form>

Regular links as the interface:

<a href="javascript:chooseStyle('none', 60)" checked="checked">Default style</a>
<a href="javascript:chooseStyle('blue-theme', 60)">Blue theme</a>
<a href="javascript:chooseStyle('brown-theme', 60)">Brown theme</a>

Ah so different, yet if you look closer, all so similar. However you define your HTML to switch styles, the basic idea is to call function:

chooseStyle("style_title", persistence_in_days)

inside each choice, where "style_title" is the title of the alternate style sheet in question to switch to, and "persist_in_days", how long in days to remember and recall this style for when that choice is clicked on. Notice how a value of "none" is passed for the "style_title" parameter of the "Default style" option in each example. Pass this value when you wish that choice to clear any active alternate style sheets, so only the default one is applied. In other words, go back to the Default Style and nothing more!

Enhancing the radio buttons/ select menu interface:

Finally, if you're using radio buttons or a select menu for the switch interface, you can let the script automatically check/select the radio buttion/select option that corresponds to the currently applied alternate style sheet when the page loads. So lets say the user had chosen "Blue theme" a few days ago. Upon his return, the script can check the "Blue theme" choice inside the HTML automatically. To do this, add the below little script to the HEAD section of your page:

<script type="text/javascript">
window.onload=function(){
var formref=document.getElementById("switchform")
indicateSelected(formref.choice)
}
</script>

where "switchform" is the ID of the form of the switch interface, and "choice", either the name of the radio buttons or select menu. If the switch interface appears on all pages of your site, consider moving the above script inside "styleswitch.js".

In random mode (set variable inside "styleswitch.js" to "random")

Instead of letting the user manually select an alternate stylesheet to use, this script can instead randomly pick from your list of secondary stylesheets and apply one to the page automatically. Firstly, inside "styleswitch.js", locate the variable

var manual_or_random="random" //"manual" or "random"

By setting this variable to "random", you immediately switch the script from manual to random mode. In this mode, the script will randomly load an alternate stylesheet to the page, automatically. In the case of our demo page stylesheets:

This means that either "custom.css" will be loaded, OR "custom2.css" will be loaded, OR none of the two. Since "default.css" is the primary stylesheet, it is always loaded.

You can fine tune how often the alternate stylesheet randomizes via the second variable inside "styleswitch.js":

var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)".

Here are the 3 possible values:

"eachtime": Causes the alternate stylesheet to randomize each time the page loads. Most likely you only want to use this setting when testing out your style sheets.
"sessiononly": Causes the alternate stylesheet to randomize once per browser session. Closing and opening the browser ends one browser session.
"x days": Causes the alternate stylesheet to randomize once every x days, where x is an integer above 0. For example, "3 days".

As you can see, random doesn't have to mean annoying thanks to this second variable.