Customizing CSS Styles

About this task

The Display editing screen's XSL dialog enables you to add XSL templates that you can use to override low-level characteristics of a display that are not editable elsewhere.

If you would like more control over the style of your application, you may add your own styles with Cascading Style Sheets (CSS).

Procedure

  1. Select the Display screen's XSL tab
  2. Click the Add XSL button
  3. Select CSS from the list of XSL templates that you can modify

    As shown in Figure 1.

    Figure 1. Customizing CSS in Your Display

    Two empty CSS templates are provided for adding custom styles - Theme - Main and Theme - Extra. The Theme template can be used to define an overall application theme while the Extra template can be used if you have applications that inherit from a master application.

    Once you have selected the CSS Style template associated with the portion of the display that you want to edit or override

  4. Click Add Component.

    An editable area with any existing CSS code for the selected template displays.

    After adding any CSS or modifying the existing CSS displayed on this screen

  5. Click OK to save your changes and return to the XSL tab
  6. Click Apply to save your changes and continue editing

    Or click Cancel to discard any changes that you have made since the last time that you applied your changes (if any) and return to the XSL tab.

Results

To proceed with this tutorial, click Customizing Markup.