Styling Extensions

Most components in an Intelligent Advisor interview can be easily restyled. This enables you to unify the interview appearance with your corporate look and feel.

Intelligent Advisor interviews are restyled through the use of a "style" extension on the OraclePolicyAutomation.AddExtension object. A style extension is a JavaScript object that specifies styling customizations for the supported interview components.

For full control, you can supply a CSS className field that defines all styling for the specified component. Note that specifying a custom CSS class name implies adding a custom CSS file to the interview, though this can also be used for leveraging styles of a page that an interview is embedded in.

Alternatively, if you want to make minor changes to the current styling, and style changes are limited to changing a small set of styles, you can modify the current styling of components using the style field. The following visual style properties can be overridden: color, backgroundColor, padding, margin, display, border, cursor, fontFamily, fontSize, fontWeight, and textDecoration.

When using style extensions, the existing component layout and behavior is retained.

Only a single style extension will be accepted for any given interview, so all restyling needs to be done in the one extension. 

OraclePolicyAutomation.AddExtension({
    style: {
        textInput: {
            className: "my-text-input"
        }
    }
}); 

For information on how to write style extensions for interviews and controls, see Interview Extensions Reference.