> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/appearance.md). # Apparence ## Aperçu Ce guide explique comment styliser et personnaliser les composants Avonni dans Salesforce Experience Cloud. Que vous utilisiez le framework moderne LWR ou le framework Aura traditionnel, vous pouvez adapter l’apparence et le style de votre site pour créer une expérience utilisateur fluide. ### **Ce que vous allez apprendre** * **Compatibilité des frameworks**: Distinguer les options de style disponibles dans LWR par rapport à Aura. * **Personnalisation au niveau du composant**: Ajuster finement des composants individuels pour correspondre à votre marque. * **Intégration du thème**: Apprendre comment les composants héritent des styles globaux du site. * **Outils d’efficacité**: Utiliser « Copier/Coller les propriétés de style » pour maintenir la cohérence. * **Stylisation avancée**: Utiliser du CSS personnalisé pour un contrôle granulaire *** ## Spécificités du framework : LWR vs Aura Il est important d’identifier le framework utilisé par votre site Experience, car les outils de style disponibles diffèrent considérablement : | Fonctionnalité | Framework LWR | Framework Aura | | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | **Onglet Style et visibilité** | Disponible. Géré directement par Salesforce pour un contrôle précis de l’espacement et de la mise en page. | Non disponible. | | **Onglet Apparence Avonni** | Disponible pour une stylisation approfondie des composants. | Disponible pour la stylisation des composants. | | **Liaison au thème global** | Prise en charge complète des ensembles de branding DXP. | Limité à l’héritage standard du thème. | {% hint style="warning" %} #### Important L’onglet Style et visibilité est une fonctionnalité native de Salesforce gérée directement par la plateforme. Il n’est disponible que pour les sites créés avec le **framework LWR**. Si vous utilisez un site **Aura** , vous utiliserez principalement les paramètres d’Apparence spécifiques à Avonni et le CSS global du site {% endhint %} *** ## Stylisation individuelle Chaque composant Avonni propose une section Apparence dédiée dans laquelle vous pouvez ajuster son style. Ces paramètres vous permettent de personnaliser l’apparence et le style de vos composants.
{% hint style="warning" %} Les composants Avonni dans Experience Site sont conçus pour s’adapter automatiquement aux paramètres de style par défaut du thème de votre site. Cependant, si vous effectuez des ajustements de style au niveau du composant, ces modifications remplaceront spécifiquement les styles par défaut correspondants définis par le thème de votre site. Cette fonctionnalité permet une personnalisation de conception plus précise et individualisée pour chaque composant. {% endhint %} ## Cohérence du thème * **Adoption automatique du thème :** Par défaut, les composants Avonni adoptent les paramètres de thème de votre site. * **Remplacement par des styles personnalisés :** Toute modification apportée au niveau du composant remplacera les styles de thème par défaut, offrant un contrôle précis de la conception pour chaque composant. *** ## Intégration aux paramètres de thème globaux * **Intégration fluide du thème :** Liez facilement les composants Avonni aux paramètres de thème globaux de votre plateforme d’expérience numérique (DXP). * **Aucune saisie manuelle de style requise :** Connectez directement les attributs de style des composants aux valeurs de thème prédéfinies de DXP, éliminant ainsi le besoin de saisies manuelles de style.
*** ## Copier/Coller les propriétés de style Cette fonctionnalité simplifie la création d’un style visuel cohérent pour vos sites Experience. Voici comment cela fonctionne et quels en sont les avantages : ### **Mode d’emploi** 1. **Localiser le composant source :** Trouvez un composant présentant l’apparence souhaitée (couleurs, polices, etc.). 2. **Copier les styles :** Dans les paramètres Apparence du composant, cliquez sur « Copier les propriétés de style ». 3. **Appliquer au composant cible :** Sélectionnez le composant que vous souhaitez styliser, puis choisissez « Coller les propriétés de style » dans ses paramètres Apparence. ### **Pourquoi c’est utile** * **Cohérence visuelle :** Maintenez sans effort une apparence unifiée pour votre site. * **Gain de temps :** Évitez des ajustements de style répétitifs sur plusieurs composants. * **Conception rationalisée :** Concentrez-vous sur la création d’un excellent contenu et de mises en page, tandis que la stylisation devient plus rapide et plus simple.
*** ## Stylisation CSS personnalisée Vous souhaitez adapter l’apparence des composants Avonni au-delà des options de style intégrées ? Voici comment faire : ### **Pourquoi utiliser du CSS personnalisé** * **Image de marque unique :** Faites correspondre précisément les composants au design ou aux directives de marque de votre site web. * **Effets avancés :** Obtenez des éléments visuels impossibles à réaliser avec les paramètres standards (par exemple, des animations spéciales, des effets au survol, etc.). * **Contrôle total :** Obtenez exactement l’apparence souhaitée sans limitations. ### **Fonctionnement** 1. **Créer le CSS :** Rédigez vos styles CSS personnalisés en définissant les modifications souhaitées. 2. **Ajouter au site :** Utilisez les fonctionnalités standard d’Experience Cloud pour inclure ce CSS dans le balisage \ de votre site. 3. **Appliquer aux composants :** Ajoutez les noms de vos classes CSS personnalisées aux composants Avonni
{% hint style="warning" %} #### Note sur le framework Dans **LWR**, vous pouvez souvent utiliser l’onglet « Style » pour l’espacement (marges/espacements intérieurs), tandis que dans **Aura**, cela doit être géré via des classes CSS personnalisées ou les paramètres d’espacement internes du composant. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/appearance.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.