Adding Plain CSS Properties

There are plenty of cases when just a set of plain CSS properties without any selectors is enough to get the desired result. Simple components like the Label or the Timer are fully customizable without a single selector. Even more complex components, like the Custom Tree, may have several dedicated CSS property fields, providing an option to style their elements with plain CSS properties to some extent.

A CSS property consists of the property name and its value. It looks like this:

property: value

Several properties are separated by a semicolon ( ; ) after each one. A semicolon after the only or the last property isn’t required, but it helps to avoid occasionally making a syntax mistake:

property-a: value;
property-b: value;

The list of currently available CSS properties and their possible values are regulated by W3C CSS Specifications and can be found at various open resources such as W3C Community Wiki.

In native CSS, plain properties aren’t allowed and should be wrapped in a selector, resulting in a CSS rule. Declaring component styles as a straightforward list of properties is a feature of CSS Editor.

Example of Adding Plain Style to a Component

In the most basic scenario, to apply style to a component:

  1. In the UI Builder, add a component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to the Element Style tab.

  1. In the Element Style tab, add the CSS styles to the Element CSS Style property:

color: tomato;
text-align: center;
font-size: 40px;
font-weight: bold;

  1. The style is applied once the field is out of focus, and the result is visible on the dashboard.

Was this page helpful?