The banner is probably the most visually catch of this template. It is a graphic element that is shown underneath the title bar.
To modify the banner, simply upload a new image file (in SVG, PNG or JPEG format) using the DokuWiki Media Manager and make sure it has the same name as is set in the Banner image setting (“banner” by default).
E.g. if you use the default banner setting, “banner.svg”, “banner.png”, “banner.jpg” or even “banner.jpeg” are all valid filenames for banner images.
Note that banners can be configured per namespace, where child namespaces inherit the banner from their parent, if they don’t have one of their own. Therefore, if you want to modify the banner image for the entire site, you need to upload the banner file to the root directory.
While there are no technical restrictions in the size, format or colours used in the banner images, it is still a good idea to plan and design banner images with the same care and consideration as your site’s logo image.
While some users visit your site on their smartphone, others may have one of these new ultra-wide monitors. The banner will always be centred and repeated horizontally, if it is not wide enough to fill the entire window.
Since it might be difficult to create an image that is wide enough to cover all these situations, the best approach here is to design it in a way that it can be repeated horizontally without an apparent seam.
The default height of the banner can be configured in the Style settings plugin. The setting is named “banner_min_height” and it is set to 48px by default. This is a site-wide setting.
Obviously, your banner image should be at least as high as this setting. It is a good practice to make it larger, to also accommodate content (like the „You are here” navigation, if configured), but not too large, as this increases the time it takes to download the image, which can lead to flicker on slower connections.
Obviously, the colours of the banner image should fit the overall design of your wiki.
If you have enabled the “Dark mode” setting for your wiki, make sure that the colours still work well in this colour mode. It may require a bit of tinkering to get the colours just right for both light and dark mode.
This is a collection of example banner files for download:
Hint: Send your designs to the developers for inclusion here.
