# Omniscript styling, design tokens and element overrides

*Omnistudio Developer Study Guide · Omniscripts · Last updated October 27, 2026 · https://www.certifyforce.com/study-guide/omnistudio-developer/omniscripts/omniscript-styling-design-tokens-and-element-overrides*

How to style an Omniscript with a CSS static resource in Styling Options, override SLDS design tokens for Lightning pages, Aura sites and LWR sites, pick the Lightning or Newport theme, and replace element components with LWC Component Override or Element Type to LWC Component Mapping.

- Certification: Salesforce Omnistudio Developer
- Exam section: Omniscripts
- Study guide: https://www.certifyforce.com/study-guide/omnistudio-developer

**Official exam objective:**

> Customize Omniscript appearance using styling or themes.

## What the exam expects

- Apply custom CSS to an Omniscript through a static resource named in Styling Options, including right-to-left styling.
- Convert SLDS design tokens to the --lwc- format and add the tokens Aura sites, LWR sites and Lightning pages need.
- Choose the Lightning or Newport theme and configure the Step Chart.
- Replace one element's component with LWC Component Override, or every element of a type with Element Type to LWC Component Mapping.
- Interpret what Preview shows for child Omniscripts with custom CSS.

Key terms: **static resource** (an uploaded file, here a CSS sheet, referenced by name), **Styling Options** (the Setup section holding stylesheet names and design tokens), **design token** (a named SLDS style value such as spacing), **LWC Component Override** (an element property naming a custom component that replaces it), **useCustomLMS** (a Setup JSON property that lets custom components talk to standard runtime components).

## Key facts

| Fact | Detail | Source |
|---|---|---|
| Stylesheet fields | Custom Lightning or Custom Newport Stylesheet File Name take a static resource name | [Custom Styles](https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&language=en_US&type=5) |
| Right-to-left styling | Static resource name in stylesheet.lightningRtl | [Custom Styles](https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&language=en_US&type=5) |
| Child Omniscript CSS in Preview | Not shown | [Preview](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_an_omniscript_8849.htm&language=en_US&type=5) |
| Token conversion | $spacing-small → --lwc-spacingSmall: value; | [Custom Styles](https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&language=en_US&type=5) |
| LWR site tokens | --dxp-g- tokens, alongside --lwc- tokens | [Custom Styles](https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&language=en_US&type=5) |
| Safari | Design tokens not supported | [Custom Styles](https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&language=en_US&type=5) |
| Theme on a Lightning page | SLDS or Newport, switchable at any time | [Lightning Page](https://help.salesforce.com/s/articleView?id=xcloud.os_add_your_omniscript_to_a_lightning_page_19957.htm&language=en_US&type=5) |
| Step Chart on Newport | Alignments not supported | [Step Chart](https://help.salesforce.com/s/articleView?id=xcloud.os_step_chart_options_9289.htm&language=en_US&type=5) |
| Override prerequisites | isExposed true; "useCustomLMS": true in Setup JSON | [Override an element](https://help.salesforce.com/s/articleView?id=sf.os_standard_override_an_omniscript_element.htm&language=en_US&type=5) |
| Non-draggable components | Step Chart, Save for Later Acknowledge, Modal: use Element Type mapping | [Override all elements](https://help.salesforce.com/s/articleView?id=xcloud.os_standard_override_all_elements_of_an_omniscript_element_type_with_a_custom_lwc.htm&language=en_US&type=5) |

## Check yourself

- Why should custom CSS avoid targeting DOM elements in components you don't own?
- When does the Step Chart ignore its placement setting?
- Why does an override need "useCustomLMS": true?
- Which base component does a custom Save for Later acknowledgment extend?

## Sources

- [Custom Styles for Omniscripts](https://help.salesforce.com/s/articleView?id=xcloud.os_style_omniscripts_18959.htm&language=en_US&type=5)
- [Override all Elements of an Element Type with a Custom LWC](https://help.salesforce.com/s/articleView?id=xcloud.os_standard_override_all_elements_of_an_omniscript_element_type_with_a_custom_lwc.htm&language=en_US&type=5)
- [Override an Omniscript Element with a Custom LWC](https://help.salesforce.com/s/articleView?id=sf.os_standard_override_an_omniscript_element.htm&language=en_US&type=5)
- [Preview and Test an Omniscript](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_an_omniscript_8849.htm&language=en_US&type=5)
- [Configure Step Chart for an Omniscript](https://help.salesforce.com/s/articleView?id=xcloud.os_step_chart_options_9289.htm&language=en_US&type=5)
- [Add Your Omniscript to a Lightning Page](https://help.salesforce.com/s/articleView?id=xcloud.os_add_your_omniscript_to_a_lightning_page_19957.htm&language=en_US&type=5)
- [Style Omniscripts (Managed Package)](https://help.salesforce.com/s/articleView?id=sf.os_style_omniscripts.htm&language=en_US&type=5)

## About the full unit

The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 5 linked practice questions, and unlimited timed mock exams are included with the Omnistudio Developer pack (USD $19): https://www.certifyforce.com/practice-exams