Appearance
Overview
This guide explains how to style and brand Avonni Components within Salesforce Experience Cloud. Whether you are using the modern LWR framework or the traditional Aura framework, you can tailor your site’s look and feel to create a seamless user experience.
What You'll Learn
Framework Compatibility: Distinguish between styling options available in LWR vs. Aura.
Component-Level Customization: Fine-tune individual components to match your brand.
Theme Integration: Learn how components inherit global site styles.
Efficiency Tools: Use "Copy/Paste Style Properties" to maintain consistency.
Advanced Styling: Use Custom CSS for granular control
Framework Specifics: LWR vs. Aura
It is important to identify which framework your Experience Site is using, as the available styling tools differ significantly:
Style & Visibility Tab
Available. Managed directly by Salesforce for granular spacing and layout.
Not Available.
Avonni Appearance Tab
Available for deep component styling.
Available for component styling.
Global Theme Binding
Full support for DXP branding sets.
Limited to standard theme inheritance.
Important
The Style and Visibility tab is a native Salesforce feature managed directly by the platform. It is only available for sites built with the LWR framework. If you are using an Aura site, you will primarily use the Avonni-specific Appearance settings and the site's global CSS
Individual Styling
Each Avonni Component offers a dedicated Appearance section where you can adjust its styling. These settings let you personalize the look and feel of your components.
The Avonni Components in Experience Site are designed to automatically adapt the default styling settings from your site's theme.
However, if you make any styling adjustments at the component level, these changes will specifically override the corresponding default styles set by your site's theme. This feature allows for more precise and individualized design customization for each component.
Theme Consistency
Automatic Theme Adoption: Avonni Components default adapt your site's theme settings.
Override with Custom Styles: Any adjustments made at the component level will override the default theme styles, offering precise design control for each component.
Integration with Global Theme Settings
Seamless Theme Integration: Effortlessly link Avonni Components to your Digital Experience Platform's (DXP) global theme settings.
No Manual Style Inputs Required: Directly connect component styling attributes to DXP’s predefined theme values, eliminating the need for manual styling inputs.
Copy/Paste Style Properties
This feature simplifies creating a cohesive visual style for your Experience Sites.
Here's how it works and the benefits:
How to Use It
Locate Source Component: Find a component with the desired look and feel (colors, fonts, etc.).
Copy Styles: In the component's Appearance settings, click "Copy Style Properties."
Apply to Target Component: Select the component you want to style, then choose "Paste Style Properties" in its Appearance settings.
Why It's Useful
Visual Consistency: Effortlessly maintain a unified look for your site.
Saves Time: Avoid repetitive style adjustments across multiple components.
Streamlined Design: Focus on building great content and layouts, while styling becomes faster and easier.
Custom CSS Styling
Want to tailor the look of Avonni Components beyond the built-in styling options? Here's how:
Why Use Custom CSS
Unique Branding: Match components precisely to your website's design or brand guidelines.
Advanced Effects: Achieve visual elements that aren't possible with standard settings (e.g., special animations, hover effects, etc.).
Full Control: Get the exact look you want without limitations.
How It Works
Create CSS: Write your custom CSS styles, defining your desired changes.
Add to Site: Use Experience Cloud's standard features to include this CSS in your site's head markup.
Apply to Components: Add the names of your custom CSS classes to the Avonni Components
Last updated
Was this helpful?