---
schema_version: "1"
id: a46d2989fea5c78417d939eabe91a53039b13feead06f907e9dec35b4bcda6c6
title: Reference Stylesheet Names in an Omniscript's JSON (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_reference_stylesheet_names_in_an_omniscript_s_json.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_reference_stylesheet_names_in_an_omniscript_s_json.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: bee4a3d56264b813bb7b263f5df6ce659162cbf805274e59d205b4e45603d2d8
description: For the managed package runtime, apply CSS changes to an Omniscript using SLDS or Newport styling by referencing a CSS file static resource in your Omniscript's JSON properties. For example, a CSS sheet can change the text color for every Number element in an Omniscript without using custom Lightning web components to override the Number element.
products:
  - Omnistudio
release: "264"
---
# Reference Stylesheet Names in an Omniscript's JSON (Managed Package)

For the managed package runtime, apply CSS changes to an Omniscript using SLDS or Newport styling by referencing a CSS file static resource in your Omniscript's JSON properties. For example, a CSS sheet can change the text color for every Number element in an Omniscript without using custom Lightning web components to override the Number element.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d156412e46">
              <p style="margin-bottom:0;">Required Versions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required Versions" class="slds-cell-wrap" style="vertical-align:top;" headers="d156412e46 ">
              <p style="margin-bottom:0;">Available beginning with Vlocity Insurance and Health Spring '20 and CME Fall '20.</p>
            </td>

          </tr>
        </tbody>
      </table>

Before You Begin

1. Choose SLDS or Newport as the Omniscript theme.
2. View the Omniscript's original CSS by inspecting the element's on the page in console tools or by downloading the CSS files for LWCs in the Omniscript. [Download](https://volt.my.salesforce.com/sfc/p/o0000000IKm8/a/3m0000005uk5/pNCl8lE_lxOZfTHjuY4BfIiPpP0MFqgn3sIKiSoUD84).
3. Create a CSS style sheet with custom CSS.
4. In Salesforce, 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) (Salesforce Documentation).

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)

Note

Beginning with Vlocity Insurance and Health Summer '20, Multi-Language Omniscripts provide beta support for right-to-left languages.

1. In Omniscript, go to **Setup** or **Script Configuration** and click **Edit as JSON**.
2. In the JSON properties, find the node named `style sheet`:
    
    ```
    "stylesheet": {
      "newport": "",
      "lightning": ""
    }
    ```
3. Add the name of the static resource as a value to `newport` or `lightning`.
    
    ```
    "stylesheet": {
      "newport": "",
      "lightning": "myCustomOmniScriptStyles"
    }
    ```
4. (Optional) Available beginning with Vlocity Insurance and Health Summer '20. Add the name of the static resource as a value to `newportRtl` or `lightningRtl` to display the styling for right-to-left languages. If you are updating an existing Omniscript, add `newportRTL` and `lightningRtl` manually.
    
    ```
    "stylesheet": {
      "newport": "",
      "lightning": "",
      "newportRtl": "myRtlNewportStyles",
      "lightningRtl": ""
    }
    ```
5. Activate and preview the Omniscript to view your custom styling.