Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
projects:dokuwiki:nuropa-template:toolbar [2024/11/17 10:05] – admin | projects:dokuwiki:nuropa-template:toolbar [2024/11/17 20:00] (current) – [Colours and Styles] admin | ||
---|---|---|---|
Line 4: | Line 4: | ||
See the following screenshot for a quick preview: | See the following screenshot for a quick preview: | ||
- | + | < | |
- | < | + | |
{{: | {{: | ||
- | < | + | < |
</ | </ | ||
Line 18: | Line 17: | ||
* The translations menu, if the [[doku> | * The translations menu, if the [[doku> | ||
- The **tools** list, showing a dynamic list of available page or site tools | - The **tools** list, showing a dynamic list of available page or site tools | ||
- | * An overflow menu (shown as '' | + | * An overflow menu (shown as '' |
+ | |||
+ | ===== The overflow menu ===== | ||
+ | |||
+ | The '' | ||
+ | |||
+ | The exception are the user-tools, which are always only shown in the overflow menu. | ||
+ | |||
+ | <figure outline [style=width: | ||
+ | <div [style=text-align: | ||
+ | {{: | ||
+ | ---- | ||
+ | {{: | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | If there is not enough space available to show all tool buttons (e.g. on a smaller screen), the remaining items will be shown in the overflow instead: | ||
+ | |||
+ | <figure outline [style=width: | ||
+ | <div [style=text-align: | ||
+ | {{: | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | Note that the list of tools may also depend on which plugins you have installed. | ||
+ | |||
+ | ===== Configuration ===== | ||
+ | |||
+ | The toolbar can be configured in multiple ways: | ||
+ | |||
+ | ==== HTML Snippets ==== | ||
+ | |||
+ | There are two hooks to load static HTML snippets into the toolbar: | ||
+ | |||
+ | * A file called '' | ||
+ | * A file called '' | ||
+ | |||
+ | These positions are also indicated in the screenshot above with the “pre” and “post” markers. | ||
+ | |||
+ | These files need to be placed into the DokuWiki '' | ||
+ | |||
+ | See below for example files for typical situations. | ||
+ | |||
+ | ==== Colours and Styles ==== | ||
+ | |||
+ | All colours and certain styling options of the toolbar can be configured using the [[doku> | ||
+ | |||
+ | The default values of these settings are intended to integrate the toolbar into a typical Chromium-based browser environment. | ||
+ | |||
+ | ^ Setting ^ Description ^ Default ^ Dark mode ^ | ||
+ | | Toolbar fonts | Fonts to be used in the toolbar | '' | ||
+ | | Toolbar font size | Base font size for the toolbar | '' | ||
+ | | Toolbar background | Toolbar background colour | <span [style=background-color:# | ||
+ | | Toolbar text | Toolbar text colour | <span [style=background-color:# | ||
+ | | Toolbar border | Toolbar bottom border colour | <span [style=background-color:# | ||
+ | | Toolbar focus | Toolbar focus ring colour | <span [style=background-color:# | ||
+ | |||
+ | |||
+ | Note that the //dark mode// settings are only used if //dark mode// has been activated in the template settings, and if the visitor has dark mode enabled on their device. | ||
+ | |||
+ | ==== Template configuration ==== | ||
+ | |||
+ | The following tempalte configuration settings are specific for the toolbar: | ||
+ | |||
+ | === Toolbar optional menu === | ||
+ | |||
+ | This setting determines what menu is shown in the left side of the toolbar: | ||
+ | |||
+ | * **User menu** – the user menu, or a “Log in” button, if no user is logged in at the moment. | ||
+ | |||
+ | * **Languages menu** – the custom [[projects: | ||
+ | |||
+ | * **None** – no custom menu is shown at this place. | ||
+ | |||
+ | === Toolbar style === | ||
+ | |||
+ | How should the tools list / overflow menu be displayed? | ||
+ | |||
+ | * **Automatic** – show tools, use overflow for items that don't fit on screen (default) | ||
+ | |||
+ | * **Compact** – Only the overflow menu will be used. | ||
+ | ===== Examples ===== | ||
+ | |||
+ | You can use these example files as starting points for your own include hooks. To use them, simply download these and place them into your ''/ | ||
+ | |||
+ | ==== Toolbar custom menu ==== | ||
+ | |||
+ | This include file adds a custom menu to the toolbar which links to other web sites: | ||
+ | |||
+ | <file html toolbar-pre.html> | ||
+ | <!-- BEGIN Included file: toolbar-pre.html --> | ||
+ | <button popovertarget=" | ||
+ | <svg xmlns=" | ||
+ | < | ||
+ | </ | ||
+ | <div id=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <!-- END OF toolbar-pre.html --> | ||
+ | </ | ||
+ | |||
+ | This will show in the toolbar as follows: | ||
+ | <aside float-right outline> | ||
+ | < | ||
+ | {{: | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | === Explanation: | ||
+ | |||
+ | * The **file name** '' | ||
+ | * The **comment** lines (''< | ||
+ | * The **''< | ||
+ | * An ''< | ||
+ | * A ''< | ||
+ | * The actual **menu** is implemented as a ''< | ||
+ | * This element //must// have a unique '' | ||
+ | * This element also //must// have a '' | ||
+ | * The menu element can have any content. The example code contains a list of two links to external sites. | ||
+ | |||
+ | ==== Simple marker ==== | ||
+ | |||
+ | In some circumstances it may be useful to have a simple marker where the hook is placed. Here is a simple red box that can be used for this purpose: | ||
+ | |||
+ | <file html toolbar-post.html> | ||
+ | <!-- BEGIN Included file: toolbar-post.html --> | ||
+ | <button style=" | ||
+ | <!-- END OF toolbar-post.html --> | ||
+ | </ | ||
+ | |||
+ | This is of course how the boxes in the screenshot on top of this page have been done. |