skip to content

nuropa

off the beaten track

Sidebar

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
components:toolbar:index [2025/02/18 18:26] – [Languages menu] admincomponents:toolbar:index [2025/07/19 14:58] (current) – external edit 127.0.0.1
Line 1: Line 1:
-<div> +====== Toolbar ======
-== Toolbar == +
-</div> +
-<h1>The Site Toolbar</h1>+
  
 The topmost element on every page is the site toolbar, which by default hosts the DokuWiki administration tools and user menu. The topmost element on every page is the site toolbar, which by default hosts the DokuWiki administration tools and user menu.
Line 16: Line 13:
 This is the default item for this place. It shows the user menu, or, if no user is logged in at this point, the login button, which looks as follows: This is the default item for this place. It shows the user menu, or, if no user is logged in at this point, the login button, which looks as follows:
  
-{{:components:toolbar:toolbar-login.png?nolink|Nuropa toolbar login button}}+<figure box>{{:components:toolbar:toolbar-login.png?nolink|Nuropa toolbar login button}}<figcaption>Toolbar login button</figcaption></figure>
  
 Once your are logged in to the DokuWiki system, it shows the name of the currently logged in account instead: Once your are logged in to the DokuWiki system, it shows the name of the currently logged in account instead:
  
-{{:components:toolbar:toolbar-username.png?nolink|Nuropa toolbar user menu button}}+<figure box>{{:components:toolbar:toolbar-username.png?nolink|Nuropa toolbar user menu button}}<figcaption>Toolbar user menu (closed)</figcaption></figure>
  
 In this case, this works as a menu, which gives access to the user functions, as provided by DokuWiki: In this case, this works as a menu, which gives access to the user functions, as provided by DokuWiki:
  
-{{:components:toolbar:toolbar-usermenu.png?nolink|}}+<figure box>{{:components:toolbar:toolbar-usermenu.png?nolink|Nuropa toolbar user menu open}}<figcaption>Toolbar user menu (closed)</figcaption></figure>
  
 <aside info> <aside info>
-**Note:** The functions of the user button are also available in the right-hand “overflow menu”. See below for more information.+**Note 1:** The functions of the user button are also available in the right-hand “overflow menu”. See below for more information.
 </aside> </aside>
  
 +<aside info>
 +**Note 2:** The available functions of this item are the same as the ones that can be configured for the [[..:searchbar:tool|searchbar tools]] item. 
 +</aside>
 ==== Languages menu ==== ==== Languages menu ====
  
Line 36: Line 36:
 In this case, the menu will always show the current language and provide a menu with other configured languages: In this case, the menu will always show the current language and provide a menu with other configured languages:
  
-<figure>+<figure box>
 {{:components:toolbar:toolbar-languages-menu.png?nolink|Nuropa toolbar languages menu}} {{:components:toolbar:toolbar-languages-menu.png?nolink|Nuropa toolbar languages menu}}
 <figcaption>Languages menu in the toolbar</figcaption></figure> <figcaption>Languages menu in the toolbar</figcaption></figure>
  
-<aside info> +<aside info>**Note:** The languages menu will not be shown in some situations, e.g. in the Administration view.
-== Notes == +
-  * The languages menu will not be shown in some situations, e.g. in the Administration view.+
 </aside> </aside>
  
Line 54: Line 52:
 The following screenshot shows the positioning of these two hooks: The following screenshot shows the positioning of these two hooks:
  
-<figure>{{:components:toolbar:toolbar-with-hooks.png?nolink|Nuropa Toolbar right items with hooks}}<figcaption>Right-hand item with hooks</figcaption></figure>+<figure box>{{:components:toolbar:toolbar-with-hooks.png?nolink|Nuropa Toolbar right items with hooks}}<figcaption>Left-hand item with hooks</figcaption></figure>
 ===== Right-hand items ===== ===== Right-hand items =====
  
Line 68: Line 66:
 If there is not enough space to show all items (in particular on smaller screens, e.g. on smartphones or similar devices), the additional items will move to the “overflow menu” on the right-hand side: If there is not enough space to show all items (in particular on smaller screens, e.g. on smartphones or similar devices), the additional items will move to the “overflow menu” on the right-hand side:
  
-<figure><div [style=text-align:right]>{{:components:toolbar:toolbar-pagetools-overflow.png?nolink|Nuropa toolbar with overflow menu}}</div>+<figure box><div [style=text-align:right]>{{:components:toolbar:toolbar-pagetools-overflow.png?nolink|Nuropa toolbar with overflow menu}}</div>
 <figcaption>Page-tools move to overflow menu when there is not enough space.</figcaption></figure> <figcaption>Page-tools move to overflow menu when there is not enough space.</figcaption></figure>
  
Line 83: Line 81:
   * When no user is logged in, the toolbar will scroll “out of the way”, however, when a user is logged in, it becomes “sticky” to the top of the viewport, making sure that the tools are always available without scrolling.   * When no user is logged in, the toolbar will scroll “out of the way”, however, when a user is logged in, it becomes “sticky” to the top of the viewport, making sure that the tools are always available without scrolling.
  
 +===== Configuration =====
 +
 +==== Template settings ====
 +
 +In the <a [href=?do=admin&page=config#tpl____nuropa____tpl_settings_name] [target=_blank]>DokuWiki Configuration for this plugin</a>, the following options are directly related to the toolbar:
 +
 +  * **Toolbar Menu Style** – should the toolbar menu (on the right-hand side) appear as a popup menu only, or as a horizontal menu that only overflows into the menu if space is tight?
 +  * **Toolbar Option** – What should be shown in the left-hand side of the toolbar? Options are: “User information”, “Languages menu” or “Nothing”.
 +
 +For more information, please see the page <span maniculus>[[customisation:settings|Settings]]</span>.
 +
 +==== Style settings ====
 +
 +In the <a [href=?do=admin&page=styling] [target=_blank]>Template Style Settings</a>, the following options are directly related to the appearance of the toolbar:
 +
 +  * **Toolbar font family** – a list of fonts that should be used for the toolbar.
 +  * **Toolbar font size** – the font size to use in the toolbar.
 +  * **Toolbar font size mobile** – alternative font size to use in mobile view.
 +  * **Toolbar background colour** – Background colour for the toolbar <strong red>*</strong>.
 +  * **Toolbar text colour** - Text colour for the toolbar <strong red>*</strong>.
 +  * **Toolbar icon colour** – Colour to use for icons in the toolbar <strong red>*</strong>.
 +  * **Toolbar focus colour** – colour to use for focus highlights in the toolbar <strong red>*</strong>.
 +
 +<aside info>**Note 1:** All “colour” items (marked with <strong red>*</strong>) exist in two variants, the second of which is used for the “dark mode”, if enabled.</aside>
 +
 +The idea of the toolbar is that is should appear visually distinct from the page, more resembling a browser feature rather than a part of the web page. For this reason, there are so many configuration options for this element.