User Tools

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
projects:dokuwiki:nuropa-template:toolbar [2024/11/17 12:02] – [Colours and Styles] adminprojects:dokuwiki:nuropa-template:toolbar [2024/11/17 20:00] (current) – [Colours and Styles] admin
Line 27: Line 27:
 <figure outline [style=width:fit-content]> <figure outline [style=width:fit-content]>
 <div [style=text-align:right]> <div [style=text-align:right]>
-{{:projects:dokuwiki:nuropa-template:toolbar_overflow-1.png?direct&1000|Nuropa toolbar with overflow, logged out}}+{{:projects:dokuwiki:nuropa-template:toolbar_overflow-1.png?direct|Nuropa toolbar with overflow, logged out}}
 ---- ----
-{{:projects:dokuwiki:nuropa-template:toolbar_overflow-2.png?direct&1000|Nuropa toolbar with overflow, logged in}}+{{:projects:dokuwiki:nuropa-template:toolbar_overflow-2.png?direct|Nuropa toolbar with overflow, logged in}}
 </div> </div>
 <figcaption>The items in the toolbar and overflow menu change, depending on whether the user is logged in or not</figcaption> <figcaption>The items in the toolbar and overflow menu change, depending on whether the user is logged in or not</figcaption>
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 ^ Dark mode ^ 
-| ''toolbar_fonts'' | Fonts to be used in the toolbar only | … | +| Toolbar fonts | Fonts to be used in the toolbar |  ''Segoe UI, etc. …''  || 
-| ''toolbar_font_size'' | Base font size for the toolbar | ''10pt'' | +| Toolbar font size | Base font size for the toolbar |  ''9.5pt''  || 
-| ''toolbar_background'' | Toolbar background colour | <span [style=background-color:#F7F7F7;color:#474747]>''#F7F7F7''</span> | +| Toolbar background | Toolbar background colour | <span [style=background-color:#F9F9FB;color:#474747]>''#F9F9FB''</span> | <span [style=background-color:#2B2A33;color:#C7C7C7]>''#2B2A33''</span> | 
-| ''toolbar_background_dark'' | Toolbar background colour (dark mode) | <span [style=background-color:#3C3C3C;color:#C7C7C7]>''#3C3C3C''</span> | +| Toolbar text | Toolbar text colour | <span [style=background-color:#F9F9FB;color:#15141A]>''#15141A''</span> | <span [style=background-color:#3C3C3C;color:#C7C7C7]>''#C7C7C7''</span> | 
-| ''toolbar_text'' | Toolbar text colour | <span [style=background-color:#F7F7F7;color:#474747]>''#474747''</span> | +| Toolbar border | Toolbar bottom border colour | <span [style=background-color:#F7F7F7;color:#474747]>''#CCCCCC''</span> | <span [style=background-color:#2B2A33;color:#C7C7C7]>''#444746''</span> | 
-| ''toolbar_text_dark'' | Toolbar text colour (dark mode) | <span [style=background-color:#3C3C3C;color:#C7C7C7]>''#C7C7C7''</span> | +| Toolbar focus | Toolbar focus ring colour | <span [style=background-color:#F7F7F7;color:#0078D4]>''#0078D4''</span> | <span [style=background-color:#2B2A33;color:#0A84FF]>''#0A84FF''</span> | 
-| ''toolbar_border'' | Toolbar bottom border colour | <span [style=background-color:#F7F7F7;color:#474747]>''#E1E3E1''</span> | +
-| ''toolbar_border_dark'' | Toolbar bottom border colour (dark mode) | <span [style=background-color:#3C3C3C;color:#C7C7C7]>''#444746''</span> | +
-| ''toolbar_focus'' | Toolbar focus ring colour | <span [style=background-color:#0078D4;color:#FFF]>''#F7F7F7''</span> | +
-| ''toolbar_focus_dark'' | Toolbar focus ring colour (dark mode) | <span [style=background-color:#A8C7FA;color:#3C3C3C]>''#A8C7FA''</span> |+
  
 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:dokuwiki:nuropa-template:languages-menu|languages menu]], if available.
 +
 +  * **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 ''/conf/'' directory: 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 ''/conf/'' directory:
  
-==== Custom menu ====+==== Toolbar custom menu ====
  
 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 ''popover'' attribute!     * This element also //must// have a ''popover'' attribute!
     * 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="border: red dashed 1px;color:red;padding:2.5pt .5em 4pt .5em">post</button>
 +<!-- END OF toolbar-post.html -->
 +</file>
 +
 +This is of course how the boxes in the screenshot on top of this page have been done.
 +

Diese Website verwendet Cookies. Durch die Nutzung der Website erklären Sie sich mit der Speicherung von Cookies auf Ihrem Computer einverstanden. Außerdem bestätigen Sie, dass Sie unsere Datenschutzrichtlinie gelesen und verstanden haben. Wenn Sie damit nicht einverstanden sind, verlassen Sie bitte die Website.

More information