LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the Template
Start Building Your LWR Site
Brand Your LWR Site
How Branding Works in LWR Sites
--dxp Styling Hooks
Enable --dxp Styling Hooks
Brand Custom Components Using --dxp Styling Hooks
Override Component Branding with Custom CSS
Create a Section Color Palette
Add Custom Fonts
Remove SLDS
Add Additional Customizations
PDF

Newer Version Available

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

Create a Section Color Palette

On many websites, it’s common to have sections of a page, such as the header, footer, or banners, that use different colors from the overall site. For example, perhaps you want to create a header with a dark background and a light foreground, whereas the rest of your site does the opposite. To achieve this, you can create separate color palettes and apply them to your page sections. Each section on a page can have its own color palette.

We’ve made it easy to adjust these colors on any section. Just select a section, and pick an existing or define an entirely new color palette.

  1. In Experience Builder, open the Colors tab of the Theme panel.
  2. Click Menu icon | Manage Color Palettes.
  3. Click New Palette and give the palette a name.

    The new palette is created and selected in the Colors tab.Manage Color Palettes

  4. Update the palette’s color properties in the Colors tab as needed.
  5. To use the palette, select a section on the page and then choose the palette from the section’s properties.Section properties