---
schema_version: "1"
id: 48677805a739e5f973357f2415b9da052754d89d2982a1ccc6c9668114a40dd2
title: Style Omniscripts (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_style_omniscripts.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2aa3710b07fad811c73e7720b9717cf8585048b41eaf389bfdcf72cc79fc89a9
description: For the managed package runtime, add custom styling to Omniscripts by using static resources, extending an Element's Lightning web component, 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"
---
# Style Omniscripts (Managed Package)

For the managed package runtime, add custom styling to Omniscripts by using static resources, extending an Element's Lightning web component, 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.

![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>
        <col>
        <col>
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d175566e47">
            <p style="margin-bottom:0;">Styling Option</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d175566e53">
            <p style="margin-bottom:0;">Description</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d175566e59">
            <p style="margin-bottom:0;">Supported Design Systems</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Styling Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e47 ">

          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e53 ">
            <p style="margin-bottom:0;">Add custom styles to Omniscript using a custom style sheet.</p>
          </td>

          <td data-label="Supported Design Systems" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e59 ">
            <p style="margin-bottom:0;">SLDS, NDS</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Styling Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e47 ">

          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e53 ">
            <p style="margin-bottom:0;">Create a custom LWC that extends an Omniscript to add custom HTML, JS, and
              CSS.</p>
          </td>

          <td data-label="Supported Design Systems" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e59 ">
            <p style="margin-bottom:0;">SLDS, NDS</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Styling Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e47 ">

          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e53 ">
            <p style="margin-bottom:0;">Override the Newport Design System with custom styles for an entire
              Salesforce org.</p>
          </td>

          <td data-label="Supported Design Systems" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e59 ">
            <p style="margin-bottom:0;">NDS</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Styling Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e47 ">

          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e53 ">
            <p style="margin-bottom:0;">Add customizations to SLDS Design Tokens that exist in the Omniscript.</p>
          </td>

          <td data-label="Supported Design Systems" class="slds-cell-wrap" style="vertical-align:top;" headers="d175566e59 ">
            <p style="margin-bottom:0;">SLDS</p>
          </td>

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

- **[Apply Custom Styling to Omniscripts with Static Resources (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_apply_custom_styling_to_omniscripts_with_static_resources.htm&release=264.0.0&type=5)**  
    For the managed package runtime, to apply CSS changes to an Omniscript using SLDS or Newport styling, refer to a CSS file static resource in the Styling Options section of the LWC 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.
- **[Reference Stylesheet Names in an Omniscript's JSON (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_reference_stylesheet_names_in_an_omniscript_s_json.htm&release=264.0.0&type=5)**  
    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.
- **[Apply Global Branding to Omniscripts (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_apply_global_branding_to_omniscripts.htm&release=264.0.0&type=5)**  
    For the managed package runtime, apply global style changes to Omniscripts by using the Newport Design System, which you can download and use to edit and override existing Newport CSS styling.
- **[Customize SLDS Design Tokens in Omniscript (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_customize_slds_design_tokens_in_omniscript.htm&release=264.0.0&type=5)**  
    For the managed package runtime, 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.