The colors, backgrounds, and other styled elements of the screens are highly customizable via CSS and the Identity Cloud Console.
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.
theming.stylesheetURLs
https://mysite.com/style/login.css
It may take several minutes for your changes to be reflected in Hosted Login after you update a 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.
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:
https://v1.api.us.janrain.com/auth-ui/static/base.css
(or /base-1.css
)https://v1.api.us.janrain.com/auth-ui/static/base-2.css
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.
theming.fontURLs
https://mysite.com/style/font.woff
It may take several minutes for your changes to be reflected in Hosted Login after you update a 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: