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
PDF

Newer Version Available

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

Create a Configurable Site Logo Component

Use the --dxp-s-site-logo-path and --dxp-s-site-logo-url global styling hooks to create an easily configurable site logo component that you can add to your site pages. When you update the Site Logo property in the Images tab of the Theme panel, the system automatically updates any component that references the hooks.

Site Logo Styling Hooks

Let’s take a closer look at the site logo --dxp styling hooks.
  • --dxp-s-site-logo-path stores the path to the image, which can be consumed in JavaScript and HTML.
  • --dxp-s-site-logo-url stores the site logo path surrounded by url(.), which can be consumed in CSS properties.

For example:

1:root {
2  --dxp-s-site-logo-path: "/cms/delivery/media/MCKW5KMZTF2BBFDLWWZG2MOVLLXA"
3  --dxp-s-site-logo-url: url("/cms/delivery/media/MCKW5KMZTF2BBFDLWWZG2MOVLLXA")
4}

This JavaScript code sample uses --dxp-s-site-logo-path to set the image src.

1const root = document.querySelector('html');
2const logoPath = getComputedStyle(root).getPropertyValue('--dxp-s-site-logo-path');
3const imgEl = document.createElement('img');
4imgEl.src = logoPath;

This CSS code sample uses --dxp-s-site-logo-url to set the site logo as a background image.

1.logo-container {
2    background-image: var(--dxp-s-site-logo-url);
3    background-position: center;
4    background-repeat: no-repeat;
5    background-size: contain;
6    max-width: 100%;
7}

The Site Logo Property in Experience Builder

The Site Logo property in Experience Builder uses Salesforce CMS images, so you must first add your LWR site as a channel in a CMS workspace in the Digital Experiences app.

Then to add an image in the Images tab of the Theme panel, you must also be a contributor in that CMS workspace. For more information, see Salesforce CMS.The Images tab in the Theme panel

Finally, if the site logo is used on public pages, enable Let guest users view asset files and CMS content available to the site in the Administration workspace under Preferences.