Home
This is an attempt to create a very simple and lightweight template for Dokuwiki that stays true to the ideas of the original design, but modernizes the code and improve on the usability.
This template was originally designed for my own web site of the same name (ad.hominem.info), which has meanwhile migrated to two other sites, namely Denkfehler Online and FallaciesOnline. These also serve as showcases of all of its features.
For more information, including configuration details, please see the Template page, on the DokuWiki site: https://www.dokuwiki.org/template:ad-hominem
The above image shows how the template looks like, both in light and in dark mode with the default colours.
- Prominent search field with preloading search results.
- Collapsible sidebar and table of contents.
- Link preview: title and first paragraph of the linked page is shown in the title text (yes, this also works for Wikipedia links!)
- Refined print view, with an optional "compact" mode for very neat printouts.
- Tries to implement WCAG 2.1 Level AA (targetting certain AAA features, where easily achievable)
- Neatly formatted and standards-compliant code (where possible – the main page text comes from the DokuWiki renderer and that's out of my control).
- Makes better use of larger screens (target is half of a 4K screen), but because the template is fully responsive, smaller is no problem (down to ca. 360px wide)
- improvements to edit view, media manager, etc.
- Dark mode (controlled by the visitors' system settings)
- Built-in "Cookies"-banner, fully configurable (and can also be disabled, of course)
- Allows to override the homepage link for better integration into sites where DokuWiki only handles a sub-site.
There is a small number of general options added to the Site’s “Configuration Settings” page: You can find them under the heading “Template” (typically the last section in the page).
-
Allow a client-side dark mode (default: “allow”) – this option allows you to completely disable the alternative "dark mode". Only use this when the dark mode would render the site unusable, as a light mode for users who expect to see the site in dark mode can be very distracting.
-
Show current page in hierarchical breadcrumbs (default: “don’t show”) – by default, this template does not repeat the title of the current page in the breadcrumbs (since it is also visible as a headline, just underneath the breadcrumbs). With this option, you can choose to display it as a text label, or as a link (referring to the current page!).
The following three options are for controlling the "Cookies" banner. These are explained below.
- Override the homepage link (default: empty) – this allows to set a different link to be treated as "home". This affects the links on the site logo and title. Setting this also adds a different "home" icon in the "You are here" navigation (i.e. the homepage link will become a "normal" item in the list).
Links can be internal ":about:landing" (note that this has to begin with a colon) or as URL (e.g. "/index_html" or "http://mysite.org/").
This template has its own, built-in "Cookies"-banner. This function is heavily inspired by Michal Koutný's "cookielaw" plugin, but it is much better integrated into the template design, and of course fully configurable.
There are three settings that control the behaviour of this
-
"Display the Cookie message banner": can be either "Don't show", "Show on top of page" and "Show on bottom of page". The first option disables the banner altogether.
-
"The message to display on the Cookie banner": This is a free-text field that allows you to set the text to display. This text is directly copied into a
<p>context in the banner, without escaping. That means you can insert some (inline) HTML for formatting, if needed. -
"Link to the “More information” page": this is either an internal or external address that the "More information" link shall link to. Internal addresses should look like, e.g. ''about:cookies'' (this is also the default), external addresses start with either
http://orhttps://...
Similar to the default template, this template allows for pictures with specific names to be uploaded using the media manager and serve as site icons, etc. These images have to be uploaded either to the root directory, or into the :wiki: namespace.
Site logo: this is the logo that appears in the top-left corner of every page. Note that this template uses a different default size (64×64 pixels) than the standard template. This file can be named “logo.svg” or “logo.png”, depending on the file format (the preferred format is SVG).
Favicon: This is the icon used by the browser, e.g. for bookmarks and/or tabs. This should either be in Windows Icon Format (containing a set of 16, 24 and 48 pixels size icons), PNG, or SVG. The preferred format is Windows Icon, but SVG is of course more flexible. This should be named “favicon.ico”, “favicon.png” or “favicon.svg”.
Apple Touch Icon: Used by iOS devices when the user places a bookmark on the homescreen. This should be a 180×180 pixels PNG file named “apple-touch-icon.png”.
The template looks for HTML files that will be included at specific places in the page. This is useful for repeating sections, configuration options, etc. These files can be located in the /conf/ directory, or directly in the template directory (/lib/tpl/ad-hominem/).
The file “meta.html”, if it exists, will be included at the end of the <head> section. This can be used to add specific metadata to all pages of the site. For example, load additional CSS or JavaScript files, links to your social-media accounts, etc.
An area in the page header, located just below the search field, is reserved for the content of the file “header.html”, if it exists. This is a good place to add site-wide notifications, like warning of technical problems, etc.
There are two hooks for HTML files in the sidebar: one on top (called “sidebarheader.html”), and another at the bottom (“sidebarfooter.html”). These can be used to add navigation items that should repeat on all pages (e.g. a link to the homepage, or to legal mentions).
A repeating section on top of the main page content (above the “youarehere” links) can be added by placing a file called “pageheader.html” in the template directory.
Likewise, at the bottom of the page (after the “Last changed” item). The file to be inserted here has to be called “pagefooter.html”.
There is a footer section reserved for a static HTML file called “footer.html”. If there are bullet lists in this file, they will be displayed as inline lists in mobile view (similar to the other footer sections).
A key feature of this template is an automatic "dark mode". This means that the site will follow the dark mode preferences of the visitor's computer.
While it is possible to disable this feature in the site settings (i.e. to always use light mode, regardless of visitors' preferences), it is recommended to allow this feature for a better integration into the end-user environment. This feature comes "for free" to the site owner, but there are some possible implications that you need to be aware of:
-
not all plugins are fully cocmpatible with this feature. Check your site thoroughly to make sure it works both in dark and in light mode.
-
If possible, create images in a way that they also work with dark backgrounds. Especially if you use transparency, it would be good to test and see how these look like with a much darker background.
It is generally a good idea to try out dark mode with the new template version yourself, to get a feel for the new look and feel, and how some users are going to experience it. Note that the easiest way to activate dark mode is in your computer settings (Settings > Personalisation > Colours in Windows, System Preferences > General on MacOS).
If you are using custom CSS (e.g. in config/userstyle.css), you may have to adapt it to a fit with the alternative style. The same is true for most (all?) extensions that may not be ready for dark mode yet. The easiest way to do so it to add a media query block, e.g. to config/userstyle.css, e.g. looking as follows:
@media (prefers-color-scheme: dark) { … }
Within this block, you can then redefine the colours. Remember that the less variables are all available here. So for example, if you are using the Redirect Plugin, and you would like the redirection notices to appear with a dark background, you could simply add the following line within the media query block:
.noteredirect { background-color: @ini_background_site_dark; }
Another issue are pictures. While most photographs actually look better with a dark background, you may have to watch out for images that use transparency. My own site for example uses a lot of SVG line drawings, which are simply black lines with a transparent background. These don’t work very well with a dark grey background, of course, so I needed a workaround.
In this case, all these illustrations were in an <aside> block, and a simple CSC filter changed all these black lines to light grey, with the following code:
main aside figure img { filter: invert(.67); }
Of course, your mileage with this technique may vary. In any case it is worth exploring the various filtering possibilities to see which may help in your case: CSS Filter on MDN Web Docs.
A lot of work went into making sure that site visitors can print the pages in reasonable quality.
The standard print mode is designed to resemble to page on screen, while modifying certain parts in a way that it is more useful for print.
There are pre-defined classes that can be used (e.g. together with the Wrap plugin) to modify specific sections:
-
noprint= this section will _not _appear in print, only on screen. -
print-only= this section will _not _appear on screen, only on printed pages.
Alternatively, there is an optional compact mode, which can be selected in the template settings. This option can result in visually very pleasing print layouts, but may require some additional work from the editor to make sure it works as expected.
The most distinguishing feature of this mode is the two-column layout, which makes this mode most suitable for text-heavy pages.
In addition, this mode uses a sligntly smaller font size (possible because of the shorter measure used here) and no paragraph spacing, except for headlines. Of course, the appropriate paragraphs use a first-line indent to make reading easier.
The following elements break the two-column layout and thus start a new section:
- headlines of level 1 and 2 (h1 and h2)
-
<figure>blocks (inserted as HTML code) - the class
print-wideapplied to any block-level element (e.g. via Wrap)
This behaviour of the <figure> tag can be overriden by adding the class print-narrow.
Be aware that using the compact print view will add some workload to the editor. If this is worth the result is something that depends on a lot of factors, not least your content, your target group, and the technical abilities of the editor/webmaster.