Tag: Styles

Sitecore Headless SXA – Create, apply and restrict a custom style to renderings

In this blog post I will show how to apply a custom style to a rendering.

Requirement-

I have a requirement to add extra spacing between the components.

There is already a indent-top style which provides this space (20px) but neesd 100px space.

And the same can see in Experience Editor-

Same can also see in css file in sxastarter project-

Create a custom style (indent-large-top)

Create custom style in Sitecore-

Create a new style (Indent Large Top) in Sitecore under Presentations => Styles ==> Spacing

/sitecore/content/scxmcloud/sxastarter/Presentation/Styles/Spacing

Provide the value of the Style-

Create a style in FE project with the same value-

There are various ways you should be able to do this. I am adding 5 times more space to the existing indent-top style.

_indent.scss

// $middle-margin is defined in _margins.scss
.indent-large-top {
  margin-top: calc($middle-margin * 5);
}

Apply a custom style to rendering

Select the component or container you want to apply style and choose option “Indent Large Top” in Spacing section

Now the space between the 2 component is increased and is 100px as per the requirement.

New style applied to container-

Apply style to specific renderings

As above when the style was created it was applied to all renderings.

If you want to restrict the style to be applied to only certain renderings you can do so by setting Allowed renderings field in new created Style item.

For “Indent Large Top” only SectionContainer will be able to see the new Spacing Style.

In Experience Editor you wont see the “Indent Large Top” for other renderings e.g.- for container rendering-

While for Section Container rendering the new style is available-

References-

https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/add-a-style-for-a-rendering.html

Loading

Different approaches of creating Sitecore SXA themes

Themes define the look and feel of a site and makes it flexible to change the layout and design of the website.

Themes help to customize the appearance of the site which includes layout, typography, color and other design elements.

SXA come with two types of themes- Site and Base themes. To add own/custom classes and assets, such as styles, scripts, images and fonts use Site theme.

There are multiple ways site theme cane be created-

Option 1 – Add custom theme when creating a Site

Check out this blog post for adding a theme when creating a site

Option 2 – Add theme to existing Site (create theme manually)

Right click on your site- click Scripts and click New Site Theme option

Provide the theme name and location.

Click OK and a theme should be created on specified location

Option 3 – Add a theme using SXA CLI

Will add the details shortly.

Hope this helps!