Configure Interview Styling Extensions for Oracle Policy Automation

You can style Oracle Policy Automation (OPA) interviews to unify the appearance with your corporate look and feel.

You can configure the following CSS class selectors in the design.css file. All of these class selectors have the prefix “scs-opainterview-”.

Each class defines all styling for the specified component. The class has full control, and the existing OPA style won't be used.

Selector Applies to Description
interview interview The interview region comprises the entire interview content, including the header, footer and navigation area.
interviewContent interview content The interview content region includes the screen title and controls but excludes the header, footer and navigation area.
screenTitleBlock screen title block The screen title block composes the region that includes the screen title as well as any other widgets that are contained in that row, such as the screen drop-down list and/or next and back buttons.
screenTitle screen title The screen title region is just the region containing the screen title.
nextButton next button The next button.
backButton back button The back button.
restartButton restart button The restart button.
exitButton exit button The exit button.
header header The header region.
footer footer The footer region.
question question text Styling for question text.
control container for controls Styling for the element that contains controls.
label label control Styling for label controls.
controlError all controls Styling for error text container.
controlErrorText all controls Styling for error text span.
textInput single line text box, password and masked Styling for text input controls.
textAreaInput multi-line text box Styling for multiline text input controls.
calendarInput calendar Styling for calendar input controls. Supports an iconColor field that allows the color of the calendar icon to be changed, and  a keepIcon field that indicates whether the calendar icon should be displayed.
dropDownInput drop-down list Styling for drop-down list input controls.
filterDropDownInput filtered drop-down list Styling for filtered drop-down list input controls. Supports an iconColor field that allows the color of the drop-down arrow to be changed.
listInput fixed list Styling for fixed list input controls.
radioInput radio buttons Styling for radio button input controls. They can be styled with borderColor and fillColor options. The iconType property can change the type of icon used. Currently 'tick' and 'fill' are the only supported alternate options.
checkboxInput checkbox Styling for checkbox input controls. They can be styled with borderColor and fillColor options. The iconType property can change the type of icon used. Currently 'square' and 'fill' are the only supported alternate options.
autoCompleteInput custom search Styling for the autocomplete field when a customSearch extension is used.
captchaInput CAPTCHA input field Styling for the input field that the user is entering the CAPTCHA into.
signatureInput signature control Styling for signature controls. Supports an additional inkColorfield that allows changing the pen ink for the signature.
explanationHeader explanation control Styling for the top level expandable header for explanation controls.
explanationText explanation control Styling for the expanded explanation control text.
signatureClearButton signature control Styling for the clear button on a signature control.
uploadAddButton upload control Styling for the add button on the upload control.
entityRemoveButton entity collect control The entity collect control.

Examples with Style Extensions Defined in design.css

.scs-opainterview-interviewContent {
   background-color: beige;
}
.scs-opainterview-screenTitleBlock {
   background-color: bisque;
}
.scs-opainterview-screenTitle {
    font-style: italic;
    font-size: 20px;
}
.scs-opainterview-nextButton {
    color: darkgreen;
}
.scs-opainterview-backButton {
    color: crimson;
}
.scs-opainterview-question {
    color: green;
}
.scs-opainterview-control {
    background-color: cornflowerblue;
}
.scs-opainterview-label {
    color:aqua;
}
.scs-opainterview-textInput {
    color: red;
    cursor:crosshair;
}
.scs-opainterview-radioInput {
    background-color: pink;
}
.scs-opainterview-checkboxInput {
    cursor: pointer;
}