Differences

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

--- components:searchbar:index [2025/07/10 09:02] – [Search field] 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 22: / Line 24: @@
 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”.
-This feature is described in more detail under: <b maniculus>[[searchbar:search-widget|Search widget]]</b>.
+This feature is described in more detail under: <b maniculus>[[:components:searchbar:search-widget|Search widget]]</b>.
-==== 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:
-=== 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>