skip to content

nuropa

off the beaten track

Sidebar

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
components:searchbar:index [2025/07/10 10:36] – [Searchbar Tools] admincomponents:searchbar:index [2025/07/19 14:58] (current) – external edit 127.0.0.1
Line 1: Line 1:
 ====== Searchbar ====== ====== 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 ===== ===== Components =====
Line 24: Line 26:
 This feature is described in more detail under: <b maniculus>[[:components:searchbar:search-widget|Search widget]]</b>. This feature is described in more detail under: <b maniculus>[[:components:searchbar:search-widget|Search widget]]</b>.
  
-===== Searchbar Tools =====+==== 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. 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.
Line 30: Line 32:
 For more information, see: <b maniculus>[[tool|Searchbar tools]]</b>. For more information, see: <b maniculus>[[tool|Searchbar tools]]</b>.
  
 +===== Configuration =====
 ==== Template settings ==== ==== Template settings ====
  
Line 44: Line 47:
  
   * **Searchbar height** – configures the minimum height of the search bar. Adjust to make more space, e.g. for the logo.   * **Searchbar height** – configures the minimum height of the search bar. Adjust to make more space, e.g. for the logo.
-  * **Searchbar background colour** – Background colour for the searchbar<strong red>*</strong>. +  * **Searchbar background colour** <strong red>*</strong> – Background colour for the searchbar. 
-  * **Searchbar icon colour** – Colour for icons in the searchbar<strong red>*</strong>. +  * **Searchbar icon colour** <strong red>*</strong> – Colour for icons in the searchbar. 
-  * **Searchbar link colour** – Colour for links in the searchbar<strong red>*</strong>. +  * **Searchbar link colour** <strong red>*</strong> – Colour for links in the searchbar. 
-  * **Searchfield fonts** - List of fonts that should be used for the searchfield. +  * **Searchfield fonts** – Fonts that should be used for the search field. 
-  * **Search field background** – Background colour of the search field<strong red>*</strong>. +  * **Search field background** <strong red>*</strong> – Background colour of the search field. 
-  * **Search field text color** – Text colour in the search field<strong red>*</strong>. +  * **Search field text colour** <strong red>*</strong> – Text colour in the search field. 
-  * **Search field border** – Border colour of the search field<strong red>*</strong>. +  * **Search field border** <strong red>*</strong> – Border colour of the search field. 
-  * **Search popup background** – Background colour of the search popup<strong red>*</strong>.+  * **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> <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>