Implemented in development version since 2006-03-17. (bug report)

This page is about how to include CSS for several wiki:plugins in a wiki:template. You might want to use it if one or more of the following things apply to your way of using dokuwiki:

• you have several plugins installed and want to share your customization with other wikis
• you like to change your wiki-template from time to time and the plugins CSS should change according to this
• you are tired of searching for your backup copy of a plugin´s CSS everytime you update the plugin (because it just overwrites your customized CSS file)

According to wiki:devel:css, the CSS dispatcher works the following way:

The following style sheets are loaded in screen mode

1. lib/styles/style.css
2. styles from lib/tpl/<template>/style.ini with mode screen
3. styles from lib/tpl/<template>/style.ini with mode rtl 1)
4. lib/plugins/*/style.css
5. lib/plugins/*/screen.css
6. conf/userstyle.css

These files are loaded in print mode

1. styles from lib/tpl/<template>/style.ini with mode screen
2. lib/plugins/*/print.css
3. conf/userprint.css

By doing this, the plugins style sheets will always overrule you personal ones.

To provide my own style sheet for plugins, I came up with the following idea:

• include [plugin_name].css in your theme
• change CSS dispatcher to act as follows:
  1. load wiki default CSS and default CSS of all plugins
  2. load template CSS including the new plugin CSS

this should overload the original styles

So far so good, a simple idea and anyway, it is more logical to first load the default styles, then the default plugin styles and then the template styles. There are a few changes to make in order to take advantage of this.

Here are the modified functions of the CSS dispatcher. Changes are marked with

// CSS-MOD 

function css_out(){
    global $conf;
    global $lang;
    $print = (bool) $_REQUEST['print'];   //print mode?
 
    // The generated script depends on some dynamic options
    $cache = getCacheName('styles'.$print,'.css');
 
    // load template styles
    $tplstyles = array();
    if(@file_exists(DOKU_TPLINC.'style.ini')){
        $ini = parse_ini_file(DOKU_TPLINC.'style.ini',true);
        foreach($ini['stylesheets'] as $file => $mode){
            $tplstyles[$mode][DOKU_TPLINC.$file] = DOKU_TPL;
        }
    }
 
    // Array of needed files and their web locations, the latter ones
    // are needed to fix relative paths in the stylesheets
    $files   = array();
    if($print){
        // CSS-MOD: moved to be before template styles
        // load plugin styles
        $files = array_merge($files, css_pluginstyles('print'));
 
        $files[DOKU_TPLINC.'print.css'] = DOKU_TPL;
        if (isset($tplstyles['print'])) $files = array_merge($files, $tplstyles['print']);
 
        $files[DOKU_CONF.'userprint.css'] = '';
    }else{
        // CSS-MOD: moved to be before template styles
        // load plugin styles
        $files = array_merge($files, css_pluginstyles('screen'));
 
        $files[DOKU_INC.'lib/styles/style.css'] = DOKU_BASE.'lib/styles/';
        if (isset($tplstyles['screen'])) $files = array_merge($files, $tplstyles['screen']);
        if($lang['direction'] == 'rtl'){
            if (isset($tplstyles['rtl'])) $files = array_merge($files, $tplstyles['rtl']);
        }
 
        $files[DOKU_CONF.'userstyle.css'] = '';
    }
// check cache age
    if(css_cacheok($cache,array_keys($files))){
        readfile($cache);
        return;
    }
 
    // start output buffering and build the stylesheet
    ob_start();
 
    // print the default classes for interwiki links and file downloads
    css_interwiki();
    css_filetypes();
 
    // load files
    foreach($files as $file => $location){
        print css_loadfile($file, $location);
    }
 
    // end output buffering and get contents
    $css = ob_get_contents();
    ob_end_clean();
 
    // apply style replacements
    $css = css_applystyle($css);
 
    // compress whitespace and comments
    if($conf['compress']){
        $css = css_compress($css);
    }
 
    // save cache file
    io_saveFile($cache,$css);
 
    // finally send output
    print $css;
}

Next you have to copy the plugins´ style sheets into the directory of your template and customize them.

To make them used, you have also make them known to the dispatcher. This is done by adding them to the style.ini.

I decided to use names according to the following rule:

[pluginname]_[filename]

e.g.

box_style.css

This way it is possible to have several style sheets per plugins also supporting print styles and/or right-to-left support.

[stylesheets]
layout.css     = screen
design.css     = screen
style.css      = screen
arctic.css     = screen
; plugins
box_style.css  = screen
blog_style.css = screen

rtl.css        = rtl
print.css      = print

This should be all, reload you page, be sure to purge the cache and take a look.

• optimization: use only plugin stylesheets of actually installed plugins

• none (at the moment )