---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Définition des styles de portail

# Définition des styles de portail {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute de lecture

Les pages sont composées de conteneurs, de colonnes, de lignes, de widgets et d'instances de widget. Vous pouvez configurer le CSS de chaque composant ou utiliser le CSS défini dans le thème et la marque comme définitions globales pour le portail. Si vous ne définissez pas le CSS dans le thème ou la marque, les valeurs par défaut de Bootstrap sont utilisées.

Vous pouvez définir CSS dans votre portail à plusieurs niveaux.  

Paramètres d'amorce par défaut

:   Si aucun autre CSS n'est défini, tous les éléments utilisent les valeurs par défaut de la version Bootstrap 3.3.6. Vous pouvez utiliser les [classes d'assistance CSS Bootstrap](https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp) avec n'importe quel Portail de services champ qui accepte CSS comme valeur. Pour afficher ou masquer Portail de services les conteneurs, utilisez les classes d'aide Bootstrap CSS Responsive Utilities telles que `visible-lg` ou `hidden-md`.

Couleurs du thème de l'éditeur de marque/CSS du portail

:   CSS défini dans l'onglet Couleurs de thème de l'éditeur de marque. Les modifications apportées aux couleurs du thème dans l'éditeur de marques apparaissent dans le champ de variables CSS de la table du portail \[sp_portal\]. La personnalisation des couleurs de thème remplace les paramètres Bootstrap par défaut.

CSS du thème

:   CSS défini dans le champ de variables CSS de la table Thèmes \[sp_theme\]. Utilisez le CSS du thème autant que possible pour permettre une évolution plus flexible de votre portail à l'avenir.

    L'utilisation d'un thème remplace les couleurs du thème CSS/de l'éditeur de marques du portail.

Page CSS

:   CSS défini dans le champ CSS spécifique à la page de la table Pages \[sp_page\].

    Le CSS spécifique à la page remplace le CSS du thème.

Classes CSS

:   Vous pouvez définir des éléments de classes CSS sur la page à l'intérieur de chaque enregistrement respectif.

Widget CSS

:   CSS défini dans le champ CSS de la table Widgets \[sp_widget\].

    Le CSS du widget remplace le CSS du conteneur, de la colonne et de la ligne.

CSS d'instance de widget

:   CSS défini dans le champ CSS de la table d'instance \[sp_instance\].

Le CSS d'instance de widget remplace toutes les autres définitions CSS.  
Remarque :  
Dans certains cas, les styles par défaut pour l'accessibilité peuvent remplacer le CSS défini pour un portail.  
Figure 1. Hiérarchie de l'application de style dans Portail de services
* **[Configurer la personnalisation du portail](https://servicenow-prod.fluidtopics.net/4nGSlKoZ~~k5MQUsSAPR6g)**   
  Utilisez cette fonction Éditeur de marque pour donner à votre portail un aspect personnel.
* **[Activer la personnalisation du thème La Jolla](https://servicenow-prod.fluidtopics.net/XVv1M3vRXreSydwIiuTL3g)**   
  Activez la marque La Jolla du portail de services pour appliquer ServiceNow une image de marque, qui inclut la conformité WCAG-AA pour le contraste. Ce module d'extension est actif par défaut sur les nouvelles instances, mais les administrateurs doivent l'activer sur les instances mises à niveau à partir de versions antérieures.
* **[Créer un thème de portail](https://servicenow-prod.fluidtopics.net/wQuvAUvQSX88jQdzR2PsiA)**   
  Si vous avez besoin de plus de personnalisation que ce que l'éditeur de marque peut fournir, vous pouvez créer votre propre thème personnalisé.
* **[Activer le redimensionnement du texte dans votre portail](https://servicenow-prod.fluidtopics.net/uipFmo7aOzVbEPvypAbFTg#enable-text-resize)**   
  Activez le redimensionnement du texte pour augmenter la taille de votre texte jusqu'à 200 % via les paramètres de votre navigateur.
* **[Style pour les langues de droite à gauche dans les portails](https://servicenow-prod.fluidtopics.net/52rJTucbAAknvMdv2c1Zrw)**   
  La localisation d'un portail pour les langues de droite à gauche nécessite un CSS qui reflète la direction des pages du portail.