Colors and other styles

The colors, backgrounds, and other styled elements of the screens are highly customizable via CSS and the Identity Cloud Console. Examples of CSS on Hosted Login screen

To customize the Hosted Login styling with your own CSS:

Step 1: Your CSS must be hosted online and retrievable via a publicly-accessible URL.

NOTE! All stylesheets must be served over HTTPS or Hosted Login will not load them.

Step 2: Add the theming.stylesheetURLs setting to your login client in the Identity Cloud Console.

See Detailed Steps

theming.stylesheetURLs setting in Console

You can load multiple stylesheets by adding each URL separated by a comma. The stylesheets are loaded in the order they appear in this list, so in the case of a conflict, the second stylesheet will override the first. theming.stylesheetURLs setting with multiple URLs in Console

NOTE! This setting replaces the default CSS with your stylesheets. If you’d prefer to to build on top of the default styles rather than start from scratch, you must include the Hosted Login base CSS first in the list of stylesheets to load.

The base CSS is different depending on which version of Hosted Login you’re using:

  • Hosted Login v1: https://v1.api.us.janrain.com/auth-ui/static/base.css (or /base-1.css)
  • Hosted Login v2: https://v1.api.us.janrain.com/auth-ui/static/base-2.css theming.stylesheetURLs setting with base URL in Console

Custom Fonts

If your stylesheets load additional fonts, you will need to add the URL where those fonts will be loaded from so Hosted Login can include them in the Content Security Policy (CSP).

To do this, add the theming.fontURLs setting to your login client in the Identity Cloud Console.

See Detailed Steps

theming.fontURLs setting in Console

Similar to the theming.stylesheetURLs setting, you can load multiple font files by adding each URL separated by a comma.

Example result of style customization on Hosted Login screen: Customized CSS on Hosted Login screen