Identity Cloud

Customize Identity Cloud end-user and login UIs

If you choose to present pages to end users by selecting the hosted pages UI integration option, customize the Identity Cloud provided pages with themes.

Themes allow you to customize the look of login and Identity Cloud admin UI pages, the information presented to end users, and the actions they can take when logged into the Identity Cloud End User UI.

Notes on themes:

  • 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 logos, favicon, headers, footers, and the actions and information end users can see in the Identity Cloud End User UI.

  • 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.

custom theme overview

Add a custom theme

In the Identity Cloud admin UI:

  1. Select Hosted Pages > + New Theme.

    Duplicate an existing theme by clicking next to the theme you want, then select 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

    You can customize:

    • Brand Colors: This includes colors for buttons, checkboxes, switches, high-level alert actions, and success actions.

    • Typography: The font applied to all journeys and customer-facing pages.

    • Buttons: The colors of buttons and their radius.

    • Links: The color of links, including when you hover over them and the option to bold all links.

    • Switches: The background color.

    Favicon

    Favicon logo displayed for all journey and account pages. You can localize the favicon. For details, refer to Localize the favicon and theme logo.

    Settings

    The theme name and any journey(s) using this theme.

    From this screen, you can select journeys to apply to your theme.

    Journey Pages

    Styles

    You can customize:

    • Page Background: This includes the color of the journey background as well as a background image (optional).

    • Sign-in Card: The sign-in card is where end users enter their credentials. This includes the card colors, field colors, card shadow, border radius, and if the input text labels should float.

    • Global Styles: These are the styles you set in the Global tab. Modifying this section from the Journey Pages updates the Global tab styles.

    Logo

    Logo to display on sign-in and registration pages. The displaying of the logo is optional. You can localize the logo. For details, refer to Localize the favicon and theme logo.

    Layout

    This includes:

    • Layout: The position of the sign-in card on the page.

    • Button Position: The position of the button inside the sign-in card.

    • Header and footer: Place a header above or a footer below the sign-in card.

    Account Pages

    Styles

    This includes customizing the colors of:

    • The left end-user Navigation pane.

    • The Top Bar where the user logs out.

    • The Page Styles that present user information.

    • The Cards that are contained within the page that display various information.

    • Global Settings: These are the styles you set in the Global tab. Modifying this section from the Account Pages updates the Global tab styles.

    Logo

    Logo to display on customer-facing pages

    Layout

    Layout of customer-facing pages. This includes custom footers and categories of information that appears on the account profile page. Select the data you want to appear to an end user. For more information, refer to configure actions and information for end users.

  4. Configure the new theme as the default theme for the realm:

    The default theme is the theme that is used when you do not apply a specific theme to a journey.

    1. From the Identity Cloud admin UI, go to Hosted Pages.

    2. From the list of themes, select the ellipsis (…​).

    3. Select Set as Realm Default.

To localize the favicon or theme logo:

  1. On the Global, Journey Pages, or Account Pages tabs, click the Favicon or Logo tabs from the right pane.

  2. Click the favicon or logo .

  3. Click + Specify a Locale.

  4. In the Locale field, enter the ISO 639-1 (2 letter country code) for the language. For example, for French the value would be fr.

  5. Click Add.

  6. In the Favicon URL field or the Logo URL field, enter the URL for the favicon or logo.

    The images must be publicly accessible.
  7. To set alternative text for the logo, in the Alt Text field, enter alternate text.

  8. Click Update.

  9. Click Save.

Apply a custom theme to a journey

In the Identity Cloud admin UI:

  1. Select Journeys.

  2. Select the journey to apply the custom theme.

  3. Click Edit.

  4. Click ... > Edit Details.

  5. Select Override theme.

  6. 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 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. Refer to 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.

Click to display an example
custom theme locale headers footers
Figure 1. Specify a locale in headers and footers

Configure actions and information for end users

You control the information that is displayed and the actions end users can take from the Identity Cloud End User UI.

The information and actions are broken out into the following sections:

Manage visible information and end user actions

Your end users can only see the information and take actions that you configure.

To configure the information users can see and the actions they can take:

  1. From the Identity Cloud admin UI, go to Hosted Pages.

  2. Select a theme or click + New Theme.

    If you create a new theme, enter a Name for the theme and click Save.

  3. Select Account Pages from the top tabs. This refers to the Identity Cloud admin UI pages.

  4. In the tabs that display on the right pane, select Layout.

  5. The Profile Information section dictates the actions and information end users can see. Select or deselect any of the following:

    Profile page component Description

    Personal Information

    Enable to allow the end user to view their attributes and update them. The attributes that display depend on settings at the property level. For more information, refer to manage attributes end users can view and update.

    Sign-in & Security

    Enable any of the following:

    • Password - Allow end users to update their password. Uses an existing session. This correlates to the default journey UpdatePassword.

      To change the journey used for password updates:

      1. From the Identity Cloud admin UI, select Native Consoles > Access Management.

      2. From the left navigation pane, click Services.

      3. Select Self Service Trees.

      4. In the updatePassword field, enter the name of the journey.

      5. Click Save Changes.

    • Security Questions - Allows end users to reset their security questions on their profile.

    • 2-step verification - If an end user has registered a device for second-factor/MFA, this displays as enabled.

      If enabled, an additional Change button displays to end users. End users can select this to rename their device(s) or delete their device(s) from Identity Cloud.

    Social Sign-In

    Allows end users to view the social providers that have authenticated with, such as Google or FaceBook.

    Trusted Devices

    Allows end users to view the devices that have been used to login to their account. End users can update the name of the device.

    Authorized Applications

    Allows end users to view and manage the applications that have access to their personal information.

    Preferences

    Allows end users to view and set preferences for communication. For example, an end user can select if they would like to receive emails regarding special offers and services.

    Consent

    Allows end users to view and manage how their data is shared with third parties.

    Account Controls

    Allows end users to download the data Identity Cloud has about them in a JSON format and allows end users to delete their account (identity).

  6. Click Save.

Manage properties end users can view and update

When an end user logs into the Identity Cloud End User UI and selects Profile > Edit Personal Info, their profile data in Identity Cloud displays.

When you enable end user’s personal information from the theme, all the Identity Cloud properties are marked as User Editable. This means that end users can view and update most of their data in Identity Cloud. However, you may or may not want users to see all of their data.

For example, if you are not using all the properties available to you in Identity Cloud to store data for your end users, you might want to hide the unused properties for your end users, to decrease confusion and clutter.

To disable user properties from displaying to an end user, follow these steps:

  1. From the Identity Cloud admin UI, select Native Consoles > Identity Management.

  2. Select Configure > Managed Objects from the top tabs.

  3. The user object to update, such as Alpha_user or Bravo_user.

  4. From the Properties tab, select the property to modify.

  5. From the properties screen, under the Details tab, select Show advanced options.

  6. Disable the User Editable radio button.

  7. Click Save. The property is now hidden from the end user.

  8. Repeat steps 5-7 for every property you want to hide from the end user.

Click to display an example

The following example shows:

  1. The Description property being visible to the Identity Cloud End User UI.

  2. Going to the IDM admin UI and disabling the User Editable field for the Description property.

  3. Going back to the Identity Cloud End User UI, refreshing the page, and showing that the Description property no longer displays to the end user.

disable user properties from end user
Copyright © 2010-2023 ForgeRock, all rights reserved.