Configuration
Show search
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
Basic configuration
Layout type
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
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)".
Corner 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
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Border radius (individual radius)
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
Note: This configuration relates to the corner type "individual radius".
Colour configuration
Text colour (Input)
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
Border colour (Input)
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
Background colour (Input)
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
Icon colour (Button)
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
Border colour (Button)
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
Background colour (Button)
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
Typography
Text alignment
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
Layout type 'Input'
Maximum width
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
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
Maximum width @Desktop (≥1200px)
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
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
Layout type 'Flyout search'
Width
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
Maximum width @Phone (landscape) (≥576px)
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
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
Maximum width @Desktop (≥1200px)
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
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
Padding
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
Option "Flyout search" in "Search" > "Layout type" must be selected.
Background colour @Phone (<576px)
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
Background colour
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
Option "Flyout search" in "Search" > "Layout type" must be selected.
Layout type 'Fullscreen search'
Backdrop colour
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
Select the desired background colour of the backdrop.
The option "Fullscreen search" must be selected as the "Layout type".
Blur effect [px] (Backdrop)
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
Enter the desired value for the blur effect of the backdrop.
Last updated
