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