ForgeRock Identity Platform 7.3

Customize end-user and login UI themes

Overview

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 the screens displayed to the end users are specific to their authentication journey.

Custom themes let you create a different look and feel for each brand 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 use the same theme.

Add a custom theme

In the Identity Platform admin UI:

  1. Select Hosted Pages > + New Theme.

    Duplicate an existing theme by clicking next to the theme, 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 appear on the account profile page

Apply a custom theme to a journey

In the Identity Platform admin UI:

  1. Select Journeys, then select the journey for the custom theme, and click Edit.

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

  3. Select the custom theme to apply, then click Save.

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 Platform 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 in Enable headers and footers for a theme 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. Follow the steps in 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 in Enable headers and footers for a theme 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 is replaced by a locale selector, with the new locale preselected.

  3. To add another 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 is now available in the locale selector, and is preselected. The header or footer content for the new locale is a copy of the header or footer content from the initial locale.

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

    Repeat the steps to add as many locales as you need.

  4. Click Save.

Copyright © 2010-2024 ForgeRock, all rights reserved.