Welcome!

What are Webskins?

Webskins are a small Javascript tool that I developed to enable "skinnable" web-sites. Developers can use this to make available different stylesheets for users to choose from, and users can include their own stylesheets as well.

Why use Webskins?

Easy to install! Only a few lines to include.
Easy to use! Simple drop-down functionality.
Absolutely Free -- licensed GPL (GNU Public License)

What’s New and Changed

June 20, 2006: Webskins v1.0 is almost ready to be released. This page should be updated in a day or so, so please check back!

Installation

Step 1

Add the following text into the <HEAD> section of your HTML:

001 <head>
002   <meta id="skins.skinset"
003         description="file1.css|descr,file2.css|descr"/>
004   <link rel="stylesheet" href="webskins.css"/>
005   <script language="javascript" src="skins.js"></script>
006 </head>

Step 2

Configure the skinset. To do this, change the 'skins.skinset' meta tag (line 002 and 003 above) so that they contain your stylesheets (and descriptions). For example, on this page, I have:

The description is optional (you can just have 'color-scheme.css,color-scheme2.css'). It should be obvious, but use your own .css files! This is just an example.

Step 3 (optional)

Customize the skinset. There are a number of parameters that you can pass in in the HTML meta tag "skins.properties". These parameters should resemble a GET request (name1=value1&name2=value&...). The available parameters are:

style: can be 'mini' or 'standard' (default: mini)
logo_image: should be a URL to the image used in the mini style
cookie_expiration_days: the number of days till the custom cookie expires (default: 180)