Changer l’apparence par défaut des composants

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 6 minutes de lecture

    • Définissez les styles des composants et des couches pour modifier l’apparence par défaut.

    Cette vidéo vous montre comment effectuer la procédure suivante.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Cette tâche décrit comment ajouter des styles aux composants et aux couches (telles que le corps, les mises en page en colonnes ou une colonne) contenant des composants. Personnalisez le style du composant en sélectionnant le composant dans l’arborescence de contenu ou appliquez des styles à plusieurs composants en plaçant des composants à l’intérieur d’une couche.

    Pour en savoir plus sur l’ajout d’un style à l’ensemble de votre expérience, reportez-vous à la section Gérer le style visuel des expériences du générateur d'IU.

    Cette tâche s’applique au nouveau système de mise en page introduit dans Zurich. Si votre page utilise l’ancien système de mise en page, consultez Ajouter un style à un composant à l’aide de l’ancien système de mise en page pour plus d’informations.

    Remarque :
    Lorsque vous ajoutez et configurez des composants sur la page, l’étape affiche votre travail. Si vous apportez des modifications et que les mises à jour ne se chargent pas à l’étape, sélectionnez l’icône Ouvrir le menu , puis sélectionnez Développeur > Recharger l’étape. Le rechargement de l’étape affiche vos changements, mais ne les enregistre pas. Pour enregistrer votre travail, sélectionnez Enregistrer en haut à droite.

    Vue Experience avec le menu Ouvrir sélectionné affichant les options Développeur et Recharger l’étape.

    Procédure

    1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Créez ou ouvrez une page ou une variante de page.
      Pour plus d’informations sur la création d’une page dans Générateur d’IU, consultez Créer une page dans Générateur d’IU.
    4. Dans le panneau Contenu, sélectionnez un composant ou une couche (par exemple, Corps, Mise en page en colonne ou Colonne) pour lequel vous souhaitez ajouter un style.
    5. Pour Corps ou un composant, sélectionnez l’onglet Styles dans le panneau de configuration.
      Onglet Styles du panneau de configuration.
    6. Utilisez les représentations visuelles de l’onglet Styles pour décider ce qui convient le mieux à l’apparence de votre page.
      Accessibilité (mise en page en colonne et colonne)
      Spécifie des paramètres d’accessibilité tels que le nom de la région ARIA, le niveau d’en-tête de la région ARIA, le rôle ARIA et l’inclusion de l’en-tête ARIA. Pour plus d’informations, consultez la documentation ARIA sur developer.servicenow.com.
      Alignement (colonne et composant)
      Pour une colonne, définit la façon dont les composants s’alignent au sein de la colonne en tant que groupe. Pour un composant, définit la façon dont le composant s’aligne sur l’élément de mise en page parent, tel qu’une disposition en colonne ou en colonne.
      Arrière-plan (corps, disposition en colonne, colonne et composant)
      Définit la couleur d’arrière-plan derrière l’élément de mise en page. Sélectionnez une couleur dans l’onglet Mes couleurs du sélecteur de couleurs où vous pouvez afficher les couleurs disponibles dans une grille ou une liste. Vous pouvez également utiliser l’onglet Personnalisé pour spécifier n’importe quelle couleur en HEX, RVB ou TSL.
      Options de couleurs d’arrière-plan dans l’onglet Liste.
      Bordure (disposition de colonne, colonne et composant)
      Ajoute une bordure autour du contenu. La bordure est placée à l’intérieur immédiat de la marge et à l’extérieur immédiat du rembourrage. Spécifiez l’épaisseur, le type, la couleur et la forme d’angle de la bordure. Pour les composants, vous avez la possibilité d’utiliser un CSS personnalisé pour la bordure.
      Option de bordure développée affichant les options Épaisseur, Type, Couleur et Forme d’angle.
      Mise en page (corps, mise en page en colonne, colonne et composant)
      Pour le corps et la colonne, spécifie la direction, l’alignement et la justification du contenu. Pour la mise en page des colonnes, spécifie le nombre de colonnes et l’écart entre les colonnes (espace entre les colonnes). Pour certains composants, tels que Conteneur de base de carte, sélectionnez Modifier CSS pour appliquer des styles CSS spécifiques à la couche du conteneur et à la couche interne contrôlant les composants dans le conteneur.

      Modifier le modal de styles CSS avec les options de style pour les conteneurs et les styles de mise en page pour les composants à l’intérieur du conteneur.

      Shadow (disposition en colonne, colonne et composant)
      Ajoute des effets d'ombre autour du contenu. Vous avez la possibilité d’utiliser un CSS personnalisé.
      Dimensionnement (composant)
      Pour les composants applicables, définit la hauteur et la largeur par défaut, minimale et maximale du composant (en px, %, em, rem ou une valeur personnalisée). Cette valeur est pertinente lorsque la fenêtre du navigateur est redimensionnée.
      Option de dimensionnement développée affichant les options de largeur et de hauteur.
      Espacement (corps, disposition des colonnes et composant)
      La marge définit la taille de l’espace à l’intérieur immédiat du corps, de la disposition des colonnes ou du composant. Le remplissage définit la taille de l’espace à l’extérieur immédiat du corps, de la disposition des colonnes ou du composant. Sélectionnez Marge ou Marge intérieure pour définir la même taille pour les quatre côtés.
      Options d’espacement de marge et de remplissage.
      Vous pouvez définir la taille de chaque marge ou côté de marge intérieure en sélectionnant le paramètre actuel, puis en sélectionnant une option.

      Option d’espacement avec paramètres de marge et de remplissage pour les quatre côtés du corps, de la disposition des colonnes ou du composant.

    7. Facultatif : Pour le corps et les composants, vous pouvez modifier le code CSS en sélectionnant le lien Afficher et modifier CSS en bas de l’onglet Styles .
      L’onglet Styles affiche un éditeur de code de styles CSS. Les propriétés CSS suivantes sont les plus couramment utilisées :
      • couleur d’arrière-plan
      • image d’arrière-plan
      • style de bordure
      • largeur de bordure
      • couleur de bordure
      • rayon de bordure
      • ombre de zone
      • hauteur
      • hauteur minimale
      • hauteur maximale
      • marge
      • Débordement
      • Marge intérieure
      • largeur
      • largeur minimale
      • largeur max.
      • indice z
      Éditeur de code de styles CSS.
      Important :
      Certains composants contiennent des configurations de style intégrées que vous ne pouvez pas remplacer par CSS dans Générateur d'IU. Pour plus d’informations sur le remplacement de ces configurations de style, reportez-vous à la section Gérer le style visuel des expériences du générateur d'IU.
    8. Dans l’en-tête principal, sélectionnez Enregistrer pour enregistrer vos modifications.

    Ajouter un style à un composant à l’aide de l’ancien système de mise en page

    Définissez les styles CSS d’un composant pour changer son apparence par défaut.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Cette tâche décrit comment ajouter des styles à la couche contenant votre composant, ce qui est généralement recommandé au lieu d’appliquer directement des styles au composant. Assurez-vous que le composant dont vous souhaitez définir les styles est placé dans un composant de conteneur pour placer le composant dans une couche. La couche de votre composant se trouve à un niveau supérieur à celle du composant dans la hiérarchie de contenu et est étiquetée par défaut comme principale.

    Pour ajouter un style à une page entière, vous pouvez utiliser un CSS basé sur des normes dans la couche de la page. Pour en savoir plus sur l’ajout d’un style à l’ensemble de votre expérience, reportez-vous à la section Gérer le style visuel des expériences du générateur d'IU.

    Procédure

    1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Créez ou ouvrez une page ou une variante de page.
      Pour plus d’informations sur la création d’une page dans Générateur d’IU, consultez Créer une page dans Générateur d’IU.
      Remarque :
      Un composant doit être placé dans un conteneur avant d’ajouter des styles au composant.
    4. Sélectionnez le conteneur contenant le composant auquel vous souhaitez ajouter un style.
      Le conteneur est généralement un niveau au-dessus du composant dans l’arborescence de contenu.
      L’onglet Styles apparaît dans le panneau de configuration.
    5. Dans la fenêtre Styles CSS, saisissez des propriétés et des valeurs CSS basées sur des normes.
      Les propriétés CSS suivantes sont les plus couramment utilisées pour appliquer des styles aux composants dans les conteneurs :
      • couleur d’arrière-plan
      • image d’arrière-plan
      • style de bordure
      • largeur de bordure
      • couleur de bordure
      • rayon de bordure
      • ombre de zone
      • hauteur
      • hauteur minimale
      • hauteur maximale
      • marge
      • Débordement
      • Marge intérieure
      • largeur
      • largeur minimale
      • largeur max.
      • indice z
      Important :
      Certains composants contiennent des configurations de style intégrées que vous ne pouvez pas remplacer par CSS dans Générateur d'IU. Pour plus d’informations sur le remplacement de ces configurations de style, reportez-vous à la section Gérer le style visuel des expériences du générateur d'IU.
    6. Dans l’en-tête principal, sélectionnez Enregistrer pour enregistrer vos modifications.
      Figure 1. Ajouter un style à un composant dans le panneau de configuration Styles
      Option de styles CSS de l’onglet Styles qui peut être utilisée pour ajouter un style au corps ou à un composant à l’aide d’un CSS normalisé.