Sitecore Experience Accelerator

Add a style for a rendering

Abstract

How to add a style class item and make it available for a rendering.

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.

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

    44410E213D4A4DDAB89AFED7BD75B033.png
  6. To see your new style, in the Experience Editor, click edit the style.

    F10EE8620F724194860347943BA5CC7B.png
  7. In the Styles section, you can now select the new style.

    F95416F98A7C4CDF993D238F9FF31BE4.png
  8. Click OK to apply the new style to the rendering.