CSS Integration

The look and feel of the User Registration GUI is highly customizable. The style of the widget UI is configured using the User Registration Widget JS API settings. A master list of JavaScript settings is provided, but the focus of this topic is design.

User Registration can be customized in two ways:

Both CSS files may be found here: https://gist.github.com/4458727

Step 1: Including the CSS

The CSS is included by adding the following JavaScript settings:

Field Description
janrain.settings.capture.stylesheets Set to the name of the CSS stylesheet to use with the widget. The widget waits for a stylesheet to load before displaying any widget content to avoid any graphic ugliness.
janrain.settings.capture.conditionalIEStylesheets The conditionalIEStylesheets load those stylesheets only if the end user is browsing with IE8 or earlier.
janrain.settings.capture.mobileStylesheets These stylesheets are loaded only if the end user is browsing on a mobile device.

Step 2: Configuring Settings

This step is optional. Several JavaScript settings are provided to tweak widget elements and behavior not addressed in the CSS. Border width, radius, opacity and more may be changed.

A master list is provided in the Settings section of the Registration JS API topic, under “Modal Options.”

Styles Included in CSS

The following are a selection of settings included in the default.css and default-mobile.css files:

Section Description
MODAL SCREENS Styles for screens that are in a modal.
MODAL CLOSE CONFIRMATION Styles for screen that shows if there is a confirmation of closing a modal.
GENERAL Basic styles for all screens.
FORM ELEMENTS Input, select, radio, checkbox, textarea, etc.
BUTTONS Button styling/coloring.
DATA DISPLAYS Styling for public profile data.
PUBLIC/PRIVATE PROFILE TOGGLES Public/private profile toggle styling for edit profile screen.
ADDRESS, NAME, DATE BLOCKS Formatting for built in address, name and date blocks.
DATE PICKER Date picker styles.
TABS Tab styles.
LINKED ACCOUNT LIST Linked account list styles.
RECAPTCHA Recaptcha styling.
PHOTO MANAGER Styles for displaying, uploading, cropping and removing profile photos.
SCREEN SPECIFIC Screen-specific styling.
MERGE ACCOUNTS Merge account screen styling.