An experimental and highly customizable DokuWiki template based on flexbox with many namespace related features.

It is based on Dokuwiki's default template.

See template.info.txt for template details
See LICENSE for license info

• Normalize - 8.0.1
• Auth0 / kbd (note that you need to enable HTML or use Keyboard plugin)
• Web Font Loader - 1.6.28 to nicely load fonts from Google Web Fonts, distributed under Apache License 2.0
• Advanced News Ticker - 1.0.11, distributed under GNU General Public License v2.0
• JDENTICON - 2.2.0 to add modern and highly recognizable identicons, distributed under zlib License
• Context logo Lighbox effect uses Lity - 2.4.0, distributed under MIT License
• ToC scrollspy effect is provided by Gumshoe - 5.1.2, distributed under MIT License

• Debug background pattern comes from TartanMaker
• SVG glyphs come from Material Design Icons
• Dummy avatar is free for non commercial use
• Extracting color from image comes from a comment on this page
• Font used for sample UI images (banner, widebanner and sidebar.png) is: Reckoner by Alex Dale.
• Special thanks to Giuseppe Di Terlizzi, author of Bootstrap3 DokuWiki template who nicely acepted that I copy some of his code to build admin dropdown menu.

See Settings and About sections below for details about these features.

• Widgets areas to customize Namespaced elements (any side widget will force side panel even if there's no sidebar page available)
• Accessibility-friendly pure CSS smooth scrolling (speed depends on visitor's browser settings and can even be disable if browser supports that feature)
• Google Fonts : each of main text, headings, condensed text (mostly nav bar) and monospaced text (code syntax) can use a different Google font (be warned that main text font should be kept very readable)
• Namespace dependent UI images ([x] cover, [x] banner, [x] widebanner and [x] background pattern)
• Namespace dependent CSS for [x] colors and [ ] fonts
• Most used colors on media details page (usefull to choose colors for namespace CSS)
• Wide banner slider with latest changes at wiki home?
• Tested with most common plugins (Blockquote, Captcha, Discussion, Move, SearchIndex, SiteMapNavi, Styling, Tag, TagAlerts, Translation, Wrap)
• Dark color scheme guidelines
• Topbar with date, newsticker (based on current namespace and sub content) and links
• Easy to customize glyphs(*) (from Material Design Icons like other DW's SVG glyphs or IcoMoon for social links)
• Sidebar and ToC can be moved out of page content on wide screen (only works in box layout)
• Extracted ToC can be given scrollspy superpowers
• Collapsible ToC (only showing first level untill hover)
• Retractable sidebar
• Stickable main navigation bar, pageheader, sidebar and docinfo
• Dynamic navigation button(s): wikihome, parent NS start, current NS home or "back to article" (can be combined as a single button or not)
• High number of HTML hooks (based on this document)
• A few HTML replace hooks that let you replace some elements with more fancy HTML code
• Siblings pages list inside main navigation bar
• Sub namespaces list inside main navigation bar or below content, depending on context and settings
• Social networks links (see Social links below)
• Supports a cheatsheet that will be shown as a sidebar in edit and preview modes
• Added a "Go to bottom" pagetool to easily reach footer widgets or save settings button (jQuery is needed to switch between this pagetool and "Back to top")
• Added contextual tools "facing" page tools (navigation, playground, syntax page, most usefull forms' buttons)
• docInfo can be combined in page header or shown as a standalone block below page
• Many settings to select color scheme used for page header, toc, side pane and footer
• Expanded debug mode to force some UI elements regardless of settings: add &debug=1 to URL to show all debug elements at once or &debug=keyword to show a specific element from following list of keywords
  • a11y (visual accessibility helpers)
  • alerts
  • banner
  • cover
  • images (all UI images)
  • includes (HTML include hooks)
  • mediaq (add background color and text to mark CSS media queries)
  • pattern
  • replace (HTML replace hooks)
  • social (load a dummy social networks list)
  • widebanner
• Force "Right to Left" or "Left to Right" mode by adding &dir=rtl or &dir=ltr to URL to show one ore the other (mostly no use outside of development)

(*) to replace a glyph by another, simply put desired SVG file (4kb max) in conf/glyphs folder (you will most likely need to create it) and name it after the target social network or after one of the following elements : account-edit.svg, acl.svg, botton.svg, config.svg, editor.svg, extedit.svg, extentions.svg, github.svg, home.svg, info.svg, lastmod.svg, locked.svg, nshome.svg, pagepath.svg, pagerefresh.svg, parentns.svg, playground.svg, popularity.svg, preview.svg, recycle.svg, reset.svg, revert.svg, save.svg, search.svg, searchindex.svg, searchstats.svg, styling.svg, syntax.svg, translation.svg, upgrade.svg, usermanager.svg (collapse, ellipsis, expand, menu-down and menu-right are too specific and cannot be customized). Site, user and page tools glyphs can't be customized as they come from DokuWiki core code.

⚠️ POSSIBLE SVG NAMES LIST ABOVE NEEDS TO BE UPDATED ⚠️

• glyphs (enabled) : use glyph or text only actions (sitetools, usertools and some breadcrumbs)

To customize colors within a given namespace (and sub-namespaces), simply copy tpl/namespaced/theme.ini to conf/tpl/namespaced/ folder. For example, to customize theme for fr:dokuwiki namespace, copy the file to conf/tpl/namespaced/fr/dokuwiki/theme.ini.

If you keep LESS formulas based on theme color with mix and darken, changing theme color value should be a good start and enough in most cases (see https://www.hongkiat.com/blog/less-color-functions/ and https://codepen.io/ryanmargheriti/pen/DpBdXe for more LESS superpowers. Note that for wiki consistency, values for guaranteed dokuwiki color placeholders and wiki links should only be changed if they conflict with theme color.

A few Namespaced UI images can be set for the whole wiki (if placed in wiki namespace) or just for the namespace they're placed in (and propagated to sub namespaces). Here are those UI images that can all be either jpg, gif or png files (sizes given are not mandatory but using larger images can give unpredictible results) :

• cover (230*300px): used in cover sidebar widget or sub-namespaces index
• banner (600*90px): shown abov site tools or sub-namespaces index
• widebanner (1200*250px, in facts any width is fine but not bigger height): shown just below site main navigation bar
• pattern (no limit but the smaller the better to save bandwidth): website background only loaded and shown with box layout

It is possible to change default set of widgets and order them as you like for any of the three widgets areas.

The three widgets areas are :

• topbar "right" section (will by default be configured to show links set through "topbar" wiki pages and will however fit only small content widgets like search or social links)
• sidepanel wich takes place of DokuWiki's regular sidebar and is by default configured to show cover (a namespace dependent image), searchbox and reagular sidebar
• footer widgets area that holds a user login/profile, an "about Namespaced", a license and finally a potential QRcode widgets

To change default widgets to your liking, simply copy any of the dokuwiki/lib/tpl/namespaced/<topbar/side/footer>.widgets.local.conf file(s) to dokuwiki/conf folder and adapt it/them to your needs to include your own set of widgets and order them as you like (sidebar should obviously never be removed).

💡 A widget can be any page from wiki: or current namespace (and it's parents) or any HTML file you created in dokuwiki/lib/tpl/namespaced folder, see configuration files for instructions.

Here's a list of all bundled widgets available :

• about Namespaced (namespaced.html)
• cover
• search (serach.html, if not configured anywhere, a search form will be added to main navigation bar)
• sidebar (sidebar)
• links (will fit in topbar if the list of links is limited)
• user login/profile
• license
• social media links
• QRCode to current page that shows up when printing page (requires QRCode2 plugin)

You can add your own widgets based on html files or on wiki pages (from current namespace and parents or from wiki: namespace).

Widgets based on HTML files work just like [HTML hooks](https://github.com/geekitude/dokuwiki-template-colormag#include-hooks and you can get started with dokuwiki/lib/tpl/colormag/debug/samplewidget.html file as an example).

The main advantage of widgets over classic sidebar is that Dokuwiki's cache is not involved (you don't need to remember to add ~~NOCACHE~~. The second advantage is that splitting content between sidebar and widgets can make things aesthically less bulky.

The drawback of widgets against sidebar is that they do not depend on current namespace (except if based on Dokuwiki syntax that .

📝 Widgets' file names must not contain any space.

If you want to change a widget title, you will have to create a txt file in dokuwiki/conf/template_lang/namespaced/<language_ISO> named after the widget title to customize and containing the desired translation.

As an exemple, here is the line added to dokuwiki/conf/side.widgets.local.conf to add "My Widget" : my_widget.html My Widget The file used to localize the title in french is dokuwiki/conf/template_lang/namespaced/fr/My Widget.txt and here is it's content : Mon widget

Namespaced can be customized using HTML files that will be displayed at one of the many available include or replace hooks. Include hooks add some content while replace hooks take place of standard content. To get started, copy the correspondig HTML file from dokuwiki/lib/tpl/namespaced/debug folder to dokuwiki/lib/tpl/namespaced folder and change it to your liking (don't forget to remove existing *-hook-sample class).

You can add noprint class to avoid the content to be printed.

See DokuWiki's documentation for more details about include hooks.

⚠️ UPDATE LIST ⚠️

Here's the list of features that will not work on browsers without jQuery abilities :

• Stack (and switch between) "Back to top" and "Go to bottom" pagetools
• Newsticker
• Context logo Lightbox effect
• Sidebar visibility context tool
• Sidebar and TOC auto-collapsing when reaching tablet resolution
• ToC extraction in "mix" layout
• Scrollspy ToC
• Internal links will scroll a bit too far if Page header is set to stick on top of page
• Animated scrolling
• Dynamic tables on touch screen