---
schema_version: "1"
id: 2b4be900cf81df1f6d2e67c155a546343fe22381a55a030d089d975259883310
title: Add Custom Style Sheets to Your OmniOut Application (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_custom_style_sheets_to_your_omniout_application.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_custom_style_sheets_to_your_omniout_application.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 034caa6214b814359565dc25ce26c956d7db09a676334cb0bf0600922a89c2ce
description: For the managed package runtime, include custom styling in your OmniOut project by using style sheets. Custom stylesheets aren’t included in the Omniscript or Flexcard off-platform download metadata. You must add them to your application before building the dist folder.
products:
  - Omnistudio
release: "264"
---
# Add Custom Style Sheets to Your OmniOut Application (Managed Package)

For the managed package runtime, include custom styling in your OmniOut project by using style sheets. Custom stylesheets aren’t included in the Omniscript or Flexcard off-platform download metadata. You must add them to your application before building the `dist` folder.

![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).

Custom styling done without using a style sheet for a custom LWC is included automatically in the downloaded off-platform LWC.

Before You Begin

1. For Omniscripts, create, then add a custom style sheet to your Omniscript. See [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.").
2. Build an OmniOut `dist` folder and move the folder's contents into your app. See [Move OmniOut into Your App (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_move_omniout_into_your_app.htm&release=264.0.0&type=5 "For the managed package runtime, generate a compiled dist folder to move OmniOut into your app project before deploying your app to a content management system.").

1. In Salesforce Setup's Quick Find box, enter Static Resources, and click **Static Resources**.
2. Locate and click the static resource that contains your CSS style sheet.
3. To download the static resource, click **View File**.
4. Copy the downloaded file into your app's primary styles folder.
5. To load the custom style sheet, add a reference to that file in your app's index.html file.
    
    **Example**
    
    ```
    <link rel="stylesheet" type="text/css" href=".../styles/my-custom-styles.css">
    ```

What’s next: [Connect Your OmniOut App (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_connect_your_omniout_app.htm&release=264.0.0&type=5 "For the managed package runtime, OmniOut connects your CMS to Salesforce through a proxy or directly. Configure a connection object to connect to the Salesforce Connected App. Connections are unique to your app's requirements and must be configured outside the scope of OmniOut.").