IBM BPM, V8.0.1, All platforms > Create processes in IBM Process Designer > Create user interfaces for business processes > Building Heritage Coaches > Customize Heritage Coaches

Overriding CSS styles for selected controls and fields

You can override Cascading Style Sheet (CSS) styles to customize the appearance of a Heritage Coach.

You can create a CSS override for either the label of a Heritage Coach control or for the control itself as described in the following procedure:


Procedure

  1. Open the service that contains the Heritage Coach that you want to work with and then click the Coaches tab.

  2. In the design area, click to select the Heritage Coach control that you want to customize.

  3. Click the Customization option in the properties.

  4. Click the Add Class button.
  5. Under Class Details, type a name in the Class Name text box. By default, this field includes the name, class .

    You need to replace this text with the class name that you want.

  6. To override the CSS styles for the label of the Heritage Coach control, click the Create label override button. This creates a . class_name .twLabel {} CSS class, which is stored directly within the Heritage Coach and can be accessed as described in the following step.

  7. In the design area, click the top-level section of the Heritage Coach (named IBM BPM Coach by default) and then click the CSS option in the properties.

  8. In the CSS text box, type your CSS override settings.

    For example, the following CSS override changes the color of the label text to red and the typeface of the label text to bold: . class_name .twLabel { color:red; font-weight:bold; }

  9. To override the CSS styles for the Heritage Coach control itself, go back to the Customization properties for the selected control and click the Create control override button. This creates a . class_name .twControl { } CSS class.

  10. In the design area, click the top-level section of the Heritage Coach (named IBM BPM Coach by default) and then click the CSS option in the properties.

  11. In the CSS text box, type your CSS override settings.

    For example, the following CSS override changes the typeface of the text in the control to italic: . class_name .twControl { font-style:italic; }

  12. Save the Heritage Coach and then run the service to test the CSS overrides.

Customize Heritage Coaches


Related tasks:
Specifying a custom CSS for a Heritage Coach