Customize: Fora11y
Customize the appearance of Fora11y.
Theme config
radius-small
Border-radius small variant. Default: 3px.
radius-large
Border-radius large variant. Default: 3px.
gap-small
Deprecated in v3.
gap-default
Gap size for CSS grid and flexbox. This creates the space in grid views between elements. Default: 32px.
gap-large
Deprecated in v3.
measure
Default 60ch.
font-family-default
Default: “Open Sans”, sans-serif;
font-family-default-link
Add the <link>
code here for custom font.
font-family-special
Custom font for headings (< h1 >
– < h6 >
)
Default: “Open Sans”, sans-serif;
font-family-special-weight
Default: 800
font-family-special-link
Add the <link>
code here for custom font.
body_background
Set custom background color
- Default
- Neutral
- Primary
Colorscheme
Base color
Background/ text color light
Light variant for background/ text color (advice: close to white)
Background/ text color dark
Dark variant for background/ text color (advice: close to black)
Primary color
Primary color light
advice: minimum contrast of 7.5 on background/ text color dark
Primary color
this color is not actively used for accessibility, this is a decorative color you can choose freely.
Primary color dark
advice: minimum contrast of 7.5 on background/ text color light
Secondary color
Secondary color light
advice: minimum contrast of 7.5 on background/ text color dark
Secondary color
this color is not actively used for accessibility, this is a decorative color you can choose freely.
Secondary color dark
advice: minimum contrast of 7.5 on background/ text color light
Tertiary color
Tertiary color light
advice: minimum contrast of 7.5 on background/ text color dark
Tertiary color
this color is not actively used for accessibility, this is a decorative color you can choose freely.
Tertiary color dark
advice: minimum contrast of 7.5 on background/ text color light
Neutral color
Neutral color light
Default grayscale color. Advice: minimum contrast of 7.5 on background/ text color dark
Neutral color
Default grayscale color. This color is not actively used for accessibility, this is a decorative color you can choose freely.
Neutral color dark
Default grayscale color. Advice: minimum contrast of 7.5 on background/ text color light
Success color
Success color light
Success color in notices and labels. Advice: minimum contrast of 7.5 on background/ text color dark
Success color
Success color in notices and labels. This color is not actively used for accessibility, this is a decorative color you can choose freely.
Success color dark
Success color in notices and labels. Advice: minimum contrast of 7.5 on background/ text color light
Warning color
Warning color light
Warning color in notices and labels. Advice: minimum contrast of 7.5 on background/ text color dark
Warning color
Warning color in notices and labels. This color is not actively used for accessibility, this is a decorative color you can choose freely.
Warning color dark
Warning color in notices and labels. Advice: minimum contrast of 7.5 on background/ text color light
Error color
Error color light
Error color in notices and labels. Advice: minimum contrast of 7.5 on background/ text color dark
Error color
Error color in notices and labels. This color is not actively used for accessibility, this is a decorative color you can choose freely.
Error color dark
Error color in notices and labels. Advice: minimum contrast of 7.5 on background/ text color light
Info color
Info color light
Info color in notices and labels. Advice: minimum contrast of 7.5 on background/ text color dark
Info color
Info color in notices and labels. This color is not actively used for accessibility, this is a decorative color you can choose freely.
Info color dark
Info color in notices and labels. Advice: minimum contrast of 7.5 on background/ text color light
Contrast color
Contrast color light
Contrast color (in contrast modus). Advice: minimum contrast of 7.5 on background/ text color dark
Contrast color
Contrast color (in contrast modus). This color is not actively used for accessibility, this is a decorative color you can choose freely.
Contrast color dark
Contrast color (in contrast modus). Advice: minimum contrast of 7.5 on background/ text color light
Menu
Sticky menu
By default the menu is set in the header above the content. When the user scrolls down the header (and menu) are scrolled out of the viewport. When the user wants to view the menu again the user has to scroll back to the top of the page.
When this function is enabled the menu is still hidden when scrolling down. When scrolling back up the menu pops into the viewport without having to scroll back to the top of the page.
Hide logo in main menu
If a logo is set via Site identity > Logo it is visible in the main menu on the left side.
When this function is enabled the logo is hidden whether a logo is set or not.
Remove underscore on main-menu anchor links
By default the current page is highlighted in the menu with an underscore. It is possible to add anchor links to the main menu. When the anchor link is on the current page this element is also highlighted in the menu.
When this function is enabled the highlight is disabled for anchor links on the current page.
Custom post before top nav
Set a custom Fora11y library post before the top nav.
Custom post before main nav
Set a custom Fora11y library post before the main nav.
Custom post after main nav
Set a custom Fora11y library post after the main nav.
Custom post after breadcrumb
Set a custom Fora11y library post after the breadcrumbs.
Footer
Select custom footer
Set a custom Fora11y library post as the footer.
Pagination
Tiny pagination
Show only previous and next pagination links
First items to show
Set the number of pages to show from the previous arrow. Default: 1.
Wrap items around current page
Set the number of pages around the current page. Default: 1.
Last items to show
Set the number of pages to show before the next arrow. Default: 1.
Cookies
Functional scripts
Add one or more custom <script>
element(s) that are loaded by default (without consent of the user).
Analytical scripts
Add one or more custom <script>
element(s) that are categorised by analytical scripts. These scripts will be loaded when the user consents to loading analytical scripts.
If consent is given and the vistor chooses to retract the consent the script are immediately removed from the page.
Analytical default selected
When analytical scripts are available, the user must select the checkbox and consent before the scripts are loaded.
When this is enabled the checkbox is selected by default. This doesn’t load the scripts automatically! Scripts are always loaded after consent is given (excepted by the functional scripts).
Marketing scripts
Add one or more custom <script>
element(s) that are categorised by marketing scripts. These scripts will be loaded when the user consents to loading marketing scripts.
If consent is given and the vistor chooses to retract the consent the script are immediately removed from the page.
Marketing default selected
When marketing scripts are available, the user must select the checkbox and consent before the scripts are loaded.
When this is enabled the checkbox is selected by default. This doesn’t load the scripts automatically! Scripts are always loaded after consent is given (excepted by the functional scripts).
Social scripts
Add one or more custom <script>
element(s) that are categorised by social scripts. These scripts will be loaded when the user consents to loading social scripts.
If consent is given and the vistor chooses to retract the consent the script are immediately removed from the page.
Social default selected
When social scripts are available, the user must select the checkbox and consent before the scripts are loaded.
When this is enabled the checkbox is selected by default. This doesn’t load the scripts automatically! Scripts are always loaded after consent is given (excepted by the functional scripts).
Cookie pop-up
Notice title
The title in the cookie notice pop-up.
Notice text
Text content in the notice. HTML is allowed to add links.
Notice fieldset legend
All checkboxes are wrapped in a <fieldset>
. The text set here is placed in the <legend>
.
Notice functional text
Text shown in the (disabled) checkbox for functional cookies.
Notice analytical text
Text shown in the checkbox for analytical cookies.
Notice marketing text
Text shown in the checkbox for marketing cookies.
Notice social text
Text shown in the checkbox for social cookies.
Notice accept text
Text shown in the submit button for consent.
Font Awesome
Icons in Fora11y are loaded via FontAwesome. By default the free icon set is available. If you have a paid membership for FontAwesome you can enable it via a custom kit.
Kit URL
The URL of the FontAwesome kit.
Version
Choose the version of the FontAwesome kit.
Options:
- Version 5
- Version 6
Icon style
Default icon style for icons. Default: solid.
Duotone
When FontAwesome Duotone icons are available you can define the colors here.
Primary color (duotone icons)
Set the primary color for the icons. Default: theme-700.
Secondary color (duotone icons)
Set the secondary color for the icons. Default: theme-500.
Blog archive
Enable search section
Show the search field on the post archive page.
Card type
Post items are show in a Fora11y Card. Choose the card type. Default: Default.
Breakpoint small grid
Choose the breakpoint for small screen sizes.
Options:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
Breakpoint medium grid
Choose the breakpoint for medium screen sizes.
Options:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
Breakpoint large grid
Choose the breakpoint for large screen sizes.
Options:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
Breakpoint huge grid
Choose the breakpoint for huge screen sizes.
Options:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
bbPress
Enable single forum description
bbPress shows a summary at the start of a forum, this is disabled in AWP. Check this box to enable the summary.
Enable single topic description
bbPress shows a summary at the start of a topic, this is disabled in AWP. Check this box to enable the summary.
License
License key
Enter your Fora11y license key to enable future updates.
Enable beta versions
When enabled you’ll be able to install beta versions. Only the beta updates are available when selected. If you want to update to the latest stable release disable this function.