CSS Stylesheets

Most of DokuWiki's presentation can be controlled through CSS stylesheets. DokuWiki defines some very minimal styles itself. The rest of CSS definitions comes from the used template and plugins.

All CSS files are fetched through a single dispatcher in lib/exe/css.php which also handles caching, pattern replacement and optimizing. The loading of the stylesheets amongst other things is done via the tpl_metaheaders() function, so don't forget to have it within your template.

Dokuwiki loads its stylesheets from 4 sources, which are loaded in that order (RTL Stylesheets are added last in each step):

These stylesheets are located within /lib/styles. They define basic styling, like the appearance of error messages and define some useful styles like the .no class which hides a content from displaying.

Plugins may define their own style definitions using the following files:

To fit in well into any template's color scheme , Plugin authors should use the guaranteed color placeholders.

Stylesheets from plugin are loaded even if a plugin is not used (but not if a plugin is disabled).

Styles defined here should take care of conflicts. So please be careful when writing a plugin. If possible add a prefix to your styles so that you're sure they won't conflict.

Template's stylesheets are loaded from the selected template dir. Dokuwiki reads the style.ini located within the directory and loads all CSS that are referenced within that file. The loading is done according to the current mode.

Additionally, pattern replacements are defined in this style.ini file.

• See also: Template Development

Additional styles, independently from the used template can be defined by the wiki administrator by creating the following CSS files in conf/:

This is useful to override small portions of template or plugin styles without running into problems on updating those later.

DokuWiki knows three types of stylesheet modes by default:

1. screen This is the default mode, and used when displaying pages in the web browser
2. print Definitions here will be used for printing pages
3. rtl Definitions in rtl files will be loaded additionally, when a right-to-left language is used.

When you use custom IDs in your template for assigning styles, be sure that the ID does not conflict with an existing ID. In particular, be sure that it won’t conflict with the IDs automatically assigned to section headers. The easiest way to ensure this is to use two adjacent underscores (__) in your ID. Because section IDs are always valid pagenames, they will never contain adjacent underscores.

The style.ini is a ini file. It has two sections :

This part defines which CSS files are loaded. Each line is defined as follow :

cssfile.css = mode

cssfile.css is your file name, and mode is the mode to which it applies.

DokuWiki's CSS dispatcher is able to replace placeholders in the loaded stylesheets which are configured through the [replacements] section in the templates style.ini. This is especially useful for defining a color scheme once and reuse these colors in all files. Adjusting the colors later then is simply a matter of changing the ini file.

The following placeholders are the only ones that are safe to be used by plugins.

From 2006-08-05 on they have been renamed to be more semantically correct. Plugins and templates making use of the pattern replacement which are older than this might not yet have adopted these variables, but are advised to do so.

These additional placeholders are used in the default templates. Other templates might use them as well, but are not necessarily obliged to do so.