Download and install the plugin using the Plugin Manager using the following URL. Refer to Plugins on how to install plugins manually.

• usercss.zip

In addition two event hooks have to be inserted into lib/exe/css.php. The first change is in the function css_out() in order to append the data to the output:

    // load files
    foreach($files as $file => $location){
        print css_loadfile($file, $location);
    }
 
    //>>>>>>>> get special CSS data from plugins
    $user_css = '';
    print "/* special action plugin supplied definitions */\n";
    trigger_event('TPL_CSS_OUTPUT', $user_css);
    print $user_css;
    //<<<<<<<<
 
    // end output buffering and get contents
    $css = ob_get_contents();
    ob_end_clean();

The second change is in css_cacheok() and allows to add the wiki page to the cache checks.

    // some additional files to check
    $files[] = DOKU_CONF.'dokuwiki.php';
    $files[] = DOKU_CONF.'local.php';
    $files[] = $tplinc.'style.ini';
    $files[] = __FILE__;
    //>>>>>> ask for further files to check
    trigger_event('TPL_CSS_CACHEOK', $files);
    //<<<<<<
 
    // now walk the files

The plugin reads all CSS definitions contained in <code css></code> blocks from the wiki page :usercss and inserts them into the CSS output. This allows normal users to work on the websites design. This is especially interesting in combination with user-defined style classes like provided by the class plugin. After editing it is necessary to use the reload button of the browser. Otherwise the browser wouldn't reload the CSS files.

Replacement of placeholder values from the template's style.ini is performed as usual. To ease their use, a special syntax {{tplcssinfo>[templatename]}} is provided. It shows the current contents of the template's style.ini file.

References in url() values are interpreted as media links and are corrected accordingly.

All work is performed by the action plugin. The syntax plugin merely provides {{tplcssinfo>*}}.

<?php
/**
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Randolf Rotta <rrotta@informatik.tu-cottbus.de>
 */
 
// must be run within Dokuwiki
if (!defined('DOKU_INC')) die();
 
if (!defined('DOKU_LF')) define('DOKU_LF', "\n");
if (!defined('DOKU_TAB')) define('DOKU_TAB', "\t");
if (!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
 
require_once(DOKU_PLUGIN.'action.php');
 
class action_plugin_usercss extends DokuWiki_Action_Plugin{
  var $pagename = ':usercss';
 
  function getInfo(){
    return array(
      'author' => 'Randolf Rotta',
      'email'  => 'rrotta@informatik.tu-cottbus.de',
      'date'   => '2009-04-05',
      'name'   => 'user-editable CSS',
      'desc'   => 'Uses CSS definitions from a wiki page',
      'url'    => 'http://www.dokuwiki.org/plugin:usercss',
    );
  }
 
  function register(&$contr){
    $contr->register_hook(
      'TPL_CSS_OUTPUT',
      'BEFORE',
      $this,
      'add_css',
      array()
    );
    $contr->register_hook(
      'TPL_CSS_CACHEOK',
      'BEFORE',
      $this,
      'add_cached_files',
      array()
    );
  }
 
  function add_css(&$event, $param) {
    // get content from wiki page
    $txt = io_readWikiPage(wikiFN($this->pagename), $this->pagename);
 
    // filter for CSS definitions in <code css> blocks
    preg_match_all('/<code css>(.*?)<\/code>/sm', $txt, $matches);
    $usercss = implode("\n", $matches[1]);
 
    // fix url() locations
    $usercss = preg_replace_callback(
	     '#(url\([ \'"]*)([^\'"]*)#',
	     create_function('$matches',
			     'global $ID; $m = $matches[2];
                              resolve_mediaid(getNS($ID), $m, $exists);
                              return $matches[1].ml($m);'),
	     $usercss);
 
    // append all
    $event->data .= $usercss;
  }
 
  function add_cached_files(&$event, $param) {
    $event->data[] = wikiFN($this->pagename);
  }
 
}
 
//Setup VIM: ex: et ts=4 enc=utf-8 :

<?php
/**
 * insert information about a template configuration (style.ini)
 *
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Randolf Rotta <rrotta@informatik.tu-cottbus.de>
 */
 
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
 
class syntax_plugin_usercss extends DokuWiki_Syntax_Plugin {
    /**
     * return some info
     */
    function getInfo(){
        return array(
            'author' => 'Randolf Rotta',
            'email'  => 'RRotta@Informatik.TU-Cottbus.DE',
            'date'   => '2009-04-05',
            'name'   => 'output template information',
            'desc'   => 'insert information about a template (style.ini)',
            'url'    => 'http://www.dokuwiki.org/plugin:usercss',
        );
    }
 
    // where we might be placed
    function getType() {
      return 'substition'; 
    }
 
    // divs can contain paragraphs and divs
    function getPType() {
      return 'block'; 
    }
 
    // what we may contain
    function getAllowedTypes() {
      return array();
    }
 
    function getSort(){
      return 303;
    }
 
    function connectTo($mode) {
      $this->Lexer->addSpecialPattern('{{tplcssinfo>.+?}}',
				      $mode, 'plugin_usercss');
    }
 
    function handle($match, $state, $pos, &$handler) {
      // break the pattern up into its constituent parts 
      $match = substr($match, 2, -2); // strip markup
      list($include, $tplname) = explode('>', $match, 2); 
      if (!preg_match('/^[\w\d_]+$/', $tplname)) $tplname="default";
      return array($include, $tplname); 
    }      
 
    function render($mode, &$renderer, $data) {
      if($mode == 'xhtml'){
	list($inc,$tplname) = $data;
	$file = DOKU_INC.'lib/tpl/'.$tplname.'/style.ini';
	$renderer->code(io_readFile($file), 'ini');
	return true;
      }
      return false;
    }
 
}
 
//Setup VIM: ex: et ts=4 enc=utf-8 :

Can someone give an example of how this works? I followed the instructions as closely as I could and it seems to do nothing.

1. Installed the plugin via plugin manager.
2. Created a page called usercss and put this in it:

   <code css>
   div.dokuwiki h1 {
   	border-bottom: 25px solid #eddcad;
   	font-size: 170%;
   }

3. Reloaded a page that uses the h1 tag expecting to see a big 25 pixel bottom border, but there was no change to the h1 tag.

Please look at download_and_installation. There you can see that you have to change two more things. — Moni 2012/10/23 16:38