Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Customize the Look and Feel of an Experience Builder Template
Update a Template with the Theme Panel
Override Template Elements with Custom CSS
Migrate CSS Overrides
Use Custom Fonts in Your Experience Builder Site
Customize the Theme Layout of Your Template
Use Expressions in Aura Sites
Create Custom Content Layout Components for Experience Builder
Configure Swappable Search and Profile Menu Components
Standard Design Tokens for Experience Builder Sites
Ensure Custom Components in Orgs with Experience Cloud Sites Are Secure
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: Lightning Locker and CSP
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

Newer Version Available

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

Override Template Elements with Custom CSS

Use the CSS Editor in Experience Builder to add custom CSS that overrides the default template and Theme panel styles. You can also use it make minor changes to the appearance of out-of-the-box components, such as padding adjustments.

Use custom CSS sparingly. Future releases of template components might not support your CSS customizations. Additionally, Salesforce Customer Support can’t help resolve any issues with custom CSS.

Important

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

To make minor CSS modifications to a template item, use Chrome DevTools to inspect the page and discover the item’s fully qualified name and CSS class. Then use the information to override the item’s standard CSS with your custom CSS. To learn more about inspecting and editing pages and styles, refer to the Google Chrome's DevTools website.

The easiest way to inspect a component is to view the page in Preview mode. This example inspects the Headline component to locate the component’s fully qualified name—forceCommunityHeadline.Chrome DevTools inspector

If a top-level CSS class isn’t defined for a component, this option doesn’t appear, which means that you can’t reliably target the component.

Note

Then find the element that you want to style—for example, headlineTitleText. If the element doesn’t have a class name, you must write a specific selector targeting the element.Chrome DevTools inspector

With that information, you can create a custom style to override the default title color.
1.forceCommunityHeadline .headlineTitleText
2{
3    color: red;
4}

And then add it to the CSS Editor.CSS Editor

Similarly, you could use custom CSS to hide the component entirely.
1.forceCommunityHeadline
2{
3    display: none;
4}

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: 
1.forceCommunityHeadline
2{
3    background-image: url('/sfsites/c/resource/headline')
4}

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.

Tip