> 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 personnaliser le style et l’image de marque des composants Avonni dans Salesforce Experience Cloud. Que vous utilisiez le framework moderne LWR ou le framework Aura traditionnel, vous pouvez adapter l’apparence et l’ambiance 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**: Affiner les composants individuels pour les adapter à 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. * **Style avancé**: Utiliser du CSS personnalisé pour un contrôle granulaire *** ## Spécificités des frameworks : LWR vs. Aura Il est important d’identifier quel framework utilise 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 espacement et une mise en page granulaires. | Non disponible. | | **Onglet Apparence Avonni** | Disponible pour une personnalisation approfondie du style des composants. | Disponible pour la personnalisation des composants. | | **Liaison globale au thème** | Prise en charge complète des ensembles de branding DXP. | Limitée à 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 est disponible uniquement 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 %} *** ## Style individuel Chaque composant Avonni propose une section Apparence dédiée où vous pouvez ajuster son style. Ces paramètres vous permettent de personnaliser l’apparence et l’ambiance de vos composants.
{% hint style="warning" %} Les composants Avonni du site Experience 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 changements remplaceront spécifiquement les styles par défaut correspondants définis par le thème de votre site. Cette fonctionnalité permet une personnalisation du design plus précise et individualisée pour chaque composant. {% endhint %} ## Cohérence du thème * **Adoption automatique du thème :** Les composants Avonni s’adaptent par défaut aux paramètres du thème de votre site. * **Remplacer par des styles personnalisés :** Tous les ajustements effectués au niveau du composant remplaceront les styles par défaut du thème, offrant un contrôle précis du design pour chaque composant. *** ## Intégration aux paramètres globaux du thème * **Intégration transparente au thème :** Reliez sans effort les composants Avonni aux paramètres globaux du thème de votre Digital Experience Platform (DXP). * **Aucune saisie manuelle de style requise :** Reliez 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.
*** ## Propriétés de style Copier/Coller Cette fonctionnalité simplifie la création d’un style visuel cohérent pour vos sites Experience. Voici comment cela fonctionne et ses avantages : ### **Comment l’utiliser** 1. **Localiser le composant source :** Trouvez un composant avec l’apparence et le style souhaités (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 :** Conservez sans effort une apparence unifiée pour votre site. * **Gain de temps :** Évitez les ajustements de style répétitifs sur plusieurs composants. * **Conception simplifiée :** Concentrez-vous sur la création de contenu et de mises en page de qualité, tandis que le style devient plus rapide et plus simple.
*** ## Style CSS personnalisé Vous souhaitez adapter l’apparence des composants Avonni au-delà des options de style intégrées ? Voici comment : ### **Pourquoi utiliser du CSS personnalisé** * **Image de marque unique :** Faites correspondre les composants avec précision au design ou aux directives de votre site web. * **Effets avancés :** Obtenez des éléments visuels impossibles avec les paramètres standard (par ex. des animations spéciales, des effets au survol, etc.). * **Contrôle total :** Obtenez l’apparence exacte que vous souhaitez sans limites. ### **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 l’en-tête de votre site. 3. **Appliquer aux composants :** Ajoutez les noms de vos classes CSS personnalisées aux composants Avonni
{% hint style="warning" %} #### Remarque sur le framework Dans **LWR**, vous pouvez souvent utiliser l’onglet « Style » pour l’espacement (marge/espacement intérieur), tandis que dans **Aura**, ceux-ci doivent être gérés via des classes CSS personnalisées ou les paramètres internes d’espacement 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/appearance.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.