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;

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

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

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.

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).

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.

Navigation