Customizing the Style and Aesthetics of Your Forms

Important. 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.

How do I 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 trriggerFlow function:
<a href="javascript:void(0);"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.

The identity provider names that may be passed into the triggerFlow function are listed under the Provider String Specifier column of the Identity Providers table. Please note that while Akamai makes this customization option available, you must still follow each identity provider’s style guide when using their logos.

How do I use my own 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 stylesheets 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.

Note. Click here for information on using stylesheets with Hosted Login.

How do I add mobile-specific stylesheets?

If the Registration UI detects that an 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.

How do I 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.

What are the major DOM elements?

This table summarizes the major DOM 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.




General container for the UI


Background for the UI that pops up only when the; function is called


The 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)


The main header of the UI (i.e. "Sign In Here")


The X-shaped button in the upper right-hand corner of the UI, used to close the UI


This is the element that houses your social login UI. It houses the login buttons


This element houses the social login buttons for the identity providers that you have chosen


Class appended to all screens on mobile devices.


Class based on portrait orientation of device.


Class based on landscape orientation of device.

How do I 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';
Note. 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;
Note. 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;
Note. 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';