How to skin using JavaScript

[note: this is incomplete - some of the javascript / css files need to be reconstituted. Once this is done, this note will be removed. Thank you]

Many of the sites out there are "skinable", meaning you can choose an alternate look, which will be your default as
long as the cookie they set in your browser remains intact. Most of these, such as the one ScriptyGoddess has on her
site require PHP or some other server side scripting language.

Not everyone has access to PHP, so for those of you who do not, we present a purely Javascript solution.

install skins.js on your server. Place the following in your block:

<script LANGUAGE = "JavaScript" SRC="skins.js" type="text/javascript"></script>

make sure you have the correct path to skins.js - you may have to put the full URL. Then place this just after it:

<script language="javascript" type="text/javascript">
<!--
CSSCookieName="michaelTest";
defaultCSS="";
whichCSS();
document.write("<link rel='stylesheet' href='"+whichCSSFile+"' type='text/css' />");
//-->
</script>

(replace "michaelTest" with the name of your blog, for example) then place a block like this in your page, wherever
you want to have the skins changed:

<a href='javascript:jump("");'>0</a> |
<a href='javascript:jump("1");'>1</a> |
<a href='javascript:jump("2");'>2</a> |
<a href='javascript:jump("3");'>3</a>

Place alternate stylesheets in your main blog directory, calling the main one "styles.css", and in this case the
others will be "styles1.css", "styles2.css" and "styles3.css". You can have as many different skins as you like -
just name it "styles" + whatever you place in the quotes in the jump("") call.

When someone clicks one of the links, it will set a cookie in their browser containing the information to select the
appropriate version of your stylesheet. I have implemented a very simple demonstration of this on my site - all it
does is change the background colour for the page, but my wife has just implemented full-featured skinning using
this technique on her site: Waiting for Godel.

And voila, you have skins! If you use this, please leave a comment with a link to your site, or a trackback ping.
This way, if there's a problem, I can let people know. Enjoy!

UPDATE 2003 07 23
Please, do not link directly to skins.js on our server. Right-click the link, and select Save As, and save it to
your computer, then place it on your own website, with the correct links. Thank you.

Also, you should modify the code above like this:

<script language="javascript" type="text/javascript">
<!--
CSSCookieName="michaelTest";
defaultCSS="";
whichCSS();
document.write("<link rel='stylesheet' href='"+whichCSSFile+"' type='text/css' />");
//-->
</script>
<noscript>
<link rel='stylesheet' href='styles.css' type='text/css'>
</noscript>

This change will use your default stylesheet even if the visitor has javascript turned off.

UPDATE 2003 07 29:
It seems not all browsers like to work with the implementation above:

<a href='javascript:jump("");'>0</a> |

will not work in Opera, for example. To get it to work with>everything<, like the implementation on this site does,
try using a clickable image, like this:

<img src="/squidblog/clearsquare.gif" width="10" height="10" alt="default" border="0" onClick='javascript:jump
("");'>

This would give a 10pixel by 10pixel turquoise square like the one in the top right corner of this page, that is
clickable, and would set the skin back to the default value.

You, of course, can use any image you want. Or use a button.

Hope this helps.

Posted by Squiddy at March 7, 2003 07:29 PM | TrackBack