CoderWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<title>CoderWiki: Theme</title>

<WRAP round box justify>
To return to the Wiki Tech Notes index, [[wikitech|click here.]]
</WRAP>

<WRAP round box justify>
**//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.

<code patch>
First, in "conf/local.php":

$conf['template'] = 'mindthedark';
$conf['tpl']['mindthedark']['theme'] = 'dark';
</code>
</WRAP>

<WRAP round box justify>
<code patch>
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;
</code>
</WRAP>

<WRAP round box justify>
<code patch>
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
</code>

The preceding "sed" command should be executed in the top-level DokuWiki subdirectory; i.e., the directory that contains "doku.php".
</WRAP>

<WRAP round box justify>
**//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.
</WRAP>

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

<code patch>
<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 */
</code>
</WRAP>

<WRAP round box justify>
**//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 32x32 to 512x512, 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:

<code patch>
.wrap_bg_roses {
    background: url(https://somesite.meow/imgsite/bg_roses.png);
    padding: 20px;
}
</code>

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.
</WRAP>

<WRAP round box justify>
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.
</WRAP>

<WRAP round box justify>
**//For admins:// Site logo:**

This DokuWiki displays a 64x64 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"):

<code patch>
convert -background none -scale 64x \
    /somepath/input.svg \
    lib/tpl/mindthedark/images/logo.png
</code>

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.
</WRAP>

<WRAP round box justify>
To return to the Wiki Tech Notes index, [[wikitech|click here.]]
</WRAP>
CoderWiki

User Tools

Site Tools

Page Tools
