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
How --dxp Styling Hooks Map to Theme Panel Properties
Brand Custom Components Using --dxp Styling Hooks
Override Component Branding with Custom CSS
Create a Section Color Palette
Create a Configurable Site Logo Component
Add Custom Fonts
Remove SLDS
Create a Multilingual LWR Site
Add More Customizations
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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