Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Brand Your Aura Site
Update a Template with the Theme Panel
Use the CSS Editor for Custom CSS
Migrate CSS Overrides
Use Custom Fonts in Your Experience Builder Site
Customize the Theme Layout of Your Template
Use Expressions to Add Dynamic Data to Aura Sites
Create Custom Content Layout Components for Experience Builder
Configure Swappable Search and Profile Menu Components
Ensure Custom Components in Orgs with Experience Cloud Sites Are Secure
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: CSP, LWS, and Lightning Locker
Analyze and Improve Experience Builder Site Performance
Add Pardot Tracking to Your Experience Builder Site
Use a CMS with Your Experience Builder Site
Report on Deflections: The Deflection Signals Framework
Deploy an Experience Cloud Site from Sandbox to Production
PDF

Use the CSS Editor for Custom CSS

Use the CSS Editor in Experience Builder to create custom CSS to style elements across your Aura site. This option is suitable if you’re familiar with CSS and want to make only minor modifications to some template components.

Use custom CSS sparingly and avoid targeting DOM elements in components that you don’t own. Doing so is brittle because changes to the component’s internal DOM structure is likely to break hard-coded CSS selectors. Salesforce can change the internal implementation of Salesforce components at any point . Additionally, Salesforce Customer Support can’t help resolve any issues with custom CSS.

Warning

CSS Editor

To make minor CSS modifications to a component, use Chrome DevTools to inspect the page and discover the item’s fully qualified name and CSS class.

For substantial template customizations, instead of using custom CSS, use the CSS resource in custom Lightning web components or Aura components and in custom theme layout components. If you use global overrides, always test your site in sandbox when it’s updated each release.

Tip

You can link to a CSS style sheet as either a static or external resource in the head markup in Settings | Advanced. However, because global value providers aren’t supported in the head markup or in CSS overrides, you can’t use $resource to reference static resources. Instead, use a relative URL using the syntax /sfsites/c/resource/resource_name.

For example, if you upload an image as a static resource called Headline, reference it in the CSS Editor as follows:
.forceCommunityHeadline
{
    background-image: url('/sfsites/c/resource/headline')
}

Head markup is also useful for adding favicon icons, SEO meta tags, and other items. However, be aware that using the default strict CSP security level can affect your code.