Gordon's WebLog

So, what is StyleSwitcher ?

It is a system that can be implemented on a web age so that the visitor can choose a different style to the default set up by the WebMaster.

Using a default (coffee coloured) and a grey version of my stylesheet I use it to allow visitors to choose between these two different colours for my web pages at my church web site

Now I believe that there are several different ways that this can be implemented and offered to visitors. Here is one that I find very good and is available from DynamicDrive.

First of all it is necessary to download a small JavaScript file available from DynamicDrive, and upload it to the root folder of your web site.

Next place the following code in the head of your web pages (or template), below your LINK stylesheet tags.

<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>

Also there is also a nice little tweak so that when the page is first displayed the current style used is highlighted.

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

Now for the fun and games of actually coding the pages.

Underneath your default style sheet something like
<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
add another entry for each of the alternate stylesheets like this.
<link rel="alternate stylesheet" type="text/css" media="screen" title="colour_grey" href="grey.css" />
You will see that this is maked ALTERNATE STYLESHEET.

Right, that sets up the stylesheets, now to allow the visitor to choose a style.

I use it in the right hand sidebar of my web site and the coding is as follows.

Switch styles<br />
<form id="switchform"> <input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)" />Default style<br />
<input type="radio" name="choice" value="colour_grey" onClick="chooseStyle(this.value, 60)" />Grey style<br />
<:/form>

What this does is to put up a small form with two radio buttons which, when clicked, will effect a change to use the selected stylesheet, i.e the default or a grey colour.

There are other ways to implement this, see here for more details.

HAVE FUN, and do visit my church web site and try it out for yourself!