Set Style

Block Information

Available in: Page Flow

Toolbox Category: Style/CSS

Block Type: Regular

Set Style is a regular block that allows you to set a CSS Property on any element on the page or form.

Refer to the Set Style in Data Design block for dynamically generated content.

The block comes in two modes which are discussed below.

Mode 1

Set Style (Mode 1)

The Mode 1 version of the Set Style block consists of (from left to right):

• Property: Value Parameter that accepts a text value containing the CSS Property you want to set.

• Element: Selectable Input to choose the element you want to set the style of.

• Data: Value Parameter that accepts a text value containing the value of the property you are setting.

Mode 2

Set Style (Mode 2)

The Mode 2 version of the Set Style block consists of (from left to right):

• Property: Value Parameter that accepts a text value containing the CSS Property you want to set.

• 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.

• Data: Value Parameter that accepts a text value containing the value of the property you are setting.

---

Usage Examples

The image below shows an example of the Mode 1 version where the background-color CSS property of a selected element is set using the Color Selection block attached to the Data value parameter.

Example of Set Style Mode 1

In the next example we see a Mode 1 version where the Data value parameter is attached to an Text block specifying the color in hex triplet format.

Example of Set Style Mode 1

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.

Example of Set Content Mode 2

NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information:

• Wikipedia article on CSS

• Mozilla Developer Network article on CSS selectors

The last example shows a Mode 2 version where the Element value parameter is attached to an Element block. Additionally the Data value parameter is attached to a Variable Value block.

Example of Set Style using a Variable Value block