Skip to content.
TWiki > DragonSkin > DragonSkinCustomize

DragonSkin customization

This topic contains information on how to change user-configurable look-and-feel aspects of Dragonskin. See DragonSkinInstall for installation instructions, and DragonSkin for some general information about the skin.

TWiki variables used by DragonSkin

The following TWikiVariables are specific to DragonSkin and control various look and feel aspects of the skin:

CSS font size for the overall body of the page.
CSS font size for the left menu (relative size values will compound with the body font size).
CSS font size for the edit/attach/etc menubar on the top of each view page (relative size values will compound with the body font size).
CSS font family. Applies to all pages.
Set this variable to "none" to turn off display of the quicklinks menu.
String to use for the quicklinks submenu heading.
HTML unordered list containing the quicklinks menu items.
CSS statements that will get embedded in every view page (meant for adding short bits of style to a specific topic). These CSS statements are only included in view pages, not in edit, preview or oops pages. See the section below on "Recovering from a bad DS_TOPICCSS setting" for reasons why. Surround a topic-specific CSS setting with HTML comments to hide the CSS statements. Set the variable to a blank value on your wiki home page to disable seeing custom css styles.
Lets one chose between various look and feels. Supported themes at this time are "gray" (the default), "monochrome", and "tabstyle".

You can test out settings on one page (such as a Sandbox page) using variables set within that topic.

The colored bands on the top and bottom of each page is set via the standard TWiki WEBBGCOLOR variable. This is usually set on a per-web basis, in order to provide a consistent indication of which web a page is in.

Built-in CSS styles

The following CSS styles are included with Dragonskin as a convenience. Your local administrator may add additional classes:
Text within a div of class ds-draft will be displayed with a tiled background containing light gray images with the word "DRAFT".
Text within a div of class ds-kbd will be displayed in monospaced type w/in an indented light-gray box.
Text within a div of class ds-note will be displayed as a yellow "Post-it" style note on the right-side of the page.

To use these classes, enclose your text in a div of that class. For example:
<div class="ds-note">

-- TWiki:Main/ClaussStrauch - 27 Jul 2004