Styling

The built in styling tools for the Janrain Registration UI are powerful, and can be used to significantly customize the UI presented to the user. The appearance is governed by a CSS file, and JavaScript commands provided to adjust configurations not covered by the style sheet. The methods listed here are best practice for changing the appearance of your UI.

Out of the box (widgets.css)

The Registration solution comes with our Standard Registration Flow style library, called widgets.css (documented on the CSS Integration page). Loaded through JavaScript without any settings, this CSS file defines basic, structural styling that the UI requires. We highly recommend using this structural styling; however, there is a JavaScript setting to remove it if you wish.

Extend (default.css)

As an extension to the library, there are an array of stylesheets that can be loaded through JavaScript settings. For this type of customization, we provide a default.css. We recommend starting with our default.css to add and remove any necessary styling for your specific Registration flow.

default.css acts as a base stylesheet, providing styling and coloring to elements within your Registration solution.

Mobile (default-mobile.css)

Included through JavaScript settings are mobile specific stylesheets. We provide a default-mobile.css (documented on the CSS Integration page) that helps normalize screens on mobile devices.

Mobile-specific classes are added to screen markup to allow for mobile-specific styling.

Class Description
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.

Internet Explorer (IE)

There is also a JavaScript settings to load IE-specific stylesheets. While our default library gets an IE specific stylesheet loaded out of the box, the default.css extension does not. You may add one using the setting if needed.

IE stylesheets target IE 8 and below.

CSS Integration

For technical information on the CSS file and JavaScript commands used to style the UI, please refer to the CSS Integration topic.

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