Themes allow you to customize the style of embedded interfaces in order to make them blend better into the host web page. The following sections provide details on how to configure and manage themes. Once you have created your theme, learn how to apply themes to embedded interfaces.
Themes are created in the Embedded Interfaces page of the Appian Administration Console. When creating a theme, you have the option to create a new theme from scratch or copy an existing theme.
Each theme has the following properties:
To create a theme:
Configuring a theme involves specifying the custom font and color values that will be used to style an embedded interface. The following fields are available for configuration:
|Font Family||Defines the font family used for all text, including headings, form content, and links.||Separate font names with commas. For example, Helvetica Neue, Helvetica, Arial, sans-serif|
|Web Font Stylesheet URL||CSS resource that defines the font face for the specified Web font. Only required when using a Web font.||Secure URL (HTTPS). For example, https://sample.com/css?family=Sample|
|Base Font Size (px)||This font size is used to derive the font size of all text and headers in the embedded interface. It also increases or decreases the size of interface elements, such as buttons.||10, 11, 12, 13, 14, 15, 16, 18, 20|
|Page Background Color||Background color of the embedded interface.||Any valid hex code or expression evaluating to a valid hex code. We recommend that you select a light or dark background color to create sufficient contrast with foreground colors. Avoid grey colors that are similar to the color of input field borders.|
|Accent Color||The accent color is used to highlight key interface elements, e.g., links, milestone completed steps||Any valid hex code or expression evaluating to a valid hex code. We recommend that you select an accent color that provides sufficient contrast against the page background color. Avoid grayscale colors (black, white and gray) that are similar to colors used for interface elements and green/red that are similar to colors used to indicate positive/negative values.|
To edit a theme, click the name of the theme you wish to edit. After making your desired edits, click Save.
When a theme is deleted, it is removed from the system and the identifier for that theme is available for use by another theme. Embedded interfaces that have a deleted theme applied will adopt the default Appian theme.
To delete a theme, find the theme that you wish to delete and click the delete icon for that row in the grid.