Styling screen components

Screen Layout

Screen Structure

Screen Design

Problem

How can I style the various types of screen components?

Solution

1 Components without prefixes

Components without prefixes are components that have a single style which tells the component how it must be rendered. It can be identified in the style tab of the component as shown in the figure below.

Figure 1: style tab of a component without prefixes

Styling these components is easily done by choosing the appropriate style from common style dropdown.

In addition the user is allowed to reference a css class which will be applied on the component. The key for the class reference is 'class'. In the value part the actual name of the css class must be given.

2 Components with prefixes

Some components have prefixes for styles. If a prefix is selected the common style selection is applied to a sub section of the component. For example the 'Radiobutton List' component is a component with prefixes for styles. The component allows the user to apply special styles for the 'radio' button and the 'label' for the radio button.

The following are some screenshots which show how styles are applied to the Radiobutton List. The same pattern applies to all components with prefixes.

Figure 2: vanilla radiobutton list

Because some components are limiting the space for rendering text, unwanted line breaks may be observed when applying additional spacing to label or radio button, as shown in the next figure.