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".
Glass effect [px] (overlay)
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 strength for the blur effect of the overlay (backdrop).