Advanced Branding with CSS Profiles

What are CSS profiles?

A CSS profile adjusts the look of key UI elements in sites and portals, such as headings, input fields, typography, and more by allowing you to specify a typeface and a list of CSS profile properties. 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 on the Branding page. You can create one CSS profile to standardize your look across all sites and portals, or create multiple profiles and apply different ones to different sites and portals.

For instructions on creating CSS profiles, see Create a CSS profile.

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.
• Custom typefaces: Apply different typefaces to different sites and portals.
• 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.

Typeface configuration in CSS profiles

Each CSS profile can have one typeface selected from the typefaces uploaded in the Admin Console. CSS profiles that do not have a specific typeface selected use the environment's default typeface.

Changing a CSS profile's typeface affects all sites and portals using that profile. Portals require republishing for the change to take effect.

For details on configuring typefaces per site or portal, see Typefaces in CSS Profiles. For instructions on uploading typeface files, see Custom Typefaces.

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