Add a style for a rendering

Version: 10.4

SXA comes with preset styles for renderings. However, sometimes you may want to add your own custom styles. For example, you want some of the images on your site to appear without margins or if you want to add a background color to a rendering.

To add a class item for a rendering in the Content Editor:

  1. Go to the site's Presentation folder.

  2. Right-click Styles, click Insert, and then click Style to add a new style.

  3. Enter the name and click OK.

    Note

    Make sure that your new style has a name that helps other users to understand what it does.

  4. To make the new style available for the rendering, in the Style section, click Edit.

  5. In the Select items dialog, click the relevant rendering, click the right arrow to move it to the list of selected items and click OK. For this example, the gray background is made available for the Container and splitter renderings.

  6. To see your new style, in the page builder, add a component to a page and in the right-hand pane, click Design > Styling.

Do you have some feedback for us?

If you have suggestions for improving this article,