Walkthrough: Adding a custom style

Version: 10.1

In SXA, styles specify how components render in the editor and in the final product. After site creation, your site has several styles available with default configuration, depending on your chosen theme.

You can add custom styles. To add a custom style, you must first insert the styles controller, then assign a type, and then add the style classes. This walkthrough describes how to:

  • Insert a styles controller

  • Assign a type

  • Add a style class

Insert a styles controller

You must insert the styles that you want to make available in Horizon.

To insert a style:

  1. In the Content Editor, go to your site's Presentation folder.

  2. To add a new style, right-click Styles, click Insert, and then click Styles.

  3. Enter a name for the style and click OK.

Tip

Give your new style a name that helps your editors understand what it does.

Assign a type

On the folder level for your style, you must configure how Horizon displays the style to editors. To do this, you must assign one of the premade display types for the Horizon editor.

To assign a type:

  1. For your style, in the Data section, click the Type drop-down and then choose the display type for the style.

  2. If you want editors to be able to de-select a choice, select the AllowEmpty check box.

Note

If you use the Icon-button-group-check or Icon-button-group-radio display types, you must make sure the correct Horizon icons are specified in the grid.

Add a style class

In order for your editors to see different options for components, you must add each option as a style class.

To add an option as a style class:

  1. In the Content Editor, locate and right-click the Style folder you want to add a style for and, to insert a new style class, click Insert, Style.

  2. In the Value field, enter the CSS class for the style. You can use both the default CSS classes and custom CSS classes.

  3. To enter any specific components that you want this class to be tied to, in the Allowed Renderings section, click Edit. When you enter components here, this class only displays for these components. If you leave this field empty, the class is available on all components.

  4. Repeat these steps for any more classes that you want for the style.

Note

The CSS style that you use must also be configured in your theme/CSS.

Do you have some feedback for us?

If you have suggestions for improving this article,