Differences

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

--- components:searchbar:index [2025/07/10 08:18] – [Site logo] admin
+++ components:searchbar:index [2025/07/19 14:58] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ====== Searchbar ======
-The page searchbar is the section below the site toolbar, containing the site logo and the search field.
+The page searchbar is the section below the site toolbar, containing at least the site logo and the search widget.
-In the simplest form, it can look like this:
+There are additional configuration options, like showing either the user menu, or a languages menu (provided the Translation plugin is installed). It can also show additional static content, and of course everything can be re-configured.
-<figure>{{:components:searchbar:searchbar-simple.png?700|Nuropa Searchbar}}<figcaption>Simple searchbar</figcaption></figure>
+In the simplest form, the search bar may look like this:
+<figure box>{{:components:searchbar:searchbar-simple.png?700|Nuropa Searchbar}}<figcaption>Simple searchbar</figcaption></figure>
 ===== Components =====
@@ Line 16: / Line 18: @@
 For more information, see: <b maniculus>[[sitelogo|Sitelogo]]</b>.
-==== Search field ====
+==== Search widget ====
 DokuWiki’s own search functionality is actually pretty good, and already for this reason it should not be hidden away but presented to visitors in the most inviting way.
-The search field you see in the middle of the aptly named “Searchbar” is just the “inactive” state of the search widget. The moment the user activates it – typically by clicking into the search field – it changes to take centre-stage on the page:
+The Nuropa template enhances the default search field in many ways, so that it is more appropriate to talk about a “search widget” rather than a “search field”.
-<figure>{{:components:searchbar:searchbar-searchfield.png?700|Nuropa Searchfield active}}<figcaption>The search field when activated</figcaption></figure>
-In this mode, the web page content is overlaid (and blurred), so the user focusses on the search instead (a click to the background, or pressing the Escape key will of course return everything to the normal state).
-More information on the search functionality in an upcoming article...
-On smaller screens (e.g. tablets), instead of a search field, a search button (icon plus label) is shown:
-<figure>{{:components:searchbar:searchbar-tablet.png?400|Nuropa Searchbar on tablet screen sizes}}<figcaption>The searchbar on a typical tablet screen size</figcaption></figure>
-On even smaller screens, the labels are also hidden and only the icons are shown:
-On smaller screens (e.g. tablets), instead of a search field, a search button (icon plus label) is shown:
-<figure>{{:components:searchbar:searchbar-phone.png?275|Nuropa Searchbar on smartphone screen sizes}}<figcaption>The searchbar on a typical phone screen size</figcaption></figure>
-The functionality, however, is the same: clicking or tapping on the search icon will open the search field, similar to above.
-==== Searchbar Tool ====
-To the right of the search field, there is space for a tool widget. This is similar to the left-hand tool in the [[components:toolbar:index|toolbar]], insofar as it can be configured to hold the same tools, namely:
+This feature is described in more detail under: <b maniculus>[[:components:searchbar:search-widget|Search widget]]</b>.
-=== User widget ===
+==== Searchbar Tools ====
-<figure>{{:components:searchbar:searchbar-user.png?700|Nuropa Searchbar with User widget}}<figcaption>Searchbar with User widget</figcaption></figure>
+To the right of the search field, there is space for a tool widget. This is similar to the left-hand tool in the [[components:toolbar:index|toolbar]], insofar as it can be configured to hold the same tools.
-As usual, if no user is logged in, this place shows the “Log In” button instead.
+For more information, see: <b maniculus>[[tool|Searchbar tools]]</b>.
-=== Translations widget ===
+===== Configuration =====
+==== Template settings ====
-When the [[doku>plugin:translation|Translation plugin]] is installed, this place can also hold the translations menu:
+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 search bar:
-<figure>{{:components:searchbar:searchbar-langmenu.png?700|Nuropa Searchbar with Translations widget}}<figcaption>Searchbar with Translations widget</figcaption></figure>
+  * **Site logo** – How should the [[sitelogo|site logo]] be displayed?
+  * **Searchbar Tool** – What tool should be shown as [[tool|searchbar tool]]? Options are: “User information”, “Languages menu” or “Nothing”.
-This is the default setting, which means for sites that don’t use the Translation plugin, this place will be left blank.
+For more information, please see the page <span maniculus>[[customisation:settings|Settings]]</span>.
-=== Hooks ===
+==== Style settings ====
-The right side of the Searchbar has three different hooks for loading HTML snippets:
+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 search bar:
-  * ''searchbar_pre.html''
+  * **Searchbar height** – configures the minimum height of the search bar. Adjust to make more space, e.g. for the logo.
-  * ''searchbar_mid.html''
+  * **Searchbar background colour** <strong red>*</strong> – Background colour for the searchbar.
-  * ''searchbar_post.html''
+  * **Searchbar icon colour** <strong red>*</strong> – Colour for icons in the searchbar.
+  * **Searchbar link colour** <strong red>*</strong> – Colour for links in the searchbar.
+  * **Searchfield fonts** – Fonts that should be used for the search field.
+  * **Search field background** <strong red>*</strong> – Background colour of the search field.
+  * **Search field text colour** <strong red>*</strong> – Text colour in the search field.
+  * **Search field border** <strong red>*</strong> – Border colour of the search field.
+  * **Search popup background** <strong red>*</strong> – Background colour of the search popup.
-TODO: explanations and screenshots.
+<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>