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). To do this

Procedure

Select the Display screen's XSL tab
Click the Add XSL button
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
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
Click OK to save your changes and return to the XSL tab
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.