Our Salesforce Experience Cloud specialty, in depth
Style Experience Cloud portals without fighting the platform
OmniStyler is a visual styling tool for any site you own, and this guide documents our specialty: Salesforce Experience Cloud, the hardest styling problem on the web. Everything here comes from current Salesforce documentation and real portal markup. It covers how the styling system actually works, the techniques that hold up across releases, and the mistakes that cost teams days. Solve this surface and an ordinary website is a walk.
The three places styling lives
Experience Cloud 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 components | One site only |
| Component stylesheet | A plain CSS static resource, attached to a Lightning component in Setup (for example an OmniScript or FlexCard) | The component itself: steps, inputs, buttons, cards, charts | Everywhere that component renders, including the Builder preview |
| Design tokens | Brand variables set in Setup, one per line, with no CSS file at all | Brand colors, spacing, and radius across the site and its components | 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 component CSS and upload it in Setup > Static Resources, for example as OmniStylerComponentCSS with cache control Public.
- Attach that static resource to the Lightning component you want to style in Setup, by static resource name only (no .css extension).
- Copy the design tokens from the Tokens tab and paste them into the design tokens field in 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.
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.