Set up themes

Prev Next

Learn how to create themes associated to your assets.

This article covers how to customize the background, foreground, and other themes for assets within Presentation Manager, alongside carrying out accessibility checks. This can be used, as an example, in the context of setting up a branded row - for more information on branded rows, visit our how to use branded rows article.

Themes can be added to Pages, Rows, and Menus, in addition to the following Assets: Items, Channels, and Links.

Note: The theme feature can but turned on/off and restricted to specific user groups by the superadmins with in the configuration settings.

Choose your asset

For this example, select Assets > Items, and then select the item you want to change.

Navigate.png

Below you can see the background theme, however you can configure foreground and other themes in the same way.

Themes_overview.png

Choose your theme

  1. Select the Add_theme.png icon to display theme options.

  2. Select the one of the below three icons to select the color input method:

Theme_colours.png

Select the theme_palette.pngicon to select a color or enter color Hex code.

theme_colour_picker_options.png

Select thetheme_colour_picker.pngicon to use the color picker and specify transparency or enter color Hex code.

theme_from_image.png

Select thetheme_gallery.pngicon to view a color swatch taken from the images saved to the asset or enter color Hex code.

theme_from_image_dropdown.png

If recorded, other image type swatches are available and display as options.

With a color selected, this forms your Primary color. You may now add Secondary and Tertiary colors in the same way.

You can also drag and drop the colors to change the order:

Drag and Drop reorder.gif

Below is an example of a burgundy-colored branded row on the front end:

Branded row burgundy.pngColor picker burgundy.png

Accessibility check

Carry out an accessibility check on two selected theme colors within the same category (Background, Foreground, or Other) in order to establish whether there is enough contrast. This is a very important stage when choosing colors, to comply with accessibility standards.

  1. Hover over the two colors you wish to compare and select the  Accessibility_check_hover.pngicon on each. A tick icon indicates the two colors undergoing the accessibility check.

themes_accessibility_check.png

2. To the right of the screen, view the Accessibility check results.

Accessibility_check.png

An example of a suitable color contrast.

Accessibility_check_fail.png

An example of unsuitable color contrast.

Delete a color

Hover over the color you wish to delete and click the Accessibility_check_remove_colour.png icon. This removes the color from your theme.

Accessibility check levels

The following are the conformance levels given in Presentation Manager as per the Web Content Accessibility Guidelines (WCAG) 2.0 guidelines:

  • Level A: This is the minimum level of conformance. It includes the most basic web accessibility features.

  • Level AA: This level includes all Level A and AA requirements. Many organizations strive to meet Level AA as it is considered the mid-range conformance level.

  • Level AAA: This is the highest level of conformance and includes all Level A, AA, and AAA requirements.

  • Fail: Does not meet the minimum requirements.