Styleswitcher Guide
All right, we've all seen sites that are capable of changing their appearance at the simple click of a button. That is done by using a styleswitcher. The common function of a styleswitcher is that it switches out the CSS file of a layout. Because the CSS usually contains all the color and graphic attributes of a layout, it seems that the entire layout has changed. There are many different types of styleswitchers, some more complicated than others. I will teach you how to make your own styleswitcher.The Javascript Styleswitcher
The Javascript styleswitcher is probably the most popular (in Pokemon sites anyway) because it is simple and easy to use. It changes the CSS upon click, which is pretty much all you need. The only downside is that when you load a page, it tends to sometimes briefly flash between two styles, and has a tendency of changing back. Even so, it is fairly useful. Here are the directions for the Javascript styleswitcher.1.) Upload a styleswitcher.js file into your website directory where you have your other page files. Click here to download it. If a download doesn't pop up and you only see a bunch of HTML, just copy all the code and paste it into a file - name it styleswitcher.js.
2.) Put the below code into the HEAD of your HTML document. That means this code must be between the <head> and </head>.
Replace DEFAULTSTYLE with the default style, or the style that you will see if the visitor hasn't chosen his or her style yet. It usually would be either STYLE1 or STYLE2. Feel free to rename STYLE1 and STYLE2 into the names of your CSS files (the separate styles). Just be sure that you change it everywhere else. If you have more than two layout styles, just add another line of <link rel="alternate stylesheet" type="text/css" href="STYLE3.css" title="STYLE3TITLE"> after the first two.
3.) Go to the BODY part of your HTML where you want the style links to be. When you click the links, the layout will change. The below codes are just like normal link codes, just a bit more complicated. Please realize that your changes to the names of STYLE1 and STYLE2 need to be the same as what you put for them earlier.
If you wish, you can replace the style links with images, so that your layout will change if you click on a specific image link. Simply replace the "Text to change style" with <img src="IMAGE.gif" border="0">. Other than that, you're done!
The PHP Styleswitcher
Coming soon.
I hope this guide has helped you make your own styleswitcher! ^_^ If you have any problems, feel free to contact me about it here.
Eonlight Valley, all its content and graphics are unless stated otherwise (c) Kronakitty (kronakitty@gmail.com) 2005-2008. Official Pokemon contents and images are (c) Nintendo 1995-2008. This is only a fan site, and I do not claim ownership of Pokemon.
