--- sourceDocument: Gestion du service à la clientèle de Yokohama sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/customer-service-management Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Gestion du service à la clientèle de Yokohama ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # Personnalisation des couleurs des ServiceNow composants dans AEM # Personnalisation des couleurs des ServiceNow composants dans AEM {#ariaid-title1} * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes de lecture Vous pouvez définir l'aspect et l'ergonomie des ServiceNow composants dans Adobe Experience Manager (AEM) en spécifiant leurs 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. Vous spécifiez la classe CSS personnalisée pour un composant dans la propriété Classe CSS personnalisée . Pour plus d'informations, consultez [Afficher des ServiceNow articles de la base de connaissances sur une page Adobe Experience Manager](https://servicenow-prod.fluidtopics.net/nTHx9R2anYkvD3o73~uU5w "Utilisez les composants de connaissances disponibles dans Adobe Experience Manager (AEM) pour accéder aux bases de connaissances à partir de l’instance ServiceNow et afficher les articles de connaissances associés sur un site Web basé sur AEM.") et [Vitrines d'affichage ServiceNow sur une page Adobe Experience Manager](https://servicenow-prod.fluidtopics.net/4pablvDSAeO7bN4_NsWJtA "Composants de cas d’utilisation disponibles dans Adobe Experience Manager (AEM) pour accéder aux tickets du service clientèle à partir de l’instance ServiceNow et les afficher sur un site web basé sur AEM."). Remarque : Par défaut, les ServiceNow composants sont configurés à l'aide des styles CSS Bootstrap v4.4.1. Si votre page AEM utilise une version Bootstrap différente, le ServiceNow style des composants est remplacé par le style de la page. ## Modifier le thème de couleur pour tous les ServiceNow composants dans AEM {#ariaid-title2} Définissez le thème de couleur des ServiceNow composants dans Adobe Experience Manager (AEM) en une seule fois 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 ServiceNow composants sont configurés à l'aide des styles CSS Bootstrap v4.4.1. Si votre page AEM utilise une version Bootstrap différente, le ServiceNow style des composants est remplacé par le style de la 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 à applicationsServiceNow : composantsBibliothèques clientesclientlib-commune. 3. Ouvrez le fichier variables.less . 4. Configurez les variables de couleur disponibles pour les éléments HTML dans les ServiceNow composants. {#aem-modify-color-all-comp__table_vhh_gjm_2mb__entry__2} | Paramètre de couleur | Variable | |-|-| | Contenu textuel | @text couleur | | Liens hypertexte | @link couleur | | Badges | @badge-texte-couleur | | Arrière-plan des badges | @badge-couleur-arrière-plan | | Couleur primaire pour mettre en valeur le visuel | @primary couleur | | Couleur complémentaire de la couleur primaire, pour une mise en valeur visuelle | @secondary couleur | | Titres des composants | @title couleur | | Texte du bouton primaire | @primary-btn-texte-couleur | | Arrière-plan du bouton primaire | @primary-btn-bkg-couleur | | Texte du bouton secondaire | @secondary-btn-texte-couleur | | Arrière-plan du bouton secondaire | @secondary-btn-bkg-couleur | [Tableau 1. Paramètres des variables de couleur] {#aem-modify-color-all-comp__table_vhh_gjm_2mb} Remarque : Vous spécifiez une couleur pour une variable de l'une des façons suivantes : * Nom de la couleurPar exemple, rouge * Valeur HEX Par exemple, #FF0000 * Valeur RVB Par exemple, rvb(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 modifications sur le serveur AEM. ## Modifier le thème de couleur d'un ServiceNow composant dans AEM {#ariaid-title3} Remplacez le thème de couleur d'un ServiceNow composant dans Adobe Experience Manager (AEM) à l'aide de la fonction d'initialisation . ### Avant de commencer Rôle requis : administrateur AEM ### Pourquoi et quand exécuter cette tâche Les variables de couleur spécifiées dans le fichier variables.less sont appliquées à tous les ServiceNow composants dans AEM. Vous pouvez remplacer les couleurs par défaut d'un composant particulier en définissant les variables de couleur du composant dans la fonction initializeCSS . Remarque : Par défaut, les ServiceNow composants sont configurés à l'aide des styles CSS Bootstrap v4.4.1. Si votre page AEM utilise une version Bootstrap différente, le ServiceNow style des composants est remplacé par le style de la 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 à applicationsServiceNow : composantsBibliothèques clientesclientlib-commune. 3. Ouvrez le fichier variables.less . 4. Spécifier la fonction initializeCSS pour un composant au format <component_type> ; <class_name> ; <color_variable_1> ; <color_variable_2> ; <color_variable_n>. * component_type : type de composant auquel vous souhaitez appliquer le thème de couleur personnalisé, par exemple, articlelist, articleview, casecards, etc. * class_name : classe CSS personnalisée que vous entrez dans la propriété de classe CSS personnalisée de votre composant. * color_variable_1, color_variable_2 color_variable_n : variables de couleur que vous spécifiez pour les éléments HTML d'un composant. Pour plus d'informations, consultez le tableau [des paramètres des variables de couleur](https://servicenow-prod.fluidtopics.net/7_VpzPXUxNyUjtCY~pTk7A#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 des couleurs 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, sélectionnez Enregistrer tout pour enregistrer les modifications sur le serveur AEM.