Daemon Skins: Separating Presentation from Content

Exhuming the script (How I Skinned iBlog)

This sidebar explains, step by step, the JavaScript that I use to apply different CSS files to an HTML file. I have included the script in its entirety at the end of the page should you wish to use or modify it.

The first part of the script came from Porter Glendinning. He used it to strip off a named anchor so that he could jump to that anchor after it was called within a frameset (see his code and explanation for more details). I modified the script to grab the name of a linked stylesheet, and then document.write the link. Adding the name of the stylesheet to the end of the url as a query string allows you to change stylesheets at the click of a mouse. Within certain limitations, of course...

Let's dissect the code:

Put the URL into the string variable parentURL:

 parentURL = ""+document.location;

Check to see if there is a query string (a "?" followed by a string) at the end of the URL (parSharpIndex):

 parSharpIndex = parentURL.indexOf("?");

If there is anything in parSharpIndex, assign it to the variable anchorString:

 if (parSharpIndex >= 0) {
  anchorString = parentURL.substring(parSharpIndex, parentURL.length);

Here's where things get geeky. I set up a regular expression. It looks pretty complicated, but is actually fairly simple, at least in concept. First it looks for a question mark (?), followed by any number of letters (these are remembered because \w* is in parentheses), followed by .css:

 MyRe=/\?(\w*)\.css/g;

Apply the regular expression to the string anchorString, and put the remembered string into an array. Assign the contents of the array to the variable anchor:

   MyArray = MyRe.exec(anchorString);
  anchor = RegExp.$1;
    }

If there is no query string in the URL, assign the string 'classic' to anchor. This is the default stylesheet for the blog:

     else {
     anchor = 'classic';
     }

Use document.write to write the linked stylesheet (anchor), and you are done:

document.write('<link rel="stylesheet" href="' + anchor + '.css"
type="text\/css">');

Applying the Code

So, what does it look like in action? I've created three different stylesheets: classic.css is essentially the original stylesheet for iBook, iMac, iBlog. The next one I created was an exorcism in something completely opposite interms of readability, and style - it's called skate.css. The last one uses an image of a microphone as a background and is called mic.css.

Currently, due to the way the regular expression is set up, the CSS file must be located in the same directory as the HTML file in order for the script to apply it to the blog. It would be fairly trivial to modify the regular expression to accept fully qualified URLs, allowing anyone to create a stylesheet, put it anywhere on the web, and then link to it by adding "?http://www.example.com/xyz.css" to the end of the URL. Also, the skin will only apply to a single page. To be more ubiquitous would require setting cookies or using server side solutions. Feel free to take the script and use it or modify it as you see fit.

The Script

<script language="JavaScript" type="text/javascript">
<!--
parentURL = ""+document.location;
parSharpIndex = parentURL.indexOf("?");
if (parSharpIndex >= 0) {
  anchorString = parentURL.substring(parSharpIndex, parentURL.length);

MyRe=/\?(\w*)\.css/g;
MyArray = MyRe.exec(anchorString);
anchor = RegExp.$1;
}
else {
 anchor = 'classic';
 }
document.write('<link rel="stylesheet" href="' + anchor + '.css"
type="text\/css">');

// -->
</script>