#  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:

| Feature                    | LWR Framework                                                              | Aura Framework                         |
| -------------------------- | -------------------------------------------------------------------------- | -------------------------------------- |
| **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. |

{% hint style="warning" %}

#### 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
{% endhint %}

***

## 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.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fsj6SXXtH3ED3tLhmd7vW%2F2024-04-14_09-52-47.png?alt=media&#x26;token=663c39e9-01e4-4e0b-94c5-2a58296eb147" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
The Avonni Components in Experience Site are designed to automatically adapt the default styling settings from your site's theme.&#x20;

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.&#x20;
{% endhint %}

## 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.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZRgUVwgJixDJwEAB0To0%2F2023-10-24_14-25-56.png?alt=media&#x26;token=abe9f0c7-6ba6-4780-9aea-5ce772e3fcda" alt="" width="156"><figcaption></figcaption></figure>

***

## Copy/Paste Style Properties

This feature simplifies creating a cohesive visual style for your Experience Sites.&#x20;

Here's how it works and the benefits:

### **How to Use It**

1. **Locate Source Component:** Find a component with the desired look and feel (colors, fonts, etc.).
2. **Copy Styles:** In the component's Appearance settings, click "Copy Style Properties."
3. **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.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3XZBGjaCNsSo6n2qLkTP%2FMay%203%2011-06-11.gif?alt=media&#x26;token=cb74e278-d3b2-4fad-b927-c03b483a227c" alt=""><figcaption></figcaption></figure>

***

## 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**

1. **Create CSS:** Write your custom CSS styles, defining your desired changes.
2. **Add to Site:** Use Experience Cloud's standard features to include this CSS in your site's head markup.
3. **Apply to Components:** Add the names of your custom CSS classes to the Avonni Components

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fg5yP6eXs4ehhEVjwU0CH%2F2023-10-24_14-27-15.png?alt=media&#x26;token=cc574a34-35ea-46fc-a0f3-b61976aac9cf" alt="" width="174"><figcaption></figcaption></figure>

{% hint style="warning" %}

#### Framework Note

In **LWR**, you can often use the "Style" tab for spacing (margin/padding), whereas in **Aura**, these must be handled via custom CSS classes or the component's internal spacing settings.
{% endhint %}