5.11.2 Creating a skin
220.127.116.11 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:
The name of the skin is the name of the directory below the skins directory. On a blank Daisy install, this skins directory will be empty. The default skin can be found in:
18.104.22.168 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:
- Create a directory for the skin:
- In this newly created directory, put a file called baseskin.txt
containing just one line like this:
(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.
Although there is no directory called default in the skins directory, the system will transparently fall back to the skins directory in the Daisy Wiki webapp (mentioned above).
- Modify one or more
Or for a specific site, the siteconf.xml file in the directory of that site.
Basically, you now have created a new skin, although it doesn't do anything yet. If you hit refresh in your browser, you will still see the same.
22.214.171.124 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:
- the <skindir>/css/layout.css file
- the <skindir>/xslt/layout.xsl file
If you only want to do smaller changes like changing some colours and fonts,
you should get around by only copying the docstyle.css file to your new skin and
adjusting it. (note: to change the logo, you can use the
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