Setting a CSS Class at the Pane Level

Setting a CSS class at the pane level is much like doing so at the form level. As with the form, the General tab of the Properties view is used, but this time, it is the Properties view for the pane, not the entire form.

You can set the CSS class at the pane level for the Record no-fault claim details form.

Procedure

  1. Click the name of the pane in the Outline view to open the Properties view for the pane. In this case, select the claimant pane by clicking Claimant (NoFaultClaimField) in the Outline view:
  2. In the General tab of the Properties view for the Claimant pane, type into the Style Class Name(s) text field the name of the CSS class within the claims.css file that contains the rules you want applied to the pane. In this case, type highlight in the Style Class Name(s) text field.
  3. The style defined in the claims.css file in the class .claimtheme .highlight will be applied to the Claimant pane. This CSS class defines a background color, border style, and border width: 
    .claimtheme .highlight {background-color: #AAFFAA; border-style: solid; border-width: 2px;}
  4. Preview the form to see the effect of applying the style to the Claimant pane.

    Note that the background color for the Claimant pane is a darker shade of green that that of the overall form.

Next topic: Setting a CSS Class at the Control Level
Previous topic: Setting a CSS Class at the Form Level