Créer un thème de portail

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 services > Thèmes, puis sélectionnez Nouveau.
2. Renseignez les champs de formulaire, puis dans le menu contextuel du formulaire, sélectionnez Enregistrer.

   Tableau 1. Champs de formulaire de thèmes

   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.

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.

   Tableau 2. Champs du formulaire de 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 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.
   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. 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.

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.

   Tableau 3. Champs de formulaire JS Include

   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. 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, 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.