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:

DS_BODYFONTSIZE
CSS font size for the overall body of the page.
DS_LEFTMENUFONTSIZE
CSS font size for the left menu (relative size values will compound with the body font size).
DS_EDITBARFONTSIZE
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).
DS_FONTFAMILY
CSS font family. Applies to all pages.
DS_QUICKLINKSDISPLAY
Set this variable to "none" to turn off display of the quicklinks menu.
DS_QUICKLINKSHEADING
String to use for the quicklinks submenu heading.
DS_QUICKLINKS
HTML unordered list containing the quicklinks menu items.
DS_TOPICCSS
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.
DS_THEME
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:
ds-draft
Text within a div of class ds-draft will be displayed with a tiled background containing light gray images with the word "DRAFT".
ds-kbd
Text within a div of class ds-kbd will be displayed in monospaced type w/in an indented light-gray box.
ds-note
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