Modify form styles and appearance

šŸ“˜

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;
  1. 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>
  1. 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.

ElementDescription
#janrainModalGeneral container for the UI.
#janrainModalOverlayBackground for the UI that pops up only when the janrain.capture.ui.modal.open(); function is called.
#returnSocialThe main body of the UI when a user who is already signed in returns to the site (i.e. when a "Welcome back"-style message is displayed).
.capture_headerThe main header of the UI (i.e. "Sign In Here").
.janrain_modal_closebuttonThe X-shaped button in the upper right-hand corner of the UI, used to close the UI.
#janrainEngageEmbedThis is the element that houses your social login UI. It houses the login buttons.
#janrainProviderPagesThis element houses the social login buttons for the identity providers that you have chosen.
.janrain-capture-ui-mobileClass appended to all screens on mobile devices.
.janrain-capture-ui-mobile-portraitClass based on portrait orientation of device.
.janrain-capture-ui-mobile-landscapeClass based on landscape orientation of device.

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';