Javascript Styleswitcher Guide
Have you ever stumbled upon a site that has icons or text that change the layout if clicked? Have you ever wanted to put one on your site as well? Here you can find out how. :O
First, you need at least two css files. The css can't be in your leftmenu file or (if you don't have includes) on all your page files. So, to put the css it's own file, copy all the code between the first <style> to the last </style> tag and paste it into a notepad document and name it "whatever.css" And there ya have a css document! Be sure to cut out all that other css in the old document. ;)
Now to the actual styleswitcher part. Copy the text from here and paste it into a new notepad document and name it styleswitcher.js. Then, upload that document to your main directory.
Next, copy the code below and paste it between the <head> and </head> tags of your HTML document.
<link rel="stylesheet" type="text/css" href="default.css">
<ink rel="alternate stylesheet" type="text/css" href="default.css" title="Title1">
<link rel="alternate stylesheet" type="text/css" href="style.css" title="Title2">
<link rel="alternate stylesheet" type="text/css" href="style.css" title="Title3">
<script type="text/javascript" src="styleswitcher.js"></script>
Replace "default.css" with the name of the css document of which you want to be the default layout. Change both "style.css" names to the names of the css documents of your other layouts. Change "Title", "Title2, and "Title3" to the titles of your layouts.
Now, you must add this code wherever you want the links to show up for switching:
<a href="#" onclick="setActiveStyleSheet('style1'); return false;">text to change to style1</a>
<a href="#" onclick="setActiveStyleSheet('style2'); return false;">text to change to style2</a>
<a href="#" onclick="setActiveStyleSheet('style3'); return false;">text to change to style3</a>
Replace the "style1" and "style2" to the titles of your layouts. The "text to change style[1/2]" is where you write the name of the style or whatever for the visitors to click. You may also use images by putting an image code where it says "text to change style[1/2]" instead of text!
There ya have it! Your very own styleswitcher! If you have any problems, contact me with any questions!
