Differences

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

--- components:searchbar:index [2025/02/18 12:40] – [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 13: / Line 15: @@
 The site logo on the left-hand side of the search bar can be customised:
-Use the Media Manager to upload an PNG or SVG image with the name “logo” (i.e. use “''logo.svg''” or “''logo.png''”) to either the //root//, or to the “''wiki''” directory.
+Use the Media Manager to upload an image with the name “''logo.svg''”, or “''logo.png''”, or place a static HTML snippet with the name “''sitelogo.html''” in the wiki’s ''conf/'' directory.
+For more information, see: <b maniculus>[[sitelogo|Sitelogo]]</b>.
+==== 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 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>[[:components:searchbar:search-widget|Search widget]]</b>.
+==== Searchbar Tools ====
+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.
+For more information, see: <b maniculus>[[tool|Searchbar tools]]</b>.
+===== 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 search bar:
+  * **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”.
+For more information, please see the page <span maniculus>[[customisation:settings|Settings]]</span>.
-Or save a static HTML snippet with the name “''sitelogo.html''” in the wiki’s ''conf/'' directory and change the ''sitelogo'' setting (“How should the site logo be displayed?”) to “Static file”.
+==== Style settings ====
-In either case, please make sure that the dimensions of the logo fit the available space. Use the template image (shown here and by default) as an example.
+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:
-==== Search field ====
-<figure>{{:components:searchbar:searchbar-searchfield.png?700|Nuropa Searchfield active}}<figcaption>The search field when activated</figcaption></figure>
+  * **Searchbar height** – configures the minimum height of the search bar. Adjust to make more space, e.g. for the logo.
+  * **Searchbar background colour** <strong red>*</strong> – Background colour for the searchbar.
+  * **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.
+<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>