Differences

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

--- components:searchbar:index [2025/02/18 13:14] – 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.
-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”.
+For more information, see: <b maniculus>[[sitelogo|Sitelogo]]</b>.
+==== Search widget ====
-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.
-==== Search field ====
 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”.
+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>.
-<figure>{{:components:searchbar:searchbar-searchfield.png?700|Nuropa Searchfield active}}<figcaption>The search field when activated</figcaption></figure>
+===== Configuration =====
+==== Template settings ====
-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).
+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:
-More information on the search functionality in an upcoming article...
+  * **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”.
-On smaller screens (e.g. tablets), instead of a search field, a search button (icon plus label) is shown:
+For more information, please see the page <span maniculus>[[customisation:settings|Settings]]</span>.
-<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:
+==== Style settings ====
-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.
+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 Tool ====
+  * **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.
-To the right of the search field, there is space for
+<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>