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.
DOKU_INC/lib/scripts/jquery(download from jQuery download page + replace jquery.js and jquery.min.js).
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
Optionally create a custom-content file
header.html that will be included just before the breadcrumbs component.
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
:wiki:logo.png. Of course, with your desired size and transparency. For any placement changes refer to Other CSS Changes.
tpl_menu.php. Follow the model there. You can create more
elements for multiple dropdown menus.
sidebaroption in the configuration settings should point to a page containing the upper part of the sidebar content.
sidebar_foottemplate options in the template's config/local or via Config Manager. Set them for true/false in order to include/not
sidebaris empty - no sidebar will be shown
sidebarequals 'custom' - the file
tpl_sidebar.phpwill be included instead.
css/all.cssdirectly (or better
css/all.lessand LESS-compile) for the needed resolutions.
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
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
pagefooter.php to be included before/after
<div class="page"> ... </div>
wiki page content.
footer.html to be included right after the footer's license button.
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
Formatting for different screen sizes / other devices is done in
css/all.less, which compiles to
Formatting for print is done in
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.
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
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
screen.less puts some of Bootstrap's
less/ files together, with a few specific DokuWiki fixes inside
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
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.
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
Contributions are welcome at https://github.com/bassul/templar.