Application Launcher

Site Studio

Using the style builder

Site Studio

Using the style builder

You're viewing version 6.0 of this page. .

The Style builder provides a visual interface for creating CSS styles. It's accessed by creating or editing a Base style or Custom style.

The Style builder has a number of features. Each of these have been described in the following sections:

Style preview - Use this to see what your style looks like while you're creating it. See Using the style preview
Base style selector - Use this to set the base style selector to target. See Creating base styles
Selector menu - Use this to add CSS selectors to your style. See Using CSS selectors
Properties menu - Use this to add CSS properties to your style. See Applying CSS properties
Style helpers - Use these as 'quick starts' when creating styles. See Using and creating style helpers

You're viewing version 6.0 of this page. .

The Style builder provides a visual interface for creating CSS styles. It's accessed by creating or editing a Base style or Custom style.

The Style builder has a number of features. Each of these have been described in the following sections:

Style preview - Use this to see what your style looks like while you're creating it. See Using the style preview
Base style selector - Use this to set the base style selector to target. See Creating base styles
Selector menu - Use this to add CSS selectors to your style. See Using CSS selectors
Properties menu - Use this to add CSS properties to your style. See Applying CSS properties
Style helpers - Use these as 'quick starts' when creating styles. See Using and creating style helpers

You're viewing version 6.0 of this page. .

The Style builder provides a visual interface for creating CSS styles. It's accessed by creating or editing a Base style or Custom style.

The Style builder has a number of features. Each of these have been described in the following sections:

Style preview - Use this to see what your style looks like while you're creating it. See Using the style preview
Base style selector - Use this to set the base style selector to target. See Creating base styles
Selector menu - Use this to add CSS selectors to your style. See Using CSS selectors
Properties menu - Use this to add CSS properties to your style. See Applying CSS properties
Style helpers - Use these as 'quick starts' when creating styles. See Using and creating style helpers
Tidy styles - Use this to remove empty fields from the style builder

Open token browser - Use this to open the Drupal token browser and insert tokens. See Using the token browser

Toggle variable mode - Use this to toggle the style editor into variable mode to insert tokens

Breakpoint menu - Use this to add CSS properties to specific breakpoints. See Applying CSS properties

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Tidy styles - Use this to remove empty fields from the style builder

Open token browser - Use this to open the Drupal token browser and insert tokens. See Using the token browser

Toggle variable mode - Use this to toggle the style editor into variable mode to insert tokens

Breakpoint menu - Use this to add CSS properties to specific breakpoints. See Applying CSS properties

If this content did not answer your questions, try searching or contacting our support team for further assistance.