This is Templar, a cavalie.ro project meant to connect a great framework → Bootstrap, with a great wiki → Dokuwiki.

In short, Templar is a clean template for Dokuwiki, based on Bootstrap. Take a look at wiki:syntax to see what it's like for all the wiki elements.


  • Clean integration with Bootstrap ( Media Manager as well ).
  • Affix sidebar.
  • Adapts to different screen sizes / mobile devices.
    • TOC position (sidebar / page)
    • Sidebar position / content
    • Easy inclusion of custom content: meta tags / header / footer/ page header/footer.
    • Maintainance with LESS.



Initial requirements: :!:

  • Dokuwiki >= 2012-10-13 “Adora Belle”
  • Either
    • jQuery =1.8.3 under DOKU_INC/lib/scripts/jquery (download from jQuery download page + replace jquery.js and jquery.min.js).
    • or jQuery >=1.9.0 upgraded the same way, but:
      • replace all occurences of .live( with .on( under lib/scripts/behaviour.js
      • or upgrade to > 2012-10-13 “Adora Belle”.
  • Do not use the option 'compress=1' for now untill this compressor problem is fixed.



Meta Tags

Optionally create a file meta.html (in the template's dir) containing your own custom meta tags, that will be included before the end of the <head> section.

Optionally create a custom-content file header.html that will be included just before the breadcrumbs component.

Toolbar (Menu Bar)

If you don't like the .navbar-fixed-top style for the navbar, you can always use .navbar-static-top as an alternative style in main.php. In this case remove the padding for the html body in css/templar.less (compile with LESS) or from the resulting css/screen.css file. Also remove the fix for .navbar-fixed-top in the script.js file.


  • Your logo will be put in the top left corner, expanding lower on to the page if necessary. Place the logo under /images (lib/tpl/templar/images) or upload it as the media file :wiki:logo.png. Of course, with your desired size and transparency. For any placement changes refer to Other CSS Changes.


  • Include your custom menu items in tpl_menu.php. Follow the model there. You can create more
    <li class="dropdown">

    elements for multiple dropdown menus.

  • The sidebar option in the configuration settings should point to a page containing the upper part of the sidebar content.
    • Click Sidebar Page in the sidebar on the left or see the wiki:sidebar page for a simple example.
    • An unordered list of links will be transformed into a stacked menu, like the one on the left. The rest of the page will be included as content.
    • You can still customize this by wrapping the content with a header/footer. Set sidebar_head and sidebar_foot template options in the template's config/local or via Config Manager. Set them for true/false in order to include/not tpl_sidebar_head.php and tpl_sidebar_foot.php, respectively.
  • If sidebar is empty - no sidebar will be shown
  • If sidebar equals 'custom' - the file tpl_sidebar.php will be included instead.
    • The affix properties will be preserved.
  • If you don't like the sidebar to be shown on small devices, edit css/all.css directly (or better css/all.less and LESS-compile) for the needed resolutions.

Table of Contents

The TOC is placed within the page, on the upper-right side. If you want to change this behaviour, you can choose (in the template's config/local.php or in Config Manager) between three options for toc_place:

  • 'sidebar-up' - to include the TOC into the sidebar's upper part.
  • 'sidebar-down' - to include the TOC below the sidebar's upper content, but above the page menu.
  • 'page' - default option.

Of course, this only works with a standard sidebar; if you go with a custom sidebar, select 'sidebar-up' as an option and include the TOC code yourself into tpl_sidebar.php.


Optionally create pageheader.php or pagefooter.php to be included before/after

<div class="page">

wiki page content.

Optionally create footer.html to be included right after the footer's license button.

Other CSS Changes

For any other CSS changes, use the following files, using LESS sintax:

  • less/variables.less - for changes to Bootstrap colours
  • css/templar.less - for general styles (body, toc, links,
  • css/buttons.less - for button styles (also toolbar buttons)
  • css/sidebar.less - for styles related to sidebar
  • css/tabs.less - for tabs (especially Media Manager)

All of them are included into css/screen.less. You will have to LESS-compile css/screen.less to a resulting css/screen.css.

Formatting for different screen sizes / other devices is done in css/all.less, which compiles to css/all.css.

Formatting for print is done in css/print.css.

For deeper (Bootstrap) CSS changes, edit the Bootstrap LESS files under less/, and perform the same compilation on css/screen.less, where there are included.

JS Changes

To include additional JS, edit script.js and add script content, or add DOKUWIKI:include_once before any file you wish to be included, as a commented text. Example of an already included bootstrap js component:

/* DOKUWIKI:include_once js/bootstrap-affix.js */

For your convenience, additional Bootstrap includes are already in the file, so you only need to change KUWIKI to DOKUWIKI for them to be included.

Warning: Be careful with including bootstrap-button.js, seems to conflict with media manager sort buttons.


Bootstrap CSS is compiled together with LESS, a smart extension to CSS that makes it “dynamic”. You can use variables, nest rules, inherit classes and do a lot of geeky stuff with LESS, the most obvious result being much easier stylesheet maintenance.

So, rather than just throwing bootstrap.css into the templates's css/ folder, I used the LESSer approach, keeping the original bootstrap .less files as close to the originals as possible (they can be found in the less/ folder). screen.less puts some of Bootstrap's less/ files together, with a few specific DokuWiki fixes inside templar.less, tabs.less and sidebar.less:

  • adapted DW's TOC into a .nav-list
  • inherited .btn styles for DW buttons
  • inherited .nav .nav-tabs styles for DW tabs
  • other small fixes (link icons, code block size, textarea size, table cell alignment, footnotes pop-ups).

Basically css/screen.less is obtain from less/bootstrap.less, with our .less files included at the end. The resulting css/screen.css, needed by style.ini is obtained by running a LESS compiler on css/screen.less.

Compiling LESS Files

The first option would be to download Bootstrap's development files and use the build instructions that come with it.

Another solution you can use right out of the box is the lessphp compiler, which comes with both a library and a built-in command-line (PHP).

Run something like:

cd lib/tpl/templar/css
plessc screen.less screen.css

from command line and you're done.

Using LESS Directly

If you know what you're doing, there is a solution to integrate LESS capability directly into DokuWiki: Adrian Lang's lessphp patch. As far as I can tell, you get lib/exe/css.php to directly use the LESS syntax directly inside the files included in style.ini, instead of being forced to run the compiler yourself each time you modify the .less files.

Bugs / Enhancements / Troubleshooting

  • For Javascript errors: please refer first to Installation requirements.
  • Known bugs:
    • The menus don't work if jQuery is not the right version / compress is not set to 0 (until the bug is fixed). Same solution, see Installation.
    • Including js/bootstrap-button.js conflicts with Media Manager file sort buttons. Solution: do not include the .js file in Media Manager pages or contribute and replace completely sort buttons with Bootstrap buttons.
  • Still left TODOs:
    • Fix Toolbar Buttons and Media Files window.
  • Contact me for any other bugs/help. Enhancement suggestions would need to really be of benefit to a majority of the users.


Contributions are welcome at https://github.com/bassul/templar.