---
schema_version: "1"
id: e021c75027882313e16ae57d538b643209486090ecdecf0bc82649d45990d4cd
title: Custom Styles for Omniscripts
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_style_omniscripts_18959.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: d4c15afa9d7f02c78a9b4fd697f1819e459d08b429167985b2600b55f657a4a6
description: 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.
products:
  - Omnistudio
release: "264"
---
# 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](https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&release=264.0.0&type=5)**  
    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](https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&release=264.0.0&type=5)**  
    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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_warning.png)

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](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources.htm).
    
    For information about styling systems, see [Light DOM](https://lwc.dev/guide/light_dom#implement-scoped-styles), [CSS](https://lwc.dev/guide/css#assign-css-stylesheets-to-a-component-with-the-stylesheets-property), and [Styling Hooks](https://www.lightningdesignsystem.com/platforms/lightning/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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png)

Note

Design Tokens are not supported in Safari browsers.

Before You Begin

- View the Design Tokens that have global access. See [Design Tokens](https://www.lightningdesignsystem.com/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](https://help.salesforce.com/s/articleView?id=xcloud.os_add_your_omniscript_to_an_experience_page_19992.htm&release=264.0.0&type=5 "In the Omnistudio standard runtime, add the standard Omniscript component to an Experience Builder page after activation.") 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;
        ```