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:
-
Select Hosted Pages > + New Theme.
Duplicate an existing theme by clicking next to the theme, then selecting Duplicate.
-
Enter a theme name that describes the theme’s purpose; for example, the brand associated with an authentication journey.
-
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:
-
Select Journeys, then select the journey for the custom theme, and click Edit.
-
Click … > Edit Details then select Override theme.
-
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
-
In the Identity Platform admin UI, go to Hosted Pages, then select a theme.
-
Select either Journey Pages or Account Pages.
-
In the panel on the right-hand side, click Layout.
-
Find the Header section (journey pages only), then enable the switch.
-
Find the Footer section, then enable the switch.
-
Edit headers and footers
-
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.
-
If you do not need localized content, edit the HTML as appropriate, then go to step 4.
-
If you need localized content:
-
Follow the steps in Localize headers and footers to add as many locales as you need.
-
Use the locale selector to change locales, and edit the HTML in each locale as appropriate.
-
-
Click Save.
Localize headers and footers
-
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.
-
To add an initial locale for the existing header or footer content:
-
Click + Specify a Locale to open a secondary modal.
-
In the Add a Locale secondary modal, enter a locale identifier; for example,
fr
(French), orfr-ca
(French - Canada). -
Click Add to add the locale and close the secondary modal.
-
The + Specify a Locale link is replaced by a locale selector, with the new locale preselected.
-
-
To add another locale:
-
Click the locale selector, then click + Add Locale to open a secondary modal.
-
In the Add a Locale secondary modal, enter a locale identifier; for example,
es
(Spanish), ores-ar
(Spanish - Argentina). -
Click Add to add the locale and close the secondary modal.
-
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.
-
Translate the header or footer content for the new locale.
Repeat the steps to add as many locales as you need.
-
-
Click Save.