Configuration
Show floating widget
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Floating widget"
Technical name:
twt-floating-widget-show
Shows the ThemeWare® "Floating/Slideout widget".
To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
Show floating widget @Phone (<768px)
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Floating widget"
Technical name:
twt-floating-widget-mobile
Basic configuration
Position
Field type: Select
Available values: • left • right
Example value:
left
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-position
Hover effect
Field type: Select
Available values: • no effect • pull out • reduce opacity
Example value:
pull out
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-hover-type
Show overlay (if opended)
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-backdrop
Show opened (when the page has been loaded)
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-show-opened
Animate (when the page has been loaded)
Field type: Select
Available values: • no animation • Wobble (3x)
Example value:
no animation
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-animation
Link widget
Field type: Select
Available values: • no • yes • yes (open in new tab)
Example value:
no
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-link
To edit or translate the link please use the following snippet: twt.extension.floatingWidget.link
Width (Widget)
Field type: Number field
Example value:
400
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-width
Height (Widget)
Field type: Number field
Example value:
300
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-height
Width (Tab)
Field type: Number field
Example value:
200
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-title-width
Height (Tab)
Field type: Number field
Example value:
40
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-title-height
Padding (Content)
Field type: Number field
Example value:
20
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-padding
Content alignment (vertical)
Field type: Select
Available values: • align top • align center • align bottom
Example value:
align center
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-align-items
To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
Content alignment (horizontal)
Field type: Select
Available values: • align left • align center • align right
Example value:
align center
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-justify-content
If the text runs across the full-width of the widget, the alignment has no visual effect.
To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
Distance from bottom
Field type: Text field
Example value:
20
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-side-bottom-distance
Distance from bottom (Unit)
Field type: Select
Available values: • % (Percent) • px (Pixel)
Example value:
% (Percent)
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-side-bottom-distance-unit
Colour configuration
Text colour
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-color
Link colour
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-link-color
Link colour @hover
Field type: Color picker
Example value:
$twt-color-brand-primary-dark
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-link-color-hover
Background colour (Widget)
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-background-color
Text colour (Tab)
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-title-color
Background colour (Tab)
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-title-background-color
Background-image
Background image
Field type: Media selection
Example value: ``
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Background-image"
Technical name:
twt-floating-widget-background-image
Display mode
Field type: Select
Available values: • default • contain • cover
Example value:
default
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Background-image"
Technical name:
twt-floating-widget-background-image-object-fit
none The image is not resized.
cover The image is sized to maintain its aspect ratio while filling the element's entire content box.
contain The image is sized to maintain its aspect ratio while fitting within the element's content box. The object will be clipped to fit.
Typography
Font size
Field type: Number field
Example value:
16
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Typography"
Technical name:
twt-floating-widget-font-size
Font size (Tab)
Field type: Number field
Example value:
18
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Typography"
Technical name:
twt-floating-widget-title-font-size
Text alignment
Field type: Select
Available values: • align left • align center • align right
Example value:
align center
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Typography"
Technical name:
twt-floating-widget-text-align
Text alignment when the text wraps.
Text formatting (Tab)
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Typography"
Technical name:
twt-floating-widget-title-text-transform
Last updated
Was this helpful?