CoderWiki: Theme [Overcomers]

User Tools

Site Tools


CoderWiki: Theme

To return to the Wiki Tech Notes index, click here.

For admins: Theme settings and/or patches:

This DokuWiki uses a theme derived from “Mind The Dark”. Important: Not the theme itself, but a modified version.

Three sets of changes were made, and should be made again if the “Mind The Dark” component is updated.

First, in "conf/local.php":
$conf['template'] = 'mindthedark';
$conf['tpl']['mindthedark']['theme'] = 'dark';
Second, in "lib/tpl/mindthedark/css/_autocolor.less":
-    opacity: var(--opacity, 1);
-    transition: var(--transition, none);
+    opacity: 1;
+    transition: opacity ease-in-out 0.25s;
Third, and finally:
sed -e 's@^\(__background_color_dark__\).*=.*@\1 = "#081060"@' \
    -e 's@^\(__background_site_color_dark__\).*=.*@\1 = "#081060"@' \
    -e 's@^\(__link__\).*=.*@\1 = "#290bf2"@' \
    -i lib/tpl/mindthedark/style.ini

The preceding “sed” command should be executed in the top-level DokuWiki subdirectory; i.e., the directory that contains “doku.php”.

For authors: Page background images:

By default, CoderWiki displays white boxes of text floating on a dark blue background. This may be satisfactory for many purposes.

However, as an alternative, the content area for a given page may be given a background image. If this is done, the page will consist of a dark blue border containing wiki links and information, the content area with a background image, and white blocks floating on the image.

Each page may have a different background image or no such image as authors prefer.

The site admins decide what background images are supported. To select one for a given page, an author uses code like this:

<title>The title line goes here</title>
/* The first WRAP below specifies  one of  the */
/* supported background images without a file- */
/* name extension.                             */
<WRAP bg_hack9>
/* page content WRAPs go here */
</WRAP> /* close the background-image WRAP */

For admins: Page background images:

Page background images are both easy and difficult to set up. The easy part is that, to support one, you just need to do this:

1) Select a small PNG or JPEG file, dimensions typically from 32×32 to 512×512, usually square, that you'd like to support. Important: This must be a “tiling” image.

2) Give the file a filename similar to “bg_roses.png” or “bg_roses.jpg”. I.e.: “bg_” plus a string plus “.png” or “.jpg”.

The string may contain letters, digits, or underscores, but no spaces or dashes. If possible, the letters should all be lower-case.

3) Store the file in a web directory where the file can be accessed directly using an absolute “https” URL.

4) Edit “conf/userstyles.css” and add a definition similar to the following:

.wrap_bg_roses {
    background: url(https://somesite.meow/imgsite/bg_roses.png);
    padding: 20px;

The definition should start with “.wrap_” followed by the image-file name without path or filename extension. The URL should go to the new image file.

5) Authors must clear browser cache. Subsequently, they'll be able to use the new background image as explained before.

The difficult part of adding new background images is selecting images that will work visually. Three rules are suggested:

6) The images can't be too light or they'll conflict with the white text boxes used.

7) If they're too dark, they may look odd next to the dark blue border that's used.

8) They shouldn't be too “busy”. A field of flowers, for example, isn't recommended.

For admins: Site logo:

This DokuWiki displays a 64×64 logo in the upper-left corner of each content page. To install a new logo starting with an SVG input file, execute a command similar to the following in the top-level DokuWiki directory (i.e., the directory that contains “doku.php”):

convert -background none -scale 64x \
    /somepath/input.svg \

1) Most other input image formats should work as well.
2) Ideally, the input images used should be square.
3) “convert” is part of the ImageMagick toolset.
4) This procedure assumes that the “Mind The Dark” theme is installed and active.

To return to the Wiki Tech Notes index, click here.

wikitech_theme.txt · Last modified: 2020/10/15 05:55 by poikilos