Style and Effects (Forms)

The 'Style & Effects' function is available for almost every visual element in the 'Style' section.
The system offers suitable styles, effects and cursor settings depending on the selected elements.

images/download/attachments/169638244/image-2024-5-23_16-30-22-version-1-modificationdate-1716474621682-api-v2.png

Both styles and effects are divided into subcategories, e.g. shape, frame, font.
One or more settings can be active at the same time, depending on this section.
If a setting is marked with a mouse cursor, this means that the style or effect can be activated when the mouse hovers over the relevant element. To activate this 'hover' mode, simply click on the corresponding mouse cursor. This will then be highlighted accordingly.

CSS class

All selected styles and effects are transferred to the lower 'CSS class' area as CSS classes. Additional classes can also be added here if a corresponding stylesheet has been stored. The magnifying glass symbol can be used to search for all CSS classes in the system.
In addition, the CSS class name for an effect can also be copied via its context menu. With the CSS class action, classes can be dynamically added to or removed from an element.

For CSS experts

The styles that are available for selection can also be extended with custom stylesheets (see Styles).
All that is required here is to follow the naming convention (e.g. lb-style-section-XXX) of the existing classes. To avoid any conflicts in names, custom CSS classes should begin with 'cst-' instead of 'lb-'.
Example CSS for a custom section style:

.cst-style-section-my-own {
padding: 0.5em;
background-color: #BC263F;
color: #FFFFFF;
}