Advanced Branding with CSS Profiles

What are CSS profiles?

A CSS profile is a list of properties that allow you to adjust the look of key UI elements in sites and portals, such as headings, tooltips, and labels. You can map your organization's specific design guidelines to these properties to ensure your applications look and feel like your brand.

CSS profiles go beyond standard branding options available in site, portal, and interface objects by giving organizations direct control over certain UI elements using CSS-based properties.

CSS profiles are configured in the Admin Console under the Branding section. You can create one CSS profile to standardize your look across all sites and portals, or create multiple profiles for different use cases.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

Why use CSS profiles for branding?

CSS profiles allow organizations to fine-tune their sites and portals to more closely match their unique design guidelines.

CSS profiles provide the following advantages:

• Consistent brand identity: Apply your unique brand identity consistently across your ecosystem.
• External portal branding: Control portal styling to match your external design guidelines.
• Flexibility: Create separate CSS profiles for different use cases and apply them individually to sites and portals. For example:
  • Apply different branding to internal sites and customer-facing portals.
  • Maintain distinct branding for multiple product lines within the same environment.
  • Support separate branding for different business units.

Usage considerations for CSS profiles

Review the following behaviors and limitations so you understand them when configuring CSS profiles.

Content affected by CSS profiles

CSS profiles affect:

• Pages in a site or portal: All pages in a site or portal will use the CSS profile set in the site or portal object.
• The user settings menu: This menu uses the CSS profile of the site it was accessed from.

How default CSS profiles work

Every environment has one CSS profile designated as the default. This profile applies to any site or portal object that has Default selected in its CSS Profile branding section.

Fallback behavior

If you delete the default CSS profile or deselect the Set as default for sites and portals checkbox, the standard Appian profile becomes the new default.

Automatic behavior

New site and portal objects automatically use the default CSS profile. If you select a different profile, the site or portal uses the selected profile until it is changed or deleted.

Mobile support

CSS profiles do not apply to the Appian Mobile app. In the mobile app, sites always use the standard Appian profile.

CSS profile changes require republishing portals

After adding or changing a CSS profile, you must republish any portals for the changes to take effect.

Accessibility of CSS profiles

When configuring CSS profiles, keep in mind that you should maintain accessibility standards, such as sufficient contrast between foreground and background elements.

Maximum number of CSS profiles

You can have up to 500 CSS profiles in an environment.

Feedback