OmniScript styling guide
Style OmniScripts and portals without fighting the platform
Everything in this guide comes from current Salesforce documentation and real Experience Cloud portal markup. It covers how the styling system actually works, the techniques that hold up across releases, and the mistakes that cost teams days.
The three places styling lives
Salesforce gives you three separate styling inputs, and they do different jobs. Most styling problems trace back to putting the right CSS in the wrong place.
| Placement | Where it goes | What it styles | Reach |
|---|---|---|---|
| Experience Cloud CSS | Theme CSS editor, Head Markup, or a linked static resource in the site | The portal shell: header, navigation, page layout, everything around the OmniScript | One site only |
| OmniScript stylesheet | A plain CSS static resource, referenced by name in OmniScript Setup under Custom Lightning Stylesheet File Name |
The script itself: steps, inputs, buttons, progress chart | Everywhere the script renders, including the Builder preview |
| Design tokens | OmniScript Setup under Lightning Design System Design Tokens, one variable per line |
Brand colors, spacing, radius inside the script, with no CSS file at all | Per script, across Aura, LWR, and SLDS 2 runtimes |
Quick start: branded in 15 minutes
- Open OmniStyler, pick a template, and set your brand colors, radius, spacing, and shadow. The Safety tab checks your contrast as you go.
- Copy the Experience Cloud CSS into your site. Theme CSS editor for Aura sites, or use Copy for Head Markup which wraps the CSS in a style tag for Settings > Advanced > Edit Head Markup.
- Download the OmniScript CSS and upload it in Setup > Static Resources, for example as OmniStylerOmniCSS with cache control Public.
- In OmniScript Setup, enter the static resource name (name only, no .css extension) in
Custom Lightning Stylesheet File Name. - Copy the Setup design tokens from the Tokens tab and paste them into
Lightning Design System Design Tokensin OmniScript Setup. - Activate, then test in a sandbox: Builder preview, the live page, a guest user, mobile width, and Safari (design tokens are not supported there, the stylesheet is your fallback).
Prefer files over copy-paste? The Download Deploy Kit button in the tool packages all of the above as a ready Salesforce CLI project: both CSS static resources, head markup, Setup design tokens, and Theme panel values. Two sf commands and the resources are in your org, with a README covering the wiring.
Which runtime are you on? Inspect any FlexCard or OmniScript on the page. Tags starting with runtime_omnistudio mean the platform-native standard runtime; tags like c-omniscript-step mean the managed package. The selectors in this guide cover both, and the generated tag name even embeds the theme, so look for the word lightning in it to confirm the Lightning stylesheet field applies.
What's in this guide
- Walkthrough: give your portal a new life: two complete paths with a checkpoint at every step.
- How styling works: runtimes, themes, load order, the token cascade, shadow DOM, and which selectors are stable.
- Techniques and tips: precision targeting, beating inline styles, debugging, versioning, performance, and improving the script itself.
- Do's and don'ts: the condensed checklist worth pinning next to your monitor.
- Links and resources: the official documentation, SLDS references, and learning paths this guide draws from.