Creating a skin

The anatomy of a skin

A skin consists of a set of files: CSS file(s), images, XSLT stylesheets, and possibly others which are grouped below one directory. The directory containing the skins is located at:

<DAISY_HOME>/daisywiki/webapp/daisy/resources/skins

On a blank Daisy install, this contains at least one directory, "default", for the default skin. The name of the skin is the name of the directory below the skins directory.

Creation of a dummy skin

Daisy has a fallback mechanism between skins, which means that a new skin can be created based on an existing skin. This makes the initial effort of creating a skin very small.

As an example, suppose you want to create a skin called coolskin. The minimal steps to do this are:

1. Create a directory for the skin:
   

   <DAISY_HOME>/daisywiki/webapp/daisy/resources/skins/coolskin

2. In this newly created directory, put a file called baseskin.txt containing just one line like this:
   

   default

   (this should be the very first line in that file)

   This specifies that the new skin will be based on the default skin. This means that any file which is not available in the coolskin skin, will instead be taken from the default skin. This allows a skin to contain only copies of those files that it wants to change.

3. Modify one or more siteconf.xml files to use the new skin. For the non-site specific pages (login screen, index page, ...) this is:
   

   <DAISY_HOME>/daisywiki/webapp/daisy/sites/siteconf.xml

   Or for a specific site, the siteconf.xml file in the directory of that site.

Basically, you now have created a new skin, allthough it doesn't do any yet. If you hit refresh in your browser, you will still see the same.

Customising the new skin

Now you can start customising the skin by copying files from the default skin and adjusting them. The two most important files, which allow to change most of the global look of the Daisy Wiki, are these:

1. the <skindir>/css/default.css file
2. the <skindir>/xslt/layout.xsl file

If you only want to do smaller changes like changing some colours and fonts, you should get arround by only coping the default.css file to your new skin and adjusting it. (note: to change the logo, you can use the skinconf.xml mechanism)

The layout.xsl file builds the global layout of a page, thus how everything 'around' the main content shoud look. The input format of the XML that goes in the layout.xsl can be found here.