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 12:02] – [Colours and Styles] admin | projects:dokuwiki:nuropa-template:toolbar [2024/11/17 20:00] (current) – [Colours and Styles] admin | ||
---|---|---|---|
Line 27: | Line 27: | ||
<figure outline [style=width: | <figure outline [style=width: | ||
<div [style=text-align: | <div [style=text-align: | ||
- | {{: | + | {{: |
---- | ---- | ||
- | {{: | + | {{: |
</ | </ | ||
< | < | ||
Line 68: | Line 68: | ||
The default values of these settings are intended to integrate the toolbar into a typical Chromium-based browser environment. | The default values of these settings are intended to integrate the toolbar into a typical Chromium-based browser environment. | ||
- | ^ Setting ^ Description ^ Default ^ | + | ^ Setting ^ Description ^ Default |
- | | '' | + | | Toolbar fonts | Fonts to be used in the toolbar | '' |
- | | '' | + | | Toolbar font size | Base font size for the toolbar | '' |
- | | '' | + | | Toolbar background |
- | | '' | + | | Toolbar text | Toolbar text colour | <span [style=background-color:# |
- | | '' | + | | Toolbar border |
- | | '' | + | | 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. | 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 ===== | ===== 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 ''/ | 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 ''/ | ||
- | ==== Custom | + | ==== Toolbar custom |
This include file adds a custom menu to the toolbar which links to other web sites: | This include file adds a custom menu to the toolbar which links to other web sites: | ||
Line 122: | Line 141: | ||
* This element also //must// have a '' | * 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. | * 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. | ||
+ |