Set CSS

Set CSS is a regular block that allows you to add and/or remove CSS classes from any element on the page or form.

The block comes in two modes which are discussed below.

Mode 1

The Mode 1 version of the Set CSS block consists of (from top to bottom):

• Element: Selectable Input to choose the element you want to add/remove the CSS classes for.

• Add Classes: Input configuration setting to specify classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes.

• Remove Classes: Input configuration setting to specify classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes.

Mode 2

The Mode 2 version of the Set CSS block consists of (from top to bottom):

• Element: Value Parameter that accepts either a text value in the form of a CSS Selector or an element value. The Element block comes pre-attached for your convenience but can be removed and customized.

• Add Classes: Value Parameter that accepts a text value containing the classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes.

• Remove Classes: Value Parameter that accepts a text value containing the classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes.

Usage Examples

The image below shows an example of the Mode 1 version where the CSS class bg-info is being added and the class bg-dark is being removed.

In the next example we see a Mode 2 version where the Element value parameter is attached to a Text block containing a CSS Selector that selects the same element. The Add Classes and Remove Classes value parameters are attached to Variable Value blocks.