Colors and other styles
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.
- Navigate to MANAGE PROPERTIES
- Find your login client in the list of properties; Click the Actions menu ( ) and select Edit
- Click the EDIT SETTINGS button at the bottom of the Settings section
- Click the Add Setting icon (
). This will add a new line to the bottom of the list. - Type or paste in the new setting name:
theming.stylesheetURLs - Click on the Create theming.stylesheetURLs. popup
- Add the URL for your CSS file as the setting value
- Example value:
https://mysite.com/style/login.css
- Example value:
- Click the Save icon (
)
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:
- 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
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.
- Navigate to MANAGE PROPERTIES
- Find your login client in the list of properties; Click the Actions menu ( ) and select Edit
- Click the EDIT SETTINGS button at the bottom of the Settings section
- Click the Add Setting icon (). This will add a new line to the bottom of the list.
- Type or paste in the new setting name:
theming.fontURLs - Click on the Create theming.fontURLs. popup
- Add the URL for your font file as the setting value
- Example value:
https://mysite.com/style/font.woff
- Example value:
- Click the Save icon ()
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:
