Walkthrough: Adding a custom style to Pages

Note

Use the Content Editor for the steps described in this topic.

Styles define how components render in both the XM Cloud Pages app and the final product. After creating your site, it has several styles available with default configuration. However, you can add you own custom styles to SXA components.

The following screenshot shows a custom style called Background in Pages that has been configured in the Content Editor. In this example, the custom style lets content authors select one of three different types of background for the Promo component. Each of the values in the list corresponds to a style class.

Example of a custom style in the Pages app

This walkthrough describes how to:

Add a custom style

Add the custom style that you want to make available to content authors in Pages.

To add a custom style:

  1. Go to the Presentation folder of your site.

  2. Right-click Styles, and then click Insert > Styles.

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

Tip

Give your new style a name that helps your content authors understand what it does, for example Background.

Specify a display type

After adding your custom style, configure how Pages displays the style options. To do this, you need to assign one of the premade display types.

To specify a display type:

  1. In the content tree, click a custom style you've just created.

  2. In the Data section, click the Type list and then choose the display type for the style.

    Specify a display type in the Content Editor
  3. If you want content authors to be able to leave a section blank, select the Allow empty value check box.

Note

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

Add a style class to a custom style

To enable content authors to see different style options for a component, add each option as a style class.

To add a style class to a custom style:

  1. In the content tree, right-click the custom style and click Insert > Style.

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

  3. To associate this class with specific components, in the Allowed Renderings section, click Edit. If you enter components here, this class is only available for those components. If you don't do this, the class is available for all components.

Do you have some feedback for us?

If you have suggestions for improving this article,