Modifier l’apparence par défaut des composants
Définissez les styles des composants et des wrappers pour modifier l’aspect 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 wrappers (tels que le corps, les dispositions de colonne 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 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 à Gérer le style visuel des expériences UI Builder.
Cette tâche s’applique au nouveau système de mise en page introduit dans Washington DC. 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.
Procédure
-
Dans le cas d’un corps ou d’un composant, sélectionnez l’onglet Styles dans le panneau de configuration.
-
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 les 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 (poteau 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 dans l’élément de mise en page parent, tel qu’une colonne ou une disposition de 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 ou dans l’onglet Personnalisé où vous pouvez spécifier n’importe quelle couleur au format HEX, RVB ou TSL.
- Bordure (Mise en page des colonnes, 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 remplissage. Spécifiez l’épaisseur de la bordure, le type, la couleur et la forme des coins. Pour les composants, vous avez la possibilité d’utiliser un CSS personnalisé pour la bordure.
- Mise en page (Corps, Mise en page de colonne et Colonne)
- 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).
- Shadow (disposition en colonnes, colonne et composant)
- Ajoute des effets d'ombre autour du composant. 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.
- Espacement (corps, disposition des colonnes et composant)
- Margin définit la taille de l’espace à l’intérieur immédiat du corps, de la disposition de colonne ou du composant. Le remplissage définit la taille de l’espace à l’extérieur immédiat du corps, de la disposition de colonne ou du composant. Sélectionnez Marge ou Marge intérieure pour définir la même taille pour les quatre côtés.
- Vous pouvez définir la taille de chaque marge ou côté de remplissage en sélectionnant le paramètre actuel, puis en sélectionnant une option.
- Facultatif : Pour Corps et 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-planimage d’arrière-planstyle bordurelargeur de bordurecouleur de bordurerayon de bordureombre de boîtehauteurhauteur minimalehauteur maxmargeDébordementremplissagelargeurlargeur minimalelargeur maximaleindex z
Important :Certains composants contiennent des configurations d’application de style intégrées que vous ne pouvez pas remplacer par CSS dans Générateur d'IU. Pour en savoir plus sur le remplacement de ces configurations de style, reportez-vous à la section Gérer le style visuel des expériences UI Builder.
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 aspect 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 de 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 à Gérer le style visuel des expériences UI Builder.
Procédure
-
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