Experience Cloud CSS Builder
Brand your Salesforce portal without fighting SLDS
OmniStyler generates scoped, safe CSS for Experience Cloud partner portals, OmniScript steps, FlexCards, forms, and headers, with live previews, safety checks, and step-by-step placement instructions.
Runs entirely in your browser. No login, no install, nothing leaves your machine.
Portal-wide or page-specific
Selector packs for Partner Portal, Aura, LWR, and OmniStudio-only styling, anchored to a stable wrapper like .siteforceContentArea so nothing leaks.
OmniScript & FlexCard ready
Component-level CSS for OmniScript steps, FlexCards, SLDS cards, buttons, alerts, tables, and progress markers out of the box.
Checks before you ship
Built-in warnings for overly broad selectors, contrast problems, and CSS size, plus sample HTML to preview selectors outside Salesforce.
Save, export, reuse
Theme tokens for consistent CSS variables, saved templates in local storage, JSON export/import, and a style assistant that maps plain-English descriptions to settings.
How it works
Pick a template
Adjust brand colors, spacing, radius, shadow, and choose your scope and target cloud.
Preview & check
Compare before/after, review safety warnings, and inspect the generated tokens.
Copy the CSS
Copy or download the output with placement instructions for Experience Builder or a static resource.
Test in sandbox
Drop it into a sandbox first, especially pages with OmniScripts, FlexCards, and custom theme headers.
OmniScript styling, explained
Salesforce gives you three places to put styling, and they do different jobs. OmniStyler generates a matching output for each one.
Experience Cloud CSS
Lives in the site itself: the Theme CSS editor, Head Markup, or a linked static resource. It styles the portal shell (header, navigation, page layout) and affects only that one site. This is the Experience Cloud CSS output.
OmniScript stylesheet
A plain CSS file uploaded as a static resource and referenced by name in OmniScript Setup under Custom Lightning Stylesheet File Name (name only, no .css extension). It travels with the script everywhere it renders, including the Builder preview. This is the OmniScript CSS output.
Design tokens
Variable lines pasted into Lightning Design System Design Tokens in OmniScript Setup, such as --lwc-colorBrand: #235789;. Aura sites read --lwc-, LWR sites read --dxp-g-, and SLDS 2 themes read --slds-g- styling hooks. This is the Setup tokens output on the Tokens tab.
The full write-up, including internals, techniques, do's and don'ts, and resources, lives in the styling guide.
Which one when
- Styling the page around the script (header, navigation, layout): Experience Cloud CSS, in the site.
- Styling the script itself, consistently across every page and site it runs on: the OmniScript stylesheet static resource.
- Brand colors, spacing, and radius with zero CSS: design tokens in OmniScript Setup. Note Salesforce does not support them in Safari, so keep the stylesheet as a fallback.
- On LWR sites, components render in shadow DOM and site-level CSS often cannot reach inside the OmniScript. Lead with design tokens and the OmniScript stylesheet there, and keep site CSS for the shell.
- Newport theme or OmniOut: use Custom Newport Stylesheet File Name and the Newport Design System instead of the Lightning stylesheet field.
Built for the people who style portals
- Salesforce admins who need a branded partner portal without a front-end developer.
- Consultants & SIs delivering Experience Cloud projects on a deadline.
- OmniStudio developers tired of hand-writing scoped overrides for OmniScripts and FlexCards.
Style your portal in minutes
Free, browser-based, and built from real Experience Cloud projects.
Launch OmniStyler