Créer un thème de portail

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

   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, 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 de l’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 façon.
   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 fait défiler l’écran, l’en-tête reste affiché.
   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 à l’écran.
   Variables CSS	Propriétés CSS personnalisées 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.

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

   Tableau 2. Champs du formulaire de feuille de style

   Champ	Description
   Nom	Nom de l’include CSS. Mémorisez 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 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.
   Feuille de style	Une feuille de style interne à associer au thème.
   URL de fichier CSS	URL d’une feuille de style externe à associer au thème.
   Chargement différé	Option permettant de charger le CSS Include 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 CSS Includes associés à un thème. Remarque : L’activation du chargement différé n’est pas recommandée pour les portails avec flashage de contenu sans style. Les CSS Includes pour lesquels la fonctionnalité Chargement différé est activée sont répertoriées dans la liste connexe Includes CSS de chargement différé dans l’enregistrement de thème.
   URL de fichier CSS de RTL	URL d’une feuille de style externe permettant de refléter la direction d’un portail lorsque la langue de la session s’écrit de droite à gauche, comme l’hébreu. Pour plus d’informations sur la prise en charge des langues s’écrivant de droite à gauche, reportez-vous à la section Style pour les langues s’écrivant de droite à gauche dans les portails.

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

   Tableau 3. Champs du formulaire Include JS

   Champ	Description
   Nom d'affichage	Nom de l’include JS. Mémorisez 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 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é 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 code JavaScript côté client et de le réutiliser à plusieurs emplacements. Pour plus d’informations sur les scripts d’interface utilisateur, consultez Scripts d’interface utilisateur. URL : lien vers un fichier JavaScript externe. Utilisez des URL externes pour utiliser le même fichier 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, selon l’option que vous sélectionnez dans le champ Source.
   Mis à jour	Date et heure de 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 Service Portal. Ce champ est renseigné par défaut.