Si vous avez besoin de plus de personnalisations que l’éditeur de marques ne peut en 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 services > Thèmes, puis sélectionnez Nouveau.
2. Remplissez les champs de formulaire, puis dans le menu contextuel du formulaire, sélectionnez Enregistrer.

   Tableau 1. Champs du formulaire de thème

   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.
   Désactiver la compilation SCSS	Désactive la compilation de 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 de l’application.
   En-tête	Liste des en-têtes et pieds de page de la table 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 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 lorsque vous faites défiler, l’en-tête reste à l’écran.
   Pied de page fixe	Verrouille le pied de page en bas de la page de sorte que lorsque vous faites défiler, le pied de page reste à l’écran.
   Variables CSS	Propriétés personnalisées CSS que vous pouvez utiliser pour modifier 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 de variables CSS pour définir les variables CSS uniquement. Utilisez des includes CSS pour définir des règles CSS. À partir de la version Madrid, Sass et LESS peuvent être utilisés dans CSS Include.

3. Pour ajouter une feuille de style au thème, dans la liste connexe Inclure CSS , sélectionnez Nouveau.
4. Renseignez les champs du formulaire de feuille de style et sélectionnez Envoyer.

   Tableau 2. Champs du formulaire Feuille de style

   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 de l’application.
   Source	Sélectionnez l’une des options suivantes : Feuille de style : ajoutez 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 un 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.
   Feuille de style	Une 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 pour améliorer le temps de chargement des pages. Cette option doit être définie sur la même valeur pour tous les Includes CSS d’un thème. Il n’est pas recommandé d’activer le chargement asynchrone pour seulement certains includes CSS associés à un thème. Remarque : L’activation du chargement différé n’est pas recommandée pour les portails avec un clignotement 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 de chargement différé de l’enregistrement de thème.
   URL de fichier CSS de RTL	URL vers une feuille de style externe pour refléter la direction d’un portail lorsque la langue de la session est une langue de droite à gauche, comme 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.

5. Pour ajouter une inclusion JavaScript au thème, dans la liste connexe JS Include , sélectionnez Nouveau.
6. Remplissez les champs du formulaire Inclure en JS et sélectionnez Soumettre.

   Tableau 3. Champs de formulaire Inclure JS

   Champ	Description
   Nom complet	Nom de l’include JS. Souvenez-vous de ce nom pour associer l’include JS 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 de l’application.
   Source	Sélectionnez l’une des options suivantes : Script d’interface utilisateur : ajoutez un script d’interface utilisateur interne qui a été chargé dans la table de scripts d’interface utilisateur [sys_ui_script]. Utilisez des scripts d’interface utilisateur pour créer du JavaScript côté client et réutilisez-le dans plusieurs emplacements. Pour plus d’informations sur les scripts d’interface utilisateur, voir Scripts d’interface utilisateur. 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.
   Script d’interface utilisateur ou URL de fichier JS	Associez un script d’interface utilisateur interne ou une URL de fichier JavaScript, en fonction de l’option que vous sélectionnez dans le champ Source.
   Mis à jour	Date et heure de la dernière mise à jour de l’include JS
   Package	Le package de portail de services auquel l’include JS est associé. Par exemple, Pages de configuration de Portail de services. Ce champ est renseigné par défaut.