LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the LWR Templates
Start Building Your LWR Site
Brand Your LWR Site
How Branding Works in LWR Sites
Enable --dxp Styling Hooks
--dxp Styling Hooks in LWR Sites
How --dxp Styling Hooks Map to Theme Panel Properties
Use --dxp Styling Hooks in Custom Components
Override Component Branding in LWR Sites with Custom CSS
Create a Color Palette for Page Sections and Columns
Create a Configurable Site Logo Component
Add Custom Fonts
Remove SLDS
Create a Multilingual LWR Site
Add More Customizations
Manage Data in LWR Sites
Experience Delivery (Beta)
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Enable --dxp Styling Hooks

If you created your LWR site before Summer ’21, enable --dxp styling hooks by adding the DXP branding style sheets to your site.

New LWR sites created in Summer ’21 and later automatically include these style sheets.

Tip

Click Settings | Advanced | Edit Head Markup, and include the following code in the Head Markup editor.

1<link rel=“stylesheet” href=“{​ basePath }/assets/styles/salesforce-lightning-design-system.min.css?{​ versionKey }” />
2<link rel=“stylesheet” href=“{​ basePath }/assets/styles/dxp-site-spacing-styling-hooks.min.css?{​ versionKey }” />
3<link rel=“stylesheet” href=“{​ basePath }/assets/styles/dxp-styling-hooks.min.css?{​ versionKey }” />
4<link rel=“stylesheet” href=“{​ basePath }/assets/styles/dxp-slds-extensions.min.css?{​ versionKey }” />

Make sure that the dxp-styling-hooks.min.css and dxp-slds-extension.min.css files are loaded after salesforce-lightning-design-system.min.css.

Note