Style Your LWR Site

You can style your LWR site using a new branding system or by overriding elements with custom CSS.

Use the New LWR Sites Branding System (Developer Preview)

The new branding system for LWR sites lets you easily modify the style of any base Lightning component or your own custom components. Using styling hooks, you can achieve a consistent visual feel that matches your brand. Styling hooks use CSS custom properties that make it easy to customize component styling and define your brand, especially when working with web components and shadow DOM.

For more information, see the Branding LWR Sites for Experience Cloud guide.

Override Template Elements with Custom CSS

If you don’t want to use the new branding system, you can instead define custom CSS.

To add global styling overrides, use the <style> tag in the Head Markup editor. This approach is helpful for a few one-off styles or to test some changes before making them permanent.
Add a global style sheet as a static resource through the Head Markup editor. This approach is helpful for a more permanent solution or when you have many different CSS variations on the template.
Use a global style sheet from a public resource. Remember to allowlist any resources outside your org. See CSP and Lightning Locker in Experience Builder Sites in Salesforce Help.

Remove SLDS

If you want to remove Salesforce Lightning Design System (SLDS), in Experience Builder, click Settings | Advanced | Edit Head Markup, and delete the following line.

1<link 
2    rel="stylesheet" 
3    href="{ basePath }/assets/styles/salesforce-lightning-design-system.min.css?{ versionKey }" 
4/>

To use SLDS again later, add the code back to your head markup.

Don’t remove SLDS if you plan to use flexible layouts or any of the base Lightning components, as they rely heavily on the design system.

Important