📘

The content on this page deals with a legacy feature of the ​Akamai​ Identity Cloud (in this case, the JavaScript SDK). If you are currently an Identity Cloud customer and are using the JavaScript SDK, that SDK is still supported. However, if you’re new to the Identity Cloud the JavaScript SDK is no longer available. Instead, you should use Hosted Login ) for your login and registration needs.

Use custom social provider buttons

The Social Login product is embedded within the Registration UI through the { loginWidget } JTL tag. Basic options for configuring the style and layout of the identity provider buttons that appear there are available in the Social Login dashboard. To fully customize the design of these buttons, you need to make the following changes:

1. Add the following JavaScript setting to your configuration:

janrain.settings.custom = true;

2. Replace { loginWidget } JTL in your signIn screen with links for each identity provider that call the trigger flow function:

<a href=""onclick="janrain.engage.signin.triggerFlow('facebook');">Facebook</a>

3. Implement custom CSS for the HTML elements you have used as links for the custom provider buttons.

Please note that while Akamai makes this customization option available, you must still follow each identity provider’s style guide when using their logos.

Use custom stylesheets

The Registration UI loads default stylesheets according the to the JavaScript settings. To include your own custom stylesheets when using the Registration UI, add the following JavaScript setting to your configuration to load your own stylesheets in addition to the default stylesheets:

janrain.settings.capture.stylesheets = ['styles/my-styles.css'];

Note that the stylesheet setting accepts an array of parameters, so it is possible to specify more than one stylesheet.

Additionally, note that the Registration UI generates some inline styles. You can disable this behavior by enabling the noModalBorderInlineCss setting:

janrain.settings.capture.noModalBorderInlineCss = true;

If you wish to completely override the styling of the Registration UI with your own stylesheets (and not load the default sheets at all), you can enable the noStyling setting:

janrain.settings.capture.noStyling = true;

However, in cases where you wish to drastically re-style and customize the Registration UI it often makes more sense to implement an API-Only version of registration.

Add mobile-specific stylesheets

If the Registration UI detects that a user is visiting your page via a mobile device, then it will load mobile stylesheets. To load your own custom mobile stylesheets, modify this JavaScript setting:

janrain.settings.capture.mobileStylesheets = ['styles/my-mobile-styles.css'];

Note that the mobileStylesheets setting accepts an array of parameters, so it is possible to specify more than one stylesheet.

Load IE-specific stylesheets

If the Registration UI detects the user is visiting the page via Internet Explorer, it can be configured to load stylesheets conditionally for IE8 and below:

janrain.settings.capture.conditionalIEStylesheets = ['ie6.css','ie7.css'];

Note that the this setting accepts an array of parameters, so it is possible to specify more than one stylesheet.

Major JavaScript SDK DOM elements

This table summarizes the major DOM (Document Object Model) elements/containers, with respect to styling. Other/minor DOM elements are discoverable on the standard reference implementation markup. Field elements are given element ids of the form 'capture_'+screenname+'_'+fieldname.

Modify modal borders

The most important thing to note when customizing your UI borders is that there is a distinction between the Social Login functionality and the Registration functionality. The difference is that Social Login houses your login buttons (e.g. buttons housing the names and logos of the identity providers you have chosen), whereas the Registration comprises the whole UI (of which Social Login is a part).

Modifying the border of your Social Login UI (i.e. the inner UI) can be done via the janrain.settings object. Setting the border color to a bright red is done like this:

janrain.settings.borderColor = '#EB0C0C';

📘

You must enter a hexadecimal color value for a color, or else your UI will throw JavaScript errors.

Here’s how to change the border’s radius (thickness) to 5 pixels:

janrain.settings.borderRadius = 5;

📘

The borderRadius attribute is always expressed in pixels (px in CSS) and carries a maximum value of 10. In addition, you may set the borderWidth value in an analogous fashion.

Altering the border of your Registration modal—the outer shell of the UI—involves one initial step: you must turn on inline CSS within the JavaScript, which enables you to set those values yourself:

janrain.settings.capture.noModalBorderInlineCss = false;

Once you have done that, you can change the border’s properties via the janrain.settings.capture object.
Here’s how to set the border width to 10 pixels:

janrain.settings.capture.modalBorderWidth = 10;

📘

This value is expressed in pixels, and carries a maximum value of 20.

Here’s how to set the border’s color to charcoal gray:

janrain.settings.capture.borderColor = '#424242';