--- sourceDocument: Gestion du service clientèle Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/customer-service-management Release : - xanadu ft:locale : - fr-FR ft:publication_title : - Gestion du service clientèle Xanadu ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # Personnalisation des couleurs des composants ServiceNow dans AEM # Personnalisation des couleurs des composants ServiceNow dans AEM {#ariaid-title1} * Rversion finale: Xanadu * * Mis à jour 1 août 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes de lecture Vous pouvez définir l'aspect et la convivialité des composants ServiceNow dans Adobe Experience Manager (AEM) en leur attribuant des couleurs. En tant qu'administrateur AEM, vous pouvez soit modifier les variables de couleur préconfigurées pour tous les composants, soit utiliser la fonction initializeCSS pour personnaliser les couleurs d'un composant particulier à l'aide d'une classe CSS personnalisée. Pour spécifier la classe CSS personnalisée pour un composant, vous devez utiliser la propriété de Classe CSS personnalisée. Pour plus d'informations, consultez [Afficher les articles de la base de connaissances ServiceNow sur une page Adobe Experience Manager](https://servicenow-prod.fluidtopics.net/jDTEvHNZLREyZdl6uVKvnA "Utilisez les composants de connaissances disponibles dans Adobe Experience Manager (AEM) pour accéder aux bases de connaissances de l'instance ServiceNow et afficher les articles de la base de connaissances associés sur un site Web basé sur AEM.") et [Afficher les tickets ServiceNow sur une page Adobe Experience Manager](https://servicenow-prod.fluidtopics.net/9peojx3nKZerUi~tXdcePA "Utilisez les composants de ticket disponibles dans Adobe Experience Manager (AEM) pour accéder aux tickets de service client à partir de l'instance ServiceNow et les afficher sur un site Web basé sur AEM."). Remarque : Par défaut, les composants ServiceNow sont configurés à l'aide des styles Bootstrap v4.4.1. CSS. Si votre page AEM utilise une version Bootstrap différente, le style des composants ServiceNow est remplacé par le style de page. ## Modifier le thème de couleur pour tous les composants ServiceNow dans AEM {#ariaid-title2} Définissez le thème de couleur pour les composants ServiceNow dans Adobe Experience Manager (AEM) en configurant les variables de couleur. ### Avant de commencer Rôle requis : administrateur AEM ### Pourquoi et quand exécuter cette tâche Remarque : Par défaut, les composants ServiceNow sont configurés à l'aide des styles Bootstrap v4.4.1. CSS. Si votre page AEM utilise une version Bootstrap différente, le style des composants ServiceNow est remplacé par le style de page. ### Procédure 1. [Ouvrez CRXDE Lite dans votre navigateur](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html). Par exemple, dans votre navigateur, saisissez l'URL au format http://\:\/crx/de. L'URL par défaut pour CRXDE Lite est http://localhost:4502/crx/de. 2. Accédez à la AppsServiceNow : composantsclientlibsclientlib-common. 3. Ouvrez le fichier variables.less. 4. Configurez les variables de couleur disponibles pour les éléments HTML dans les composants ServiceNow. {#aem-modify-color-all-comp__table_vhh_gjm_2mb__entry__2} | Paramètre de couleur | Variable | |-|-| | Contenu de texte | @text-color | | Hyperliens | @link-color | | Badges | @badge-text-color | | Arrière-plan des badges | @badge-background-color | | Couleur primaire pour une accentuation visuelle | @primary-color | | Couleur complémentaire à la couleur primaire, pour une accentuation visuelle | @secondary-color | | Titres des composants | @title-color | | Texte du bouton Principal | @primary-btn-text-color | | Arrière-plan du bouton Principal | @primary-btn-bkg-color | | Texte du bouton secondaire | @secondary-btn-text-color | | Arrière-plan du bouton secondaire | @secondary-btn-bkg-color | [Tableau 1. Paramètres de variables de couleur] {#aem-modify-color-all-comp__table_vhh_gjm_2mb} Remarque : Pour spécifier une couleur pour une variable, procédez de l'une des façons suivantes : * Nom de la couleurPar exemple, red * Valeur HEX Par exemple, #FF0000 * Valeur RVB Par exemple, rgb (255,0,0) * Fonction var Utilisez la fonction var pour spécifier une propriété personnalisée pour une couleur. Par exemple, var(--gray-dark). {#aem-modify-color-all-comp__ul_u1g_slm_2mb} 5. Dans le menu CRXDE Lite, cliquez sur Enregistrer tout pour enregistrer les changements sur le serveur AEM. ## Modifier le thème de couleur pour un composant ServiceNow dans AEM {#ariaid-title3} Remplacez le thème de couleur d'un composant ServiceNow dans Adobe Experience Manager (AEM) à l'aide de la fonction initialize. ### Avant de commencer Rôle requis : administrateur AEM ### Pourquoi et quand exécuter cette tâche Les variables de couleur que vous spécifiez dans le fichier variables.less sont appliquées à tous les composants ServiceNow dans AEM. Vous pouvez remplacer les couleurs par défaut d'un composant particulier en définissant les variables de couleur pour le composant dans la fonction initializeCSS. Remarque : Par défaut, les composants ServiceNow sont configurés à l'aide des styles Bootstrap v4.4.1. CSS. Si votre page AEM utilise une version Bootstrap différente, le style des composants ServiceNow est remplacé par le style de page. ### Procédure 1. [Ouvrez CRXDE Lite dans votre navigateur](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html). Par exemple, dans votre navigateur, saisissez l'URL au format http://\:\/crx/de. L'URL par défaut pour CRXDE Lite est http://localhost:4502/crx/de. 2. Accédez à la AppsServiceNow : composantsclientlibsclientlib-common. 3. Ouvrez le fichier variables.less. 4. Spécifiez la fonction initializeCSS pour un composant au format <component_type>;<class_name>;<color_variable_1>;<color_variable_2>; <color_variable_n>. * component_type : le type du composant sur lequel vous souhaitez appliquer le thème de couleur personnalisé, par exemple, articlelist, articleview, casecards, et ainsi de suite. * class_name : la classe CSS personnalisée que vous saisissez dans la propriété de Classe CSS personnalisée de votre composant. * color_variable_1, color_variable_2, color_variable_n : les variables de couleur que vous spécifiez pour les éléments HTML d'un composant. Pour plus d'informations, consultez la table [Paramètres de variables de couleur](https://servicenow-prod.fluidtopics.net/hFPmbk_SrwYzDMTgFuzowA#aem-modify-color-all-comp__table_vhh_gjm_2mb). {#aem-modify-color-comp__ul_dyk_py4_2mb} Utilisez l'exemple de code suivant comme référence pour le style de couleur au niveau du composant. .initialize(@componentType:articlelist;@className:now-article-list;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:articleview; @className:now-article-view;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@secondary-color:indigo;); .initialize(@componentType:casecards; @className:now-case-cards; @text-color:red;@link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:caselist; @className:now-case-list; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;); .initialize(@componentType:searchbox; @className:now-search-box; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;); .initialize(@componentType:searchresults;@className:now-search-results;@text-color:gray; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:caseview;@className:now-case-view;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;); .initialize(@componentType:createcase;@className:now-create-case;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;) 5. Dans le menu CRXDE Lite, cliquez sur Enregistrer tout pour enregistrer les changements sur le serveur AEM.