Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Search"
Technical name:
twt-header-search-show
Field type: Select
Available values: • Input (default) • Flyout search • Fullscreen search • Global Search @Desktop (only available with "Header 1.1")
Example value:
Input (default)
Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:
twt-header-search-type
Field type: Select
Available values: • not rounded (default) • round corners • individual radius
Example value:
not rounded (default)
Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:
twt-header-search-input-corner-type
Field type: Number field
Example value:
10
Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:
twt-header-search-input-border-radius
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-input-color
Field type: Color picker
Example value:
#e4e7ea
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-input-border-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-input-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-btn-icon-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-btn-border-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-btn-background-color
Field type: Select
Available values: • align left • align center • align right
Example value:
align left
Path to the configuration: Tab "Header" => Block "Search" => Section "Typography"
Technical name:
twt-header-search-text-align
Field type: Text field
Example value:
500
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Input'"
Technical name:
twt-header-search-max-width
Field type: Text field
Example value:
100%
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Input'"
Technical name:
twt-header-search-width-desktop
Field type: Select
Available values: • Container-max-width (Full-width-boxed) • 100% (Full-width)
Example value:
Container-max-width (Full-width-boxed)
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-container-width
Field type: Text field
Example value:
500
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-max-width
Field type: Text field
Example value:
100%
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-max-width-desktop
Field type: Number field
Example value:
15
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-padding
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-phone-search-flyout-background-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-background-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.9)
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'"
Technical name:
twt-header-search-fullscreen-backdrop-color
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'"
Technical name:
twt-header-search-fullscreen-backdrop-effect-blur
Input (default) Available in "Header 1.1" and "Header 1.2".
Flyout search / Fullscreen search Available in all headers.
Must be selected for "Header 2.1" and "Full-width sticky header".
Global Search Available in "Header 1.1" in the desktop viewport. Use the color: "Layout" > "Background colour (Action buttons)".
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Note: This configuration relates to the corner type "individual radius".
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
Option "Flyout search" in "Search" > "Layout type" must be selected.
Option "Flyout search" in "Search" > "Layout type" must be selected.
Select the desired background colour of the backdrop.
The option "Fullscreen search" must be selected as the "Layout type".
Enter the desired value for the blur effect of the backdrop.