Modifier des composants
Modifiez Générateur de thèmes les composants individuels pour qu’ils correspondent mieux à votre marque et aux normes de conformité en matière d’accessibilité. Les accroches de thème que vous pouvez modifier sont spécifiques à chaque type de composant.
Avant de commencer
Rôle requis : admin
Pourquoi et quand exécuter cette tâche
Les composants que vous pouvez modifier ont Générateur de thèmes été créés dans le Now Platform Système de design. Pour plus d’informations, consultez Composants Next Experience sur le ServiceNow site développeur.
Pour obtenir des instructions sur la modification du composant, reportez-vous à la Navigation unifiée section S’aligner sur votre marque à l’aide du Navigation unifiée composant.
Le nombre total d’infractions en matière d’accessibilité est indiqué sur l’icône de badge numérotée rouge 
à côté du panneau de l’inspecteur d’accessibilité.
Procédure
-
Utilisez la liste déroulante Page pour sélectionner la vue de page Éditeur.
Figure 1. Vue de page de l’éditeur -
Dans la vue de la page Éditeur, sélectionnez l’onglet Styles des composants .
Les styles de composants sont répertoriés sous forme graphique.
-
Sélectionnez l’onglet Édition .
Remarque :Les composants qui peuvent être modifiés s’affichent. Pour plus d’informations sur la façon de filtrer la liste des composants pour localiser le composant que vous souhaitez modifier, reportez-vous à la section tb-preview-components.html. -
Sélectionnez le composant que vous souhaitez modifier pour accéder au panneau Style configurable.
Lorsque vous examinez les composants répertoriés dans la page Édition, notez que certains composants peuvent afficher le symbole suivant.
Remarque :Le symbole d’avertissement d’accessibilité indique que le contraste des couleurs du composant sélectionné ne respecte pas les normes d’accessibilité WCAG (Web Content Accessibility Guidelines) 2.1 pour le contraste des couleurs. Pour plus d’informations sur la modification des composants présentant des violations d’accessibilité, reportez-vous à la section Ajuster un composant pour qu’il réponde aux normes d’accessibilité. -
Dans le panneau Style configurable, modifiez les accroches de thème disponibles pour le composant sélectionné, selon vos besoins.
Figure 2. Panneau de style configurable Les accroches de thème modifiables disponibles dépendent du type de composant que vous avez sélectionné. Par exemple, si vous sélectionnez un composant de badge, vous pouvez modifier les couleurs et les accroches d’accessibilité du badge. Si vous sélectionnez un composant de lien de texte, vous pouvez modifier la couleur de base et les accroches d’accessibilité.
Remarque :Une fois que vous avez mis à jour les hooks spécifiques au composant, les modifications que vous apportez au style global ne mettent pas à jour les styles du composant, car les styles spécifiques aux composants sont prioritaires sur les styles définis globalement. -
Si vous sélectionnez une couleur à modifier, le sélecteur de couleurs s’ouvre.
Figure 3. Sélecteur de couleurs Remarque :Par défaut, le sélecteur de couleurs affiche toutes les couleurs disponibles pour le composant. Vous pouvez sélectionner le curseur Masquer les choix inaccessibles pour limiter les choix de couleurs aux couleurs identifiées comme accessibles, conformément aux directives WCAG (Web Content Accessibility Guidelines). -
Accédez à l’éditeur de composants où vous pouvez appliquer un style à divers aspects d’un composant à l’aide de l’une des deux méthodes répertoriées :
- Double-cliquez sur la mosaïque du composant.
- Sélectionnez le bouton Interactions de style, Sous-composants de style ou Variantes de style dans le panneau Styles configurables, en fonction de ce qui est disponible pour ce composant spécifique. Remarque :Tous les composants ne contiennent pas d’éléments modifiables.
Figure 4. Panneau de style configurable avec bouton Variantes de style
-
Dans l’éditeur de composants, choisissez l’interaction, la variante ou le sous-composant du composant sélectionné, puis modifiez les accroches de thème disponibles.
Remarque :Une fois que vous avez enregistré les modifications apportées à l’un des crochets de couleur, un symbole Supprimer le remplacement apparaît. Le symbole Supprimer le remplacement vous permet de rétablir les couleurs générées automatiquement par vos changements de couleur.
- Facultatif :
Revenez à l’écran Vue d’ensemble du composant à l’aide des liens du chemin de navigation.
Figure 5. Navigation dans le fil d’Ariane de modification de composant
Résultats
Si votre thème est publié, les modifications apportées à votre composant sont visibles par les utilisateurs qui ont appliqué votre thème lors de l’actualisation. Pour plus d’informations sur la publication de votre thème, reportez-vous à la section Publiez vos thèmes avec Générateur de thèmes.