Apply Custom Themes to ForgeRock End User and Login UIs

Overview

The ForgeRock End User and Login UIs have a default theme that includes the logos, colors of buttons and links, and so on. This default theme applies to the entire realm. 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 them 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 that authentication journey.

  3. The following pages let you customize various aspects of the theme:

    • Styles lets you set the color of text, links, menus, buttons, and background pages.

    • Logos lets you set the logo on the login page, and other pages in the authentication journey, as well as the Favicon that is displayed for the Login and End User pages.

      Specify the URL to an image to set the Sign-in Logo and, optionally, the End User and End User Collapsed logos. Images are resized proportionately so that they are not distorted. You can resize individual logos according to where they appear in the journey. If you specify a Sign-in Logo and do not specify any of the optional logos, the Sign-in Logo is used throughout.

    • Layout lets you customize the components and layout of end-user pages:

      • For Journey pages, specify whether objects are centered, left-aligned, or right-aligned on the page, and set custom headers and footers.

        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.

      • For Account pages, specify which fields should display for end user accounts. Use this page, for example, to let users edit their passwords, trusted devices, and so on.

        The footer on this page is separate from the footer that is displayed on the Journey page. This lets you set up different buttons, links, and so on, that are displayed to a user once they have logged in.

  4. When you have completed the theme setup, click Save then Done to save the theme.

  5. To set this theme as the default theme for this realm, click …​ next to the theme, then select Set as Realm Default.

Apply a custom theme to a Journey

  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.