May 02, 2004
style switcher
Set your board or site up to have a choice of looks using css, and let your visitors select their preference with this style switcher.

by atlass

---

Setting up a style switcher is pretty easy, all you need is a javascript file, some css files and a bit of code for your visitors to click and choose their style.

So here's what you do - first off, I suggest you create your stylesheets. If you're doing this for your ezboard, then create them in the board so you can see how they look. You need at least two, obviously. When you've done that, upload them to your own webhost and get the urls. Yes, you need a webhost.

Let's assume you have a choice of three stylesheets - the code to link to them will look like this:

As you can see, the one you want to load as default is the "stylesheet" while the optional choices are "alternate stylesheet".

Next you add the javascript that will control the behaviour of the switching device and store a cookie. This javascript must appear after the link tags.

You can download that javascript from here - right click (or alt click) and save it.

And lastly, place some code to allow your user to make their choice - you can put this on a single page if you'd prefer it to not be repeated on every page. The link tags and javascript must be present on all pages that you want to use the styles, however.

In the link tags, what is set as title is the value that these links use to choose the stylesheet. You can change default, option1 and option2 to anything you like, as long as you change it in both places. The title and name in the above links can be anything you like.

If you want to have another stylesheet that is used no matter what, then you set up up with rel="stylesheet" and OMIT the title from the link tag.

for example: That's called a persistant stylesheet.

And that's pretty much all there is to it! If you want to get more technical, why not meader over to a list apart, to where I got it from in the first place?