Introduction

Each control has a styling assistant. The purpose of these assistants is to enable you to quickly and easily style controls e.g. apply a border to a container, change text to bold, set colors etc. To do this, you do not need a full understanding of CSS and HTML. Under the covers, the style is actually implemented by Verj.io using CSS, but the intention of the styling assistants is to protect you from the complexity of CSS and to enable you to achieve the styling you want using easily understood properties. Each styling assistant has an interactive preview so you can see the effect of each change you make.

The styling assistants are intended to provide you with all the properties that you would commonly use to style any given control. However, this does not include every CSS property that could be applied. For the occasions when you want to achieve some advanced styling not provided by the styling assistants or you want to use class definitions from style sheets, an Advanced Properties button is supplied (see below).

Styling assistants can be invoked in a number of ways:

Clicking on the style icon at the top of the Properties View when a control is selected
Clicking on the button opposite the Control style property when a control is selected
Right-clicking on a control, then selecting Style
Pressing Ctrl T when a control is selected

The Interactive Preview shown at the top of the styling assistants provides two functions:

It shows the effect of the various properties as they are configured.
For advanced controls, it allows you to select a sub-set of properties by clicking on the appropriate area (see Styling Assistant Sections).

The properties section shows all the properties that are available. These are frequently divided into groups which are then available using buttons.

Clicking the Help button on the main Styling Assistant panel will show you the documentation for the control. Clicking Help on one of the group property panels will present localized help on this subject.

Styling Assistant Sections

Some controls have a lot of properties and they are split into sections e.g. Field Control, Table Contol, Horizontal and Vertical Menu Controls. The sections can then be selected either from the dropdown list at the top of the assistant dialog or by clicking on the appropriate area in the interactive preview.

Note that not all sections can always be selected by clicking in the interactive preview e.g. for a Field Control (shown above), once you have selected the Field Label section, you can only return to the Field section by using the dropdown list.

Resetting style

To reset all style for a control, click on the Property Set icon in the Properties View and select Reset control style. This resets all properties to their default state, the same as if the control had just been added to the page.

When properties are divided into groups, each group can be cleared by clicking the Clear button at the bottom left of each panel. This removes all properties in the group. E.g. for Text properties:

Advanced Properties and use of style sheets

Styling Assistants contain a button that gives access to Advanced Properties. These properties provide direct access to CSS using either classes or inline styles. Advanced Properties buttons are supplied to:

Allow the full use of CSS for the occasions when you want to achieve some advanced styling not provided by the Styling Assistants.
Styling using style sheets – either internal or external. See style sheets.

Click here for more information on the use of Advanced Properties and how style is applied.