If you have not already done so, you may want to read the following articles as well. This guide was written as the part of a series of articles on how to provide alternate style sheets for your website and change them.
How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes. It deals with the CSS aspect of switching style sheets.
Let's assume that we have the following style sheets defined in our
HEAD section. This is the same code described and explained
in the first instalment of this
<link rel="stylesheet" type="text/css" title="blue" href="http://example.com/css/blue.css"> <link rel="alternate stylesheet" type="text/css" title="pink" href="http://example.com/css/pink.css">
You will need to provide some way for your visitors to select the theme or CSS they want. There are many ways to do this, including the use of radio buttons, drop down selection boxes, normal submit buttons, text links, and so on. For usability reasons, you should not use things like checkboxes which suggests to users that they can simultaneously select a few themes and have them work together.
Here's an example of HTML code using normal submit buttons.
<form> <input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue"> <input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink"> </form>
switch_style(), will run. The function will be passed either 'blue' or 'pink' as its
parameters, depending on which button is clicked. The words "blue" and "pink" correspond to the title attributes
link elements referencing the style sheets.
Note that this script includes the
get_cookie() functions from the
For your convenience, I have already included those functions in the block of code above, so you do not need to copy and paste from that
article. However, you may still want to read that article
to understand the default settings and assumptions I make in my cookie code.
switch_style() function essentially iterates through all your
link tags looking for a style sheet with the
same title as the text specified in its argument (parameter). If it matches, it sets a special property, called
to false, thus enabling that style sheet. In the meantime, all other relevant style sheets are disabled. The function ignores all
persistent style sheets as well
as any non-style-sheet
link tags, such as those used for your
When it finishes, it sets a cookie with the necessary information about the style sheet setting. By default, the name of the cookie
is "style" and it is retained for 30 days. You can change this by altering the values of the
style_cookie_duration variables at the start of the script.
To ensure that the visitors' style sheet settings remain when they visit other pages of your site, as well as when they reload
the page, you will also need to add an
onload attribute to your web pages'
body tag. For example,
<body> to the following:
This causes the browser to run the
set_style_from_cookie() function when the page is loaded. The function merely
checks for the style-setting cookie, and if present, switches the style sheets accordingly. Otherwise, it does nothing.
You can check out how the script works using the test copy loaded with this page. To change between the current style sheet used on thesitewizard.com and the older version, simply select the appropriate button below.
The above code has been tested in IE 6 to 8, Opera 9.x to 10.x, Firefox 2.x to 3.6.x, and Safari for Windows 3.1. It should (hopefully) work for all newer browsers as well.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: