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.
Customize Omniscript appearance using styling or themes.
~6 min read · 5 practice questions ·
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
- Detail
- Custom Lightning or Custom Newport Stylesheet File Name take a static resource name
- Detail
- Static resource name in stylesheet.lightningRtl
- Detail
- Not shown
- Detail
- $spacing-small → --lwc-spacingSmall: value;
- Detail
- --dxp-g- tokens, alongside --lwc- tokens
- Detail
- Design tokens not supported
- Detail
- SLDS or Newport, switchable at any time
- Detail
- Alignments not supported
- Detail
- isExposed true; "useCustomLMS": true in Setup JSON
- Detail
- Step Chart, Save for Later Acknowledge, Modal: use Element Type mapping
Sources for this section (6)
- Custom Styleshelp.salesforce.com (opens in a new tab)
- Previewhelp.salesforce.com (opens in a new tab)
- Lightning Pagehelp.salesforce.com (opens in a new tab)
- Step Charthelp.salesforce.com (opens in a new tab)
- Override an elementhelp.salesforce.com (opens in a new tab)
- Override all elementshelp.salesforce.com (opens in a new tab)
- 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?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Omnistudio Developer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 46 lessons of the Omnistudio Developer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (5 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams