--- 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 --- # Créer un thème de portail # Créer un thème de portail {#ariaid-title1} * Rversion finale: Xanadu * * Mis à jour 1 août 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes de lecture 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é. Seuls les utilisateurs ayant une compréhension de CSS doivent créer des thèmes personnalisés. 1. Accédez à la Portail de servicesThèmes, puis sélectionnez Nouveau. 2. Renseignez les champs de formulaire, puis dans le menu contextuel du formulaire, sélectionnez Enregistrer. {#c_CustomCSS__table_anh_ljr_mz__entry__2} | Champ | Description | |-|-| | Nom | Nom de votre thème. Utilisez ce nom pour associer le thème à votre portail. Ce nom n'est pas visible par les utilisateurs, vous devez le connaître pour appliquer le bon thème à un portail. | | Désactiver la compilation SCSS | Désactive la compilation SCSS et envoie le fichier CSS brut directement au client. | | Application | Le périmètre de l'enregistrement. L'enregistrement du menu d'en-tête et la table source doivent avoir le même périmètre d'application. | | En-tête | Liste des en-têtes et pieds de page de la table de sp_header_footer que vous pouvez associer à un thème de portail. Les en-têtes et les pieds de page sont des widgets et peuvent être configurés de la même manière. | | Pied de page | Liste des en-têtes et pieds de page de la table de sp_header_footer que vous pouvez associer à un thème de portail. | | En-tête fixe | Verrouille l'en-tête en haut de la page de sorte que lorsqu'un utilisateur le fait défiler, il reste à l'écran. | | Pied de page fixe | Verrouille le pied de page en bas de la page de sorte que lorsqu'un utilisateur fait défiler la page, le pied de page reste sur l'écran. | | Variables CSS | Propriétés personnalisées CSS que vous pouvez utiliser pour changer la couleur et les styles d'un portail. Par exemple, le thème Stock utilise certaines des variables suivantes : $sp-logo-margin-x: 15px !default; $sp-tagline-color: $text-color !default; $navbar-inverse-bg: #3a3f51 !default; Remarque : Utilisez le champ Variables CSS pour définir les variables CSS uniquement. Utilisez Includes CSS pour définir les règles CSS. À compter de la version Madrid, Sass et LESS peuvent être utilisés dans Includes CSS. | [Tableau 1. Champs de formulaire de thèmes] {#c_CustomCSS__table_anh_ljr_mz} 3. Pour ajouter une feuille de style au thème, dans la liste connexe Include CSS , sélectionnez Nouveau. 4. Renseignez les champs du formulaire de feuille de style et sélectionnez Soumettre. {#c_CustomCSS__table_ew1_jjr_mz__entry__2}{#c_CustomCSS__p_nmg_nfg_h1c} | Champ | Description | |-|-| | Nom | Nom de l'include CSS. Souvenez-vous de ce nom pour associer l'include CSS au thème. | | Application | Le périmètre de l'enregistrement. L'enregistrement du menu d'en-tête et la table source doivent avoir le même périmètre d'application. | | Source | Sélectionnez l'une des options suivantes : * Feuille de style : ajoute une feuille de style interne qui a été téléchargée dans la table CSS \[sp_css\]. Par exemple, ng-sortable.min.css. Les feuilles de style internes utilisent le CSS standard dans le champ CSS. * URL : lien vers une feuille de style externe. Utilisez des feuilles de style externes pour utiliser le même CSS qu'un site Web d'entreprise ou une autre ressource en ligne. {#c_CustomCSS__ul_ehs_5wm_b1b} | | Feuille de style | Feuille de style interne à associer au thème. | | URL de fichier CSS | URL vers une feuille de style externe à associer au thème. | | Chargement différé | Option permettant de charger l'include CSS de manière asynchrone afin d'améliorer le temps de chargement de la page. Cette option doit être définie sur la même valeur pour tous les CSS Includes d'un thème. Il n'est pas recommandé d'activer le chargement asynchrone uniquement pour certains includes CSS associés à un thème.{#c_CustomCSS__p_lmg_nfg_h1c} Remarque : L'activation du chargement différé n'est pas recommandée pour les portails avec flashage de contenu sans style. Les includes CSS pour lesquels le chargement différé est activé sont répertoriés dans la liste connexe Includes CSS à chargement différé dans l'enregistrement de thème. | | URL de fichier CSS de RTL | URL vers une feuille de style externe permettant de refléter la direction d'un portail lorsque la langue de la session est une langue de droite à gauche, telle que l'hébreu. Pour plus d'informations sur la prise en charge des langues de droite à gauche, reportez-vous à la section [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."). | [Tableau 2. Champs du formulaire de feuille de style] {#c_CustomCSS__table_ew1_jjr_mz} 5. Pour ajouter une inclusion JavaScript au thème, dans la liste connexe Inclusion JS , sélectionnez Nouveau. 6. Renseignez les champs du formulaire Inclusion JS et sélectionnez Soumettre. {#c_CustomCSS__table_d4l_1bn_b1b__entry__2} | Champ | Description | |-|-| | Nom d'affichage | Nom de l'include JS. Mémoriser ce nom pour associer le JS Include au thème. | | Application | Le périmètre de l'enregistrement. L'enregistrement du menu d'en-tête et la table source doivent avoir le même périmètre d'application. | | Source | Sélectionnez l'une des options suivantes : * Script d'interface utilisateur : ajouter un script d'interface utilisateur interne qui a été téléchargé dans la table de scripts d'interface utilisateur \[sys_ui_script\]. Les scripts d'interface utilisateur vous permettent de créer du JavaScript côté client et de le réutiliser à plusieurs emplacements. Pour en savoir plus sur les scripts d'interface utilisateur, consultez [Scripts d'interface utilisateur](https://www.servicenow.com/docs/access?context=c_UIScripts&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US). * URL : lien vers un fichier JavaScript externe. Utilisez des URL externes pour utiliser le même JavaScript qu'un site Web d'entreprise ou une autre ressource en ligne. {#c_CustomCSS__ul_e4l_1bn_b1b} | | Script d'interface utilisateur ou URL de fichier JS | Associez un script d'interface utilisateur interne ou une URL de fichier JavaScript, selon l'option que vous sélectionnez dans le champ Source. | | Date de mise à jour | Date et heure de la dernière mise à jour de l'include JS | | Package | Le package du portail de services auquel l'include JS est associé. Par exemple, les pages de configuration de Portail de services. Ce champ est renseigné par défaut. | [Tableau 3. Champs de formulaire JS Include] {#c_CustomCSS__table_d4l_1bn_b1b} {#c_CustomCSS__ol_wbw_4f5_qv}