How Style Is Applied

Documentation home

Introduction. 1

Style Sheets 1

Applying Style to Controls 2

Establishing Default Style Properties 2

Default Template for new Forms and Components 2

Introduction

This document explains how CSS styling is applied to controls on a page. Figure 1 below shows the basic relationships:

Any number of style sheets can be associated with a page and these styles sheets are loaded each time the page is displayed. Each form is associated with a presentation template and this contains the names of any default style sheets. Each page can be configured to override these defaults to remove style sheets or add additional style sheets as required (See Page Properties).

Applying Style to Controls

Most controls have at least one property that allows the control to be styled in some way, and some controls support many of these styling properties. Each of these properties provides two ways in which styling can be applied:

Using one or more class(es) from associated style sheets
Using inline style

In general it is good practice to include most styling in classes in style sheets and only use inline styling in exceptional circumstances. In the Form Editor, both of these options are configured using the CSS Class and Properties Dialog which is displayed when you double click on any one of these style properties. All classes from all style sheets associated with the page are available.

Establishing Default Style Properties

Rather than configuring style on every single control, it is obviously advantageous to be able to establish defaults. This is achieved using the Default Properties section of the Presentation Template Editor; this allows you to set default class and inline style properties for all controls and layouts. Note that in the Presentation Template Editor you can only use classes from style sheets that are linked with the Presentation Template.

In the Form Editor, you can choose to override any defaults, or you can revert to using the defaults at any time (See CSS Class and Style Properties for details).

Default Template for new Forms and Components

The system is supplied with a read only built-in template and style sheet both named EBASE_DEFAULT; these two are linked together. The EBASE_DEFAULT template is the default template associated with new forms and all components. This default setting can be overridden with the following properties in UFSSetup.properties:

Ufs.defaultFormPresentationTemplate – default template for new forms

Ufs.defaultComponentPresentationTemplate – default template for all components