Style Skinner!

Kyer asked about setting up a stylesheet switcher, so here it is below the fold...

I don't remember from where the code was gleaned so I don't know whom to credit... Rob did some adjustments to make it work better, a hearty thank-you to him... one caveat - it only works right for 9 or less stylesheets.

First, MAKE BACKUP COPIES OF YOUR MAIN INDEX TEMPLATE FILE!

Next, insert this line into your Main Idex template in the Head section. This names the javascript file that will control the stylesheet selections and passes information to the cookie script.

<script type="text/javascript" src="/styles/switcher.js">

Next, insert this line under the previous line in the Head section. This will set a cookie with a one year expiration on your reader's computer.

<script type="text/javascript">
function chooseStyle (newstyle)
{
var expdate = new Date();
expdate.setTime(expdate.getTime() + (1000*3600*24*365));
document.cookie = 'style=' + newstyle + '; expires=' + expdate.toGMTString() + '; path=/';
self.location = self.location;
}
</script>

Next, is the switcher.js file to upload the the /styles folder (that you'll need to create) on your site. This is the javascript file that will control the stylesheet selections and passes information to the cookie script.

/* ==JavaScript File== */
/*alert (document.cookie.indexOf('sitestyle='));*/
if(document.cookie.indexOf('style=1')>=0)

document.write('<link rel="stylesheet" type="text/css" href="/styles/styles-site.css">\n');
else if (document.cookie.indexOf('style=2')>=0)
document.write('<link rel="stylesheet" type="text/css" href="/styles/Stylesheet2.css">\n');
else if (document.cookie.indexOf('style=3')>=0)
document.write('<link rel="stylesheet" type="text/css" href="/styles/Stylesheet3.css">\n');
else if (document.cookie.indexOf('style=4')>=0)
document.write('<link rel="stylesheet" type="text/css" href="/styles/Stylesheet4.css">\n');
else if (document.cookie.indexOf('style=5')>=0)
document.write('<link rel="stylesheet" type="text/css" href="/styles/Stylesheet5.css">\n');
else if (document.cookie.indexOf('style=6')>=0)
document.write('<link rel="stylesheet" type="text/css" href="/styles/Stylesheet6.css">\n');
else if (document.cookie.indexOf('style=7')>=0)
document.write('<link rel="stylesheet" type="text/css" href="/styles/Stylesheet7.css">\n');
else if (document.cookie.indexOf('style=8')>=0)
document.write('<link rel="stylesheet" type="text/css" href="/styles/Stylesheet8.css">\n');
else if (document.cookie.indexOf('style=9')>=0)
document.write('<link rel="stylesheet" type="text/css" href="/styles/Stylesheet9.css">\n');

else document.write('<link rel="stylesheet" type="text/css" href="/styles-site.css">\n');

Next, is the code to insert into your sidebar - this will display a drop down box so your reader can select his favorite stylesheet.

<div class="sidetitle">
Skin the Site
</div>
<div class="side">
<form>
<select name="set" onchange="chooseStyle(this.value)" id="switcher">
<option>Choose a Style</option>
<option value="1">Default Stylesheet</option>
<option value="2">Stylesheet2 Name</option>
<option value="3">Stylesheet3 Name</option>
<option value="4">Stylesheet4 Name</option>
<option value="5">Stylesheet5 Name</option>
<option value="6">Stylesheet6 Name</option>
<option value="7">Stylesheet7 Name</option>
<option value="8">Stylesheet8 Name</option>
<option value="9">Stylesheet9 Name</option>
</select>
</form>
</div>

Next, upload all Stylesheet#.css files to the /styles folder.

[SAVE] & [REBUILD] indexes only.

Posted by Madfish Willie at December 31, 2005 05:18 PM | TrackBack