Customize the Appearance of the UI

Janrain’s Registration solution comes pre-styled and, if we say so ourselves, they look quite nice. Nonetheless, your use case might require aesthetic customization. Here, we’ll walk you through customizing your Registration UI both by utilizing methods on the janrain.settings.capture object, but also from scratch using CSS.

Note: The following modifications should be made to the janrain-init.js configuration file that you receive as part of your standard registration deliverable.

Custom 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 would be 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';

Customizing Other Aesthetic Elements

In addition to borders, a wide variety of other aesthetic elements can be customized using the janrain.settings object. A comprehensive list of those potential customizations can be found on the Registration JS API page of our Reference section.

Customizing From Scratch

One way to customize a UI, as shown above, is to do so via the janrain.settings JavaScript object, specifically by setting the value of the noStyling attribute to true in your janrain-init.js (or analogous file):

janrain.settings.capture.noStyling = true;

You will also need to turn off inline CSS in the modal:

janrain.settings.capture.noModalBorderInlineCss = true;

The default stylesheet for Registration UI is housed at styles/janrain.css (janrain-mobile.css for mobile web) in the standard deliverable. In your initialization JavaScript, you will see the following:

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

If you want to substitute your own stylesheets, you need to change the values of these two arrays. Here’s an example:

janrain.settings.capture.stylesheets = ['css/user_registration.css'];
janrain.settings.capture.mobileStylesheets = ['css/mobile_user_registration.css'];

You can even include a conditional stylesheet for use with Internet Explorer:

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

Please do note that removing all default styling will significantly alter the appearance of your UI. We recommend not removing all styling unless you are committed to completely revamping the UI’s aesthetic. And if you find yourself in need of thoroughgoing changes, it is advisable that those changes be made in conjunction with our professional service representatives.

Once you’ve undone all default styling, you can begin customizing the various DOM elements associated with your registration UI. The outer wrapper for the UI has an ID of janrainModal. If you’d like to, say, make the background navy blue (#0B0B3B as a hexadecimal color code) and use Verdana as your font, you could do so like this:

#janrainModal {
  background-color: #0B0B3B;
  font-family: Verdana;
}

With the defaults turned off, you can simply style the UI like you would style anything else. More on that in the next section.

Important DOM Elements

If you decide to style a registration UI on your own, the sky’s the limit. But there are a few things of which you should be aware. Most importantly, we thought it would be helpful to provide a list of some of the default DOM elements that you may want to consider targeting with CSS:

Element id/class 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 buttonn 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

Other elements in need of styling can be determined via scanning the HTML templates provided as part of your standard deliverable.