Customizing the Style and Aesthetics of Your Forms

How do I use custom social provider buttons?

Janrain’s 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 Janrain 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 Janrain 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 Janrain’s 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 (not load Janrain’s 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.

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 stylsheets. 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 Janrain’s 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.

Element

Description

#janrainModal

General container for the UI

#janrainModalOverlay

Background for the UI that pops up only when the janrain.capture.ui.modal.open(); function is called

#returnSocial

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)

.capture_header

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

.janrain_modal_closebutton

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

#janrainEngageEmbed

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

#janrainProviderPages

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

.janrain-capture-ui-mobile

Class appended to all screens on mobile devices.

.janrain-capture-ui-mobile-portrait

Class based on portrait orientation of device.

.janrain-capture-ui-mobile-landscape

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