Navigation

ThemeWare® Manual

Configuration

Basic configuration


Layout type

Field type:
Select

Available values:
• Navigation (default)
• Buttons

Example value:
Navigation (default)

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Basic configuration"

Technical name:
twt-pagination-style

Navigation
Default layout with combined buttons.

Buttons
Layout with separated buttons.

Colour configuration


Text colour

Field type:
Color picker

Example value:
$sw-color-brand-primary

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-color


Border colour

Field type:
Color picker

Example value:
#bcc1c7

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-border-color


Background colour

Field type:
Color picker

Example value:
#ffffff

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-background-color


Text colour @hover

Field type:
Color picker

Example value:
darken($sw-color-brand-primary, 15%)

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-hover-color


Border colour @hover

Field type:
Color picker

Example value:
#bcc1c7

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-hover-border-color


Background colour @hover

Field type:
Color picker

Example value:
#eeeeee

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-hover-background-color


Text colour @active

Field type:
Color picker

Example value:
#ffffff

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-active-color


Border colour @active

Field type:
Color picker

Example value:
$sw-color-brand-primary

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-active-border-color


Background colour @active

Field type:
Color picker

Example value:
$sw-color-brand-primary

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-active-background-color


Text colour @disabled

Field type:
Color picker

Example value:
#798490

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-disabled-color


Border colour @disabled

Field type:
Color picker

Example value:
#bcc1c7

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-disabled-border-color


Background colour @disabled

Field type:
Color picker

Example value:
#eeeeee

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Colour configuration"

Technical name:
twt-pagination-disabled-background-color

Layout type "Navigation"


Corner type

Field type:
Select

Available values:
• not rounded
• rounded corners (default)
• round corners

Example value:
rounded corners (default)

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Layout type: Navigation"

Technical name:
twt-pagination-corner-type

rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners
Uses a predefined radius for round corners.

Layout type "Buttons"


Corner type

Field type:
Select

Available values:
• not rounded
• rounded corners
• round corners
• Pill

Example value:
rounded corners

Path to the configuration:
Tab "Content" => Block "Pagination" => Section "Layout type: Buttons"

Technical name:
twt-pagination-buttons-corner-type

rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners
Uses a predefined radius for round corners.

Last updated on

This page online: https://docs.themeware.design/manual/content/pagination/configuration · ThemeWare® Service Portal, service.themeware.design