Identity Cloud

Customize Identity Cloud end-user and login UI themes

Overview

Identity Cloud realms have a default theme that includes the colors of buttons and links, typefaces, and so on. This default theme applies to the end-user and login UIs. You can add custom themes so that your end users are presented with screens specific to their authentication journey.

Custom themes let you create a different look and feel for each brand that you support, including different profile page layouts, logos, headers, and footers.

A theme is followed throughout an authentication journey. This means that if a user logs in through the Login UI with a specific theme, the remaining pages in the journey will have that same theme.

Add a custom theme

In the Identity Cloud admin UI:

  1. Select Hosted Pages > + New Theme.

    You can also duplicate an existing theme by clicking next to the theme you want, then selecting Duplicate.

  2. Enter a theme name that describes the theme’s purpose; for example, the brand associated with an authentication journey.

  3. Use the tabs and options to customize various aspects of the theme:

    Tab Option What You Can Customize

    Global

    Styles

    Colors of the text, links, menus, buttons, and background pages across all journey and user account pages

    Favicon

    Favicon logo displayed for all journey and account pages

    Settings

    Theme name and linked trees

    Journey Pages

    Styles

    Colors of the text, links, menus, buttons, and background pages of authentication and registration journey pages

    Logo

    Logo to display on sign-in and registration pages

    Layout

    Layout of the authentication and registration journey pages, including custom headers and footers

    Account Pages

    Styles

    Colors of the text, links, menus, buttons, and background pages of customer-facing pages, such as account profile and dashboard

    Logo

    Logo to display on customer-facing pages

    Layout

    Layout of customer-facing pages, including custom footers; categories of information that appears on the account profile page

Apply a custom theme to a journey

In the Identity Cloud admin UI:

  1. Select Journeys, then select the journey to which you want to apply the custom theme, and click Edit.

  2. Click …​ > Edit Details then select Override theme.

  3. Select the custom theme that you want to apply to this journey, then click Save.

Theme definitions and the mappings between authentication journeys and themes are stored in Identity Cloud as configuration objects. They are therefore "static" in terms of Identity Cloud promotion. If you add a new theme or logo, your change must go through the promotion process. Theme selection can be dynamic, however. If you set a theme in a page node during a journey, for example, by setting stage var themeID=myTheme, that theme is applied dynamically for the remainder of the journey.

Custom headers and footers

Each theme lets you configure localized custom headers and footers:

Header Footer

Journey pages

Account pages

n/a

Headers and footers can take HTML or inline CSS to insert links, classes, and so on. Scripting is not currently supported in headers and footers.

The account footer is separate from the journey footer. This lets you set up different buttons, links, and so on, that are displayed to a user after they log in.

Enable headers and footers for a theme

  1. In the Identity Cloud admin UI, go to Hosted Pages, then select a theme.

  2. Select either Journey Pages or Account Pages.

  3. In the panel on the right-hand side, click Layout.

    1. Find the Header section (journey pages only), then enable the switch.

    2. Find the Footer section, then enable the switch.

Edit headers and footers

  1. Follow the steps above to find the appropriate Header or Footer section, then click the preview to open the editor.

  2. If you do not need localized content, edit the HTML as appropriate, then go to step 4.

  3. If you need localized content:

    1. See Localize headers and footers to add as many locales as you need.

    2. Use the locale selector to change locales, and edit the HTML in each locale as appropriate.

  4. Click Save.

Localize headers and footers

  1. Follow the steps above to find the appropriate Header or Footer section, then click the preview to open the editor.

  2. To add an initial locale for the existing header or footer content:

    1. Click + Specify a Locale to open a secondary modal.

    2. In the Add a Locale secondary modal, enter a locale identifier; for example, fr (French), or fr-ca (French - Canada).

    3. Click Add to add the locale and close the secondary modal.

    4. The + Specify a Locale link will now be replaced by a locale selector, with the new locale preselected.

  3. To add an additional locale:

    1. Click the locale selector, then click + Add Locale to open a secondary modal.

    2. In the Add a Locale secondary modal, enter a locale identifier; for example, es (Spanish), or es-ar (Spanish - Argentina).

    3. Click Add to add the locale and close the secondary modal.

    4. The new locale will now be available in the locale selector, and be preselected. The header or footer content for the new locale will be a copy of the header or footer content from the initial locale.

    5. Translate the header or footer content for the new locale.

  4. Repeat step 3 for as many locales as you need.

  5. Click Save.

Copyright © 2010-2022 ForgeRock, all rights reserved.