Créer un thème de portail

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 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 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, vous devez le connaître pour appliquer le bon thème à un portail.
      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 d’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 afin que l’en-tête reste à l’écran lorsqu’un utilisateur fait défiler.
      Pied de page fixe Verrouille le pied de page en bas de la page afin que lorsqu’un utilisateur fait 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 de 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 Inclure 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 : 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 Une URL vers une feuille de style externe à associer au thème.
      Chargement différé

      Option permettant de charger l’include CSS de façon asynchrone pour améliorer le temps de chargement de la page. 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 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 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 permettant de 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 un JavaScript Include au thème, dans la liste connexe JS Include , sélectionnez Nouveau.
    6. Renseignez les champs de formulaire Inclure en JS et sélectionnez Soumettre.
      Tableau 3. Inclure les champs de formulaire 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 d’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 script 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 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 sélectionnée 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.