It's better when it's simple

User Tools

Site Tools


Template Styler

:!: This has now been implemented as the Styling plugin and integrated into the core since Detritus.

Most DokuWiki templates contain a style.ini file which lets you customise various aspects of each template (main colours, layout width, font sizes, etc). There is currently no user-friendly way to do that as you would need to update that file manually on the file system level.

It would be great to create a “template styler” plugin which gives you a GUI to edit those style.ini files in the admin section.

Suggested tasks

1. Create a minimal admin plugin (Must)

The admin (and maybe helper) plugin would provide a minimal GUI:

  • Add admin plugin to core, plugin on its own is not advisable due to necessary changes in lib/exe/css.php
  • Loop through all style.ini entries and provide simple text input fields for each
  • Posting the form would save every changed field in conf/tpl/<tpl>/style.ini
  • Syntax errors need to be prohibited
  • If a [stylesheets] section already exists in the local style.ini, just keep it in the file (see other task below)
  • Reset option would simply delete that file (Should)

The style.ini functions are currently all in lib/exe/css.php. The only way to use them without touching the core would be with a little hack:


It would be advisable to move certain functions out of css.php instead, e.g. to a new inc/cssutils.php. The function to write to ini files should also live there. (Should)

2. Add preview functionality (Should)

It would be very beneficial to see a preview of the effect the form entries would have on the template. There are several ways to do this.

Andi's suggestion makes the most sense:

Basically all you need is a way to give the css.php an array of placeholder overrides which will be used instead of the style.ini. Or alternatively give it an alternative style.ini to use (the t parameter basically already does that but looks in the templates only).
Once you have that you can use javascript to replace the currently used call to css.php with your own call and the browser will reload/reapply the styles. Alternatively load the wiki in a preview iframe and do the same there, so you can preview the changes in the real wiki without accidentally messing up your admin view.

There are a few basic things which should be contained in the preview (either via iframe or some predefined set of elements or otherwise), the minimum should at least include basic typography.

3. Make it easier for users to change values (Could)

There are several things which would make it easier for users to change values. Here are some examples:

  • A colour picker would help changing colour values (would need a way to tell colour values apart from others)
  • Adding comments to each field could help understand what will get affected
  • Non-syntax errors could be shown (e.g. when changing a pixel value to a colour value or when changing the site width to something too small or when changing to colour combination which would create inaccessible text, etc)

4. Add functionality to add and edit stylesheets (Could)

The [stylesheets] section in each style.ini could be made editable as well. You could add the possibility to add or remove or rename stylesheets.

As that is pointless without the ability to **edit* the CSS as well, this functionality should be included. Optionally, the possibility to edit any styles or at least user styles would make sense. Although that could be a separate plugin, it should integrate with this templatestyler plugin.


If we edit some styles through a program interface, then it might be inconvenient to deal with manually edited files like userstyle.css or userstyle.<theme>.css, because that might need full-fledged parser. While for style files edited only through UI we could just use some hard-coded format, without variations. So probably if I want to create a multi-skinned template, I would just use stylesheet files of a proper format and list/remove them in the [stylesheets] section. — Constant Illumination 2015-04-04 20:12

Template editing on-screen

In order to edit template and see how it would change, we might do this:

  • Plugin adds an element to a page (like loadskin does) to open style editing. So a user could edit template styles from any DokuWiki page.
  • See picture: This element (#1) would toggle an ovelapping div (#2) over the page. So a user could use control elements to edit styles, not interfering with a page content.
  • Clicking “save” there we can send an action request through AJAX, like
        type: 'POST',
        url: '?do=style',
        data: action,
  • Plugin would take data from this request, for example like ?do=style&background_site=#F3F1E5 and process, updating conf/tpl/<…>/style.ini etc.
  • Javascript rebuilds the page styles according to received data.

What do you think? — Constant Illumination 2015-04-06 03:54

devel/ideas/templatestyler.txt · Last modified: 2015-08-11 12:00 by ach

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki