Custom Styles for Omniscripts

Add custom styling to Omniscripts by using static resources, overriding global stylesheets, or using SLDS design tokens. View the behavior of each customization option in this page's table, and choose the solution that meets your requirements.

• Apply Custom Styling to Omniscripts with Static Resources
  To apply CSS changes to an Omniscript using SLDS styling, refer to a CSS file static resource in the Styling Options section of the Omniscript designer. For example, a CSS sheet can change the text color for every Number element in an Omniscript without using a custom Lightning web component to override the Number element.
• Customize SLDS Design Tokens in Omniscript
  Modify the appearance of an Omniscript by overriding Salesforce's SLDS Design tokens. Omniscript elements use SLDS Design Tokens for styling. Override tokens that have global access to modify the appearance of your Omniscript.

Apply Custom Styling to Omniscripts with Static Resources

To apply CSS changes to an Omniscript using SLDS styling, refer to a CSS file static resource in the Styling Options section of the Omniscript designer. For example, a CSS sheet can change the text color for every Number element in an Omniscript without using a custom Lightning web component to override the Number element.

Warning

Use custom CSS cautiously and avoid targeting DOM elements in components you don’t own. Changes to a component's internal structure might break your CSS. Salesforce may update component implementations at any time, and Salesforce Support can't assist with custom CSS issues.

1. After you create a custom style sheet, add the CSS file as a static resource.
   See Using Static Resources.

   For information about styling systems, see Light DOM, CSS, and Styling Hooks.

   For example, customstyle.css is uploaded as a static resource named customstyle.
2. In the Omniscript designer, from Setup, click Styling Options.
3. In the Custom Lightning Stylesheet File Name or Custom Newport Stylesheet File Name field, enter the name of the static resource that stores your custom styling.
   For example, the static source customstyle refers to the uploaded customstyle.css file.
4. If needed, display custom styling for right-to-left languages.
   1. In Setup, click Edit as JSON.
   2. To display the styling for right-to-left languages, add the name of the static resource as a value to lightningRtl.
      If you’re updating an existing Omniscript, add lightningRtl manually.

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

5. To view your custom styling, activate and preview the Omniscript.

   When you preview an Omniscript with a child Omniscript with a custom CSS, the content for the child Omniscript doesn't show the custom styling.

Customize SLDS Design Tokens in Omniscript

Modify the appearance of an Omniscript by overriding Salesforce's SLDS Design tokens. Omniscript elements use SLDS Design Tokens for styling. Override tokens that have global access to modify the appearance of your Omniscript.

Note

Design Tokens are not supported in Safari browsers.

Before You Begin

• View the Design Tokens that have global access. See Design Tokens.
• Preview and inspect an Omniscript in a developer console to view the current tokens present in the Omniscript.
• You can now add an Omniscript on a Lightning Web Runtime (LWR) Experience Cloud site. However, review Add Your Omniscript to an Experience Cloud Page before you do this.

1. In your Omniscript's Setup panel, click Styling Options section.
2. In the Lightning Design System Design Tokens field, enter tokens by applying these changes:
   1. Remove the dashes and apply camelcase to the token. For example, the token $spacing-xx-small must be $spacingXxSmall.
   2. Replace the token's $ symbol with --lwc-.

      --lwc-spacingXxSmall

   3. Set the token's value, and end the line for each token using a ;.

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

   4. If you need to use your Omniscript on Experience Cloud pages, you must add design tokens specific to those pages. Note that design tokens for Experience Cloud sites differ based on whether you're using an Aura-based site or an LWR site. You can, however, add all tokens together. The page referencing your Omniscript picks up the tokens it needs to style your 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;