Making a Styleswitcher
Almost every pokémon site has a styleswitcher, including mine! It works like this: you give a link where people can click on and *puff* the layout automatically changes. If you want one for your site you've come to the right place.First you have to create a
styleswitcher.js page with this content (just copy/paste it into your own page) and make sure it's in the same directory because otherwise it won't work. Now, go to the <head> section of your HTML document (if you have SSI put it in there), the page(s) where you want the styleswitcher to work, and write this there (credit to www.alistapart.com/articles/alternate):
<script type="text/javascript" src="styleswitcher.js">
<link rel="stylesheet" type="text/css" href="*.css" title="main style title">
<link rel="alternate stylesheet" type="text/css" href="**.css" title="secondary style title">
Replace * and ** for the name of your styles obviously. So, the <script type="text/javascript" src="styleswitcher.js"> is just to make the styleswitcher work, while the <link rel="stylesheet" type="text/css" href="*.css" title="main style title"> and <link rel="alternate stylesheet" type="text/css" href="**.css" title="secondary style title"> are the styles you can switch to, being the first one the main style (the one you see by default) and the second one an alternate style you can switch to. You can change the links, what matters is that it links to the CSS document that contains the properties of the style so mainstyle.css or bananarepublic.css will do the same, as long as it's the link to the CSS document. To add more styles repeat the second style coding but replace the link and title.
Now, with that, you can go to the View >> Page Style and select the style just by clicking in it's title (which should appear there, if it doesn't you did something wrong), but you want to give your visitors (and yourself) a quick link to the different style so you should write this coding in an accessible place (I have it in the right navigation bar, but you can use what you want... a drop-down menu or whatever):
<a href="#" onclick="setActiveStyleSheet('main style title'); return false;">Style Name</a>
<a href="#" onclick="setActiveStyleSheet('secondary style title'); return false;">Style Name</a>
Now you must make a CSS document untitled *.css with the properties of the main style and a **.css with the CSS properties of the secondary style (replacing the * and ** by its name obviously). And that's it, test it and see if it works, hope the guide's helped you in the making of a styleswitcher and if you have any questions contact me. I'm never too busy to help ;D


