Learning CoB

# $style[] - Custom Styled Fields

This keyword is used to add custom CSS classes to a field. This allows us to define the look of the field whenever we access an instance of that definition. Classes used as arguments inside the square brackets must be defined in a file named customizations.css. The name of each class included in this file must be preceded by the prefix custom-.

# Usage:

$style[CSS class 1, CSS class 2]

# Examples:

In the examples included below, we have a CSS class called custom-section in the customizations.css file:

/* *************** $style[group] ******************* */
.custom-section .legend{
  background-color: #CC1747;
  color:white;
  padding-left:5px;
}

TIP

Although this particular CSS class - custom-section - only works as expected when the field also includes the $group keyword, the $style[] keyword is not in any case restricted to fields that are also of type $group.

In order to style the look of the Operational Data field, we have to include the grupo part of the name of the that CSS class as a argument of the $style[] keyword: $style[section]

As a result, the name of the field will be displayed in white inside a rectangle with a background colored in dark red:

When we remove the $style[] keyword from the Operational Data field, its look will be identical to the regular, non-customized style of an instance field:

The video embedded below shows the example from above working in real-time:

← Customizations Keywords →