This shows you the differences between the selected revision and the current version of the page.
| dokuwiki:snippets:plugin_css 2010-08-02 10:40 | dokuwiki:snippets:plugin_css 2010-08-02 17:23 current | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | http://www.popcivics.com/ambien.html ambien online iyazf http://www.lospadresbearaware.net/Tramadol.html beitrag buy name text tramadol xgi http://www.renatocardoso.net/ultram.html taking ultram and lexapro together ndg http://www.modernelectricguitars.com/acomplia.html acomplia type 1 diabetes bpnxv http://www.agamistathemovie.com/tramadol.html buy tramadol us pharmacies :-(( | + | ====== customized Plugin CSS in templates ====== |
| + | |||
| + | :!: Implemented in development version since 2006-03-17. ([[http://bugs.splitbrain.org/?do=details&id=746|bug report]]) :!: | ||
| + | |||
| + | This page is about how to include CSS for several [[doku>wiki:plugins]] in a [[doku>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) | ||
| + | |||
| + | ===== current status ===== | ||
| + | |||
| + | According to [[doku>wiki:devel:css]], the CSS dispatcher works the following way: | ||
| + | |||
| + | The following style sheets are loaded in **screen mode** | ||
| + | |||
| + | - lib/styles/style.css | ||
| + | - styles from lib/tpl/<template>/style.ini with mode ''screen'' | ||
| + | - styles from lib/tpl/<template>/style.ini with mode ''rtl'' ((only loaded when a right-to-left language like Hebrew is configured)) | ||
| + | - lib/plugins/*/style.css | ||
| + | - lib/plugins/*/screen.css | ||
| + | - conf/userstyle.css | ||
| + | |||
| + | These files are loaded in **print mode** | ||
| + | |||
| + | - styles from lib/tpl/<template>/style.ini with mode ''screen'' | ||
| + | - lib/plugins/*/print.css | ||
| + | - conf/userprint.css | ||
| + | |||
| + | By doing this, the plugins style sheets will always overrule you personal ones. | ||
| + | |||
| + | ===== Idea ===== | ||
| + | |||
| + | 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: | ||
| + | - load wiki default CSS and default CSS of all plugins | ||
| + | - 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. | ||
| + | |||
| + | ===== Solution ===== | ||
| + | |||
| + | ==== modified lib/exe/css.php ==== | ||
| + | |||
| + | Here are the modified functions of the CSS dispatcher. Changes are marked with | ||
| + | <code php>// CSS-MOD</code> | ||
| + | |||
| + | <box 99%|function css_out()> | ||
| + | <code php> | ||
| + | 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; | ||
| + | } | ||
| + | </code> | ||
| + | </box> | ||
| + | |||
| + | ==== template style.ini ==== | ||
| + | |||
| + | 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. | ||
| + | |||
| + | <box 99%|style.ini> | ||
| + | <code> | ||
| + | [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 | ||
| + | </code> | ||
| + | </box> | ||
| + | |||
| + | This should be all, reload you page, be sure to purge the cache and take a look. | ||
| + | |||
| + | ===== Todos ===== | ||
| + | |||
| + | * optimization: use only plugin stylesheets of actually installed plugins | ||
| + | |||
| + | ===== Bugs ===== | ||
| + | * none (at the moment ;-)) | ||
| + | |||
| + | ===== Comments ===== | ||
