There are CSS properties that are not available through the Properties menu. If you require a CSS property not provided you can add it using the Custom CSS option.

Adding a custom CSS property to a style

To add a custom CSS property:

• Navigate to the Style builder. This is available when you edit Base styles or Custom styles. For more, see Using the style builder
• Within the Style editor area, click on the Properties button
• Then select Custom CSS in the menu.

Custom CSS

Expected values

• Add the CSS property name in the CSS property field
• Add the CSS value in the CSS value field.

For example:

Add multiple custom CSS properties

To add additional Custom CSS properties to the same style:

• Below the Custom CSS property fields, click Add
• A new row of fields will be added to the form
• Add the CSS property name in the CSS property field
• Add the CSS value in the CSS value field
• Repeat this process to add additional Custom CSS properties.

Remove custom CSS properties

To remove Custom CSS properties from the style:

• Above the Custom CSS property fields, click the grey Delete icon
• The property will be removed.

Applying custom CSS properties

There are CSS properties that are not available through the Properties menu. If you require a CSS property not provided you can add it using the Custom CSS option.

Adding a custom CSS property to a style

To add a custom CSS property:

• Navigate to the Style builder. This is available when you edit Base styles or Custom styles. For more, see Using the style builder
• Within the Style editor area, click on the Properties button
• Then select Custom CSS in the menu.

Custom CSS

Expected values

• Add the CSS property name in the CSS property field
• Add the CSS value in the CSS value field.

For example:

Important

Values entered into the values field require units to be added if units are required. For example, 100rem, 100px, 45deg. Site Studio does not automatically convert unitless values to REM's.

Add multiple custom CSS properties

To add additional Custom CSS properties to the same style:

• Below the Custom CSS property fields, click Add
• A new row of fields will be added to the form
• Add the CSS property name in the CSS property field
• Add the CSS value in the CSS value field
• Repeat this process to add additional Custom CSS properties.

Remove custom CSS properties

To remove Custom CSS properties from the style:

• Above the Custom CSS property fields, click the grey Delete icon
• The property will be removed.