Setting a CSS Class at the Form Level

There are three levels at which you can set a CSS class on a form. You can set the CSS class at the form level for the Record no-fault claim details form.

The levels are:

  • At the form level
  • At the pane level
  • At the control level

Procedure

  1. Click the tab so that the form is visible in the Editor view, if it’s not already so.
  2. Make sure that the General tab is selected in the Properties view.
  3. Type the class name claimtheme in the Style Class Name(s) text field, omitting the leading dot:
  4. Save the form by clicking the Save icon, clicking File > Save, or typing the keyboard command Ctrl+S.
  5. Click the GI Preview tab to see the result of applying the CSS class. Notice the appearance of the background and border:
  6. If you wish, experiment by making changes to the claims.css file. Double-clicking claims.css in the Project Explorer opens the CSS file in the Editor view, where you can make and save changes to the file. Try changing, for example, the RGB value for the background color, using hexidecimal values. Here is the hex value for a shade of light blue: #B0E2FF. To use this light blue as a background at the form level, edit the claimtheme class in the CSS file as follows: 
    .claimtheme {background-color: #B0E2FF; border-style: solid; border-width: 3px; padding: 4px;}
.claimtheme .pane-label {background-color: #BBFFBB;}

    At the form level, the background now appears in light blue. Because of the second line of the CSS file, which defines a different background color for the label, the background color for the label is still green:

Next topic: Setting a CSS Class at the Pane Level
Previous topic: Assigning a CSS Class to a Form