Styles personnalisés pour Omniscripts

Ajoutez un style personnalisé aux Omniscripts en utilisant des ressources statiques, en remplaçant les feuilles de style globales ou en utilisant des jetons de conception SLDS. Visualisez le comportement de chaque option de personnalisation dans le tableau de cette page, puis choisissez la solution qui répond à vos besoins.

• Application d'un style personnalisé aux Omniscripts avec des ressources statiques
  Pour appliquer des modifications CSS à un Omniscript en utilisant un style SLDS, consultez une ressource statique de fichier CSS dans la section Options de style du concepteur Omniscript. Par exemple, une feuille CSS peut changer la couleur du texte de chaque élément Number dans un Omniscript sans utiliser de composant Web Lightning personnalisé pour remplacer l'élément Number.
• Personnalisation des jetons de conception SLDS dans Omniscript
  Modifiez l'apparence d'un Omniscript en remplaçant les jetons SLDS Design de Salesforce. Les éléments Omniscript utilisent des jetons de conception SLDS pour le style. Remplacez les jetons qui ont un accès global pour modifier l'apparence de votre Omniscript.

Application d'un style personnalisé aux Omniscripts avec des ressources statiques

Pour appliquer des modifications CSS à un Omniscript en utilisant un style SLDS, consultez une ressource statique de fichier CSS dans la section Options de style du concepteur Omniscript. Par exemple, une feuille CSS peut changer la couleur du texte de chaque élément Number dans un Omniscript sans utiliser de composant Web Lightning personnalisé pour remplacer l'élément Number.

Avertissement

Utilisez une feuille de style CSS personnalisée avec précaution et évitez de cibler des éléments DOM dans des composants dont vous n'êtes pas propriétaire. Les modifications apportées à la structure interne d'un composant peuvent rompre votre CSS. Salesforce peut mettre à jour les implémentations de composants à tout moment, et le Support Salesforce ne peut pas vous aider à résoudre les problèmes CSS personnalisés.

1. Après avoir créé une feuille de style personnalisée, ajoutez le fichier CSS en tant que ressource statique.
   Consultez Utilisation de ressources statiques.

   Pour plus d'informations sur les systèmes de style, consultez Light DOM, CSS et Styling Hooks.

   Par exemple, customstyle.css est chargé en tant que ressource statique nommée customstyle.
2. Dans le concepteur Omniscript, dans Configuration, cliquez sur Options de style.
3. Dans le champ Nom du fichier de feuille de style Lightning personnalisé ou Nom du fichier de feuille de style Newport personnalisé, saisissez le nom de la ressource statique qui stocke votre style personnalisé.
   Par exemple, le customstyle source statique désigne le fichier customstyle.css chargé.
4. Si nécessaire, affichez un style personnalisé pour les langues de droite à gauche.
   1. Dans Configuration, cliquez sur Modifier en JSON.
   2. Pour afficher le style des langues de droite à gauche, ajoutez le nom de la ressource statique en tant que valeur à lightningRtl.
      Si vous mettez à jour un Omniscript existant, ajoutez lightningRtl manuellement.

      "stylesheet": {
        "lightning": "",
        "lightningRtl": "myRtlLightningStyles"
      }

5. Pour afficher votre style personnalisé, activez et prévisualisez l'Omniscript.

   Lorsque vous prévisualisez un Omniscript avec un Omniscript enfant avec une feuille CSS personnalisée, le contenu de l'Omniscript enfant n'affiche pas le style personnalisé.

Personnalisation des jetons de conception SLDS dans Omniscript

Modifiez l'apparence d'un Omniscript en remplaçant les jetons SLDS Design de Salesforce. Les éléments Omniscript utilisent des jetons de conception SLDS pour le style. Remplacez les jetons qui ont un accès global pour modifier l'apparence de votre Omniscript.

Remarque

Les jetons de conception ne sont pas pris en charge dans les navigateurs Safari.

Avant de commencer

• Affichez les jetons de conception qui ont un accès global. Consultez Jetons de conception.
• Prévisualisez et inspectez un Omniscript dans une Developer Console pour afficher les jetons actuels présents dans l'Omniscript.
• Vous pouvez désormais ajouter un Omniscript à un site Experience Cloud Lightning Web Runtime (LWR). Cependant, consultez Ajouter votre Omniscript à une page Experience Cloud avant de procéder.

1. Dans le panneau Configuration de votre Omniscript, cliquez sur Section Options de style.
2. Dans le champ Jetons de conception du système de conception Lightning, saisissez les jetons en appliquant les modifications suivantes:
   1. Retirez les tirets et appliquez la chamelle au jeton. Par exemple, le $spacing-xx-small de jeton doit être $spacingXxSmall.
   2. Remplacez le symbole $ du jeton par --lwc-.

      --lwc-spacingXxSmall

   3. Définissez la valeur du jeton et terminez la ligne de chaque jeton en utilisant un ;.

      --lwc-spacingXxSmall: 10rem; 
                      --lwc-spacingSmall: 5rem;
                      --lwc-spacingMedium: 2rem;
                    

   4. Si vous devez utiliser votre Omniscript dans des pages Experience Cloud, vous devez ajouter des jetons de conception spécifiques à ces pages. Notez que les jetons de conception des sites Experience Cloud diffèrent selon que vous utilisez un site basé sur Aura ou un site LWR. Vous pouvez toutefois ajouter tous les jetons. La page référençant votre Omniscript sélectionne les jetons dont il a besoin pour mettre en forme votre Omniscript.

      // Note: Style for Aura-based Experience Cloud site
      --lwc-spacingXxSmall: 10rem; 
      --lwc-spacingSmall: 5rem;
      --lwc-spacingMedium: 2rem;
      // Note: Style for a Lightning Web Runtime (LWR) site
      --dxp-g-spacing-xxsmall: 10rem;
      --dxp-g-spacing-small: 5rem;
      --dxp-g-spacing-medium: 2rem;
      // Note: Style for a Lightning page
      --slds-g-spacing-1: 10rem;
      --slds-g-spacing-2: 5rem;
      --slds-g-spacing-3: 2rem;