Branding

Purpose

The Branding page in the Admin Console allows you to manage how your environment looks, including sites and portals. It is organized into the following tabs: General, Sign-In and Tempo, Typefaces, and CSS Profiles.

Access

To access the Branding page, go to the Admin Console. Then, in the left navigation menu, under System, click Branding.

Settings

All branding modifications result in an audit log message with the username of the user who made the change, the previous values, and the new values.

General

The General tab allows you to configure branding that affects the entire environment.

Environment

Configure the environment name and favicon. These settings don't apply to sites or portals.

• Environment Name: The environment name appears as the browser window title and in emails sent from the system.
• Favicon: The favicon (short for "favorite icon") is the small icon that appears in the browser tab or URL bar. Provide an ICO file with sizes 16x16 and 32x32. The favicon file must be less than 100KB. The default favicon is the Appian "A" icon.

Email

Configure the logo and colors for system-generated emails to users, such as those sent when a task is assigned or when a user is added as a participant to a post.

• Logo: The logo appears at the top of emails. The logo file should be a PNG file with a transparent background and must be less than 100KB.
• Header Color: The color of the top part of system-generated emails to users. The default value is #1d659c.
• Accent Color: The color of the navigation button in system-generated emails to users. The default value is #1d659c.

Banner

Configure a banner that displays at the top of every screen in the environment. The banner does not apply to Appian Mobile.

• Display a system-wide banner: Toggle to show or hide a banner at the top of all pages in the environment. If this toggle is selected, the following options display:
  • Message (Required) - The text to display in the banner.
  • Banner Color: The background color for the banner. The default value is #666666.
  • Text Color: The color of the text for the banner. The default value is #ffffff.

Sign-In and Tempo

The Sign-In and Tempo tab allows you to configure the logo and colors that appear on the sign-in page and in Tempo interfaces on web browsers.

Note that these branding settings do not apply to:

• Sites or portals. For site and portal branding, see Designing Sites and Portals.
• Appian Mobile. For custom branding in Appian Mobile, see the Custom Mobile Applications documentation.
• Embedded interfaces. To learn about custom styling for embedded interfaces, see Themes.

Logo

Configure the logo for the sign-in screen and Tempo.

• Image File: The logo appears on the sign-in page and at the top of Tempo. The logo is automatically resized for use in each interface. The logo file should be a PNG file with a transparent background and must be less than 100KB. The default is the Appian logo.

  Note:  A different, smaller Appian logo displays at the top of interfaces in sites, portals, and Tempo. This logo is not configurable.

• Alternative Text: The alternative text is used for the logo's alt attribute and announced by screen readers in Tempo. The value should describe the logo to visually impaired users, including any text that is part of the logo. The default is Appian.

Colors

Configure colors for the sign-in screen and Tempo.

• Primary: The color of the navigation bar in Tempo and one side of the sign-in screen. The default value is #416b88.
• Background: The color surrounding the main content area in Tempo and one side of the sign-in screen. The default value is #ebf1f7.
• Accent: Affects the color of many elements in all interfaces, including buttons, links, active field border colors, milestone bars, section titles, etc. Avoid grayscale colors (black, white, and gray) that are similar to colors used for interface elements and avoid green/red colors that are used to indicate positive/negative values. The default value is #1d659c.
• Loading Bar: The color of the bar at the top of the page that indicates when the system is processing. The default value is the accent color.
• Tempo Navigation Label: The color of the navigation labels in the header bar of Tempo. The default value is #ffffff.
• Tempo Navigation Highlight: The color of the navigation labels when a user hovers over the label with the cursor. Also, the color of the underline that indicates which navigation label is currently selected. The default value is #f8e85b.
• Tempo Filter Group Title: The color of the title that appears above the filter groups in the left navigation pane (for example, "Status" on the Tasks tab). The default value is #222222.

Typefaces

The Typefaces tab allows you to upload and manage custom typefaces for sites and portals on both web and mobile. The default typeface is Open Sans. See Custom Typefaces for more information.

If CSS profiles are available in your environment, you can configure different typefaces for individual sites and portals. See Typefaces in CSS Profiles.

Up to nine typefaces can be added. One typeface is designated as the default and applies to all sites and portals unless a CSS profile specifies a different typeface.

To add a custom typeface:

1. Click Add Typeface.
2. Enter the name of the typeface.
3. Add WOFF, WOFF2, OTF, or TTF files for each weight.
4. (Optional) If additional sets of files are needed for other languages, click Add another language group.
5. Click OK.

To select a default typeface:

1. In the typefaces grid, select a typeface in the Default column. The preview updates to show the selected typeface.
2. Click SAVE CHANGES.

To view the updated typeface:

• Site and interface objects: Refresh the page.
• Portals: Republish the portal.
• Appian Mobile: Sign out and sign back in.

CSS Profiles

The CSS Profile tab allows you to create CSS profiles to adjust the look of key UI elements in sites and portals, such as headings, input fields, typefaces, and more. Each CSS profile contains a list of properties and a typeface selection, which together control the look of UI elements.

Create a CSS profile

You can create one CSS profile to standardize your look across all sites and portals, or create multiple profiles for different use cases.

To create a CSS profile:

1. In the Admin Console, go to the Branding > CSS Profiles tab.
2. Click Add profile.
3. For Name, enter a name for the CSS profile.
4. To use this profile as the default for all sites and portals, select Set as default for sites and portals.
5. In the Typeface dropdown, select a typeface to apply to sites and portals that use this profile.

6. In the text field, enter your CSS profile properties using the format property-name: value, with each property on a separate line. For a full list of available properties, see CSS profile property reference table.

   Note:  You don't need to provide a value for every property in a CSS profile. Properties that you don't include retain their standard Appian values.

7. Click OK to close the dialog.
8. Click SAVE CHANGES.

See Usage considerations for CSS profiles for details about configuring CSS profiles.

Feedback