Modifier l’apparence par défaut des composants

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 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 dispositions de colonne ou une colonne) contenant des composants. Personnalisez le style des composants en sélectionnant le composant dans l’arborescence de contenu ou appliquez des styles à plusieurs composants en plaçant les 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 Yokohama. 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 sur l’étape, sélectionnez l’icône de menu Ouvrir , 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 d’expérience 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 le générateur d’IU, consultez Créer une page dans le générateur d’IU.
    4. Dans le panneau Contenu, sélectionnez un composant ou une couche (par exemple, Corps, une disposition en colonne ou une 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é (disposition en colonne et colonne)
      Spécifie les paramètres d’accessibilité tels que le nom de la région ARIA, le niveau de titre de la région ARIA, le rôle ARIA et l’inclusion du titre 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 disposition 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 couleur 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 d’épaisseur, de type, de couleur et de forme d’angle.
      Mise en page (corps, disposition 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 le 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 du 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 des marges et des marges intérieures.
      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 marge intérieure 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 arrière-plan
      • style de bordure
      • largeur de bordure
      • couleur de bordure
      • rayon de la bordure
      • ombre de zone
      • hauteur
      • hauteur minimale
      • hauteur maximale
      • marge
      • déborder
      • Marge intérieure
      • largeur
      • largeur minimale
      • largeur max.
      • index 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 modifier 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 des styles directement 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 est d’un niveau supérieur à celle du composant dans la hiérarchie de contenu et est étiquetée par défaut comme Principal.

    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 le générateur d’IU, consultez Créer une page dans le 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 normalisées.
      Les propriétés CSS suivantes sont les plus couramment utilisées pour appliquer des styles pour les composants au sein des conteneurs :
      • couleur d’arrière-plan
      • image arrière-plan
      • style de bordure
      • largeur de bordure
      • couleur de bordure
      • rayon de la bordure
      • ombre de zone
      • hauteur
      • hauteur minimale
      • hauteur maximale
      • marge
      • déborder
      • Marge intérieure
      • largeur
      • largeur minimale
      • largeur max.
      • index 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 des 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 basé sur des normes.