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
Improve Performance with Experience Delivery
PDF

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