DragonSkin installation

This topic describes how to install DragonSkin and perform some simple administrator-level (i.e. requiring the editing of template and CSS files) customizations. See the DragonSkinCustomize topic for information on doing user-configurable customizations, such as configuring the left quicklinks submenu, and the DragonSkin topic for some general information about the skin.

Basic install

1. Unzip dragonskin.zip into your twiki installation directory.
2. Set these variables to activate the skin:
   • Set SKIN = dragon
   • Set DS_THEME = gray (or select another theme such as "monochrome" or "tabstyle").
3. In your templates directory, edit the file dragonmenu.dragon.tmpl to configure the left menu (see below if you wish to read this menu from a topic). When editing this file, keep the basic div and class structure. H2 tags are used for menu headings; HTML unordered lists are used for menus.
4. Set the contents of the DS_QUICKLINKS submenu. Instructions on how to do so (or hide this submenu entirely) are in DragonSkinCustomize.
5. Do any other customizations (fonts, etc) as per DragonSkinCustomize.
6. (Optional) If you are still using the default TWiki robot logo, the skin will look much better if you change it to something else, such as twikiRobot121x54.gif from TWiki:Codev.TWikiLogosDropInReplacementsWhite.
7. (Optional) Replace the default TWiki site map with DragonSkinSiteMap.

Browser issues

DragonSkin has been tested on IE6, Firefox, IE5.2/Mac, and fairly recent versions of Firefox, Mozilla, Opera, Safari, Camino, and Netscape, and appears to work on those browsers (Firefox and IE6 have been used the most). It has not been tested at all on IE5/Win, and may have display problems with that browser. Netscape 4.x should see the skin without any CSS formatting.

Customizing the installation

Note: When creating DragonSkin-related CSS classes or TWiki variables, use a prefix of ds- for CSS classes (e.g. ds-myclass) and DS_ for TWiki variables (e.g. DS_MYVARIABLE). This will help prevent namespace confusion.

Including the left menu from a topic

1. Create a topic with the menu contents. When doing so, be careful about including blank lines in the menu, since the TWiki renderer will insert paragraph tags and mess up the layout. Also, use %INCLUDINGWEB% when necessary to make sure that searches and links to topics like WebPreferences will reference the right web. Note that including the menu from a topic will be slightly slower than using it directly from the template file.
2. Change the templates/dragonmenu.dragon.css file to just have the single line %INCLUDE{"TWiki.DragonMenuTopic"}% (or whatever your menu topic is called).

Adding site-specific CSS styles

If you want to add a site-specific CSS style, add it to pub/%TWIKIWEB%/DragonSkin/typography.css, since that file is included in every theme. Alternatively, add another import rule to the definition of dragoncss in templates/twiki.dragon.tmpl that imports a site-specific css file, and put all local styles in that file. If your style makes use of TWiki variables, add it to templates/dragoncssvars.dragon.tmpl, so variables will get expanded.

-- TWiki:Main.ClaussStrauch - 27 Jul 2004
to top