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.

Launch OmniStyler for free See how it works

Runs entirely in your browser. No login, no install, nothing leaves your machine.

Want the live inspector too? Download the Chrome extension: unzip it, open chrome://extensions, enable Developer mode, Load unpacked, and select the unzipped folder.

Use cases Portal owners, seasonal themes, internal teams, freelancers, agencies, and developer handoff. Manual Install, capture, style, save themes, merge CSS, and deploy safely. Pricing Free local editing plus Pro, Team, Agency, and Enterprise account options. Proof Evaluation checklist and a place for approved customer testimonials.
Scoped CSS

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.

OmniStudio

OmniScript & FlexCard ready

Component-level CSS for OmniScript steps, FlexCards, SLDS cards, buttons, alerts, tables, and progress markers out of the box.

Safety

Checks before you ship

Built-in warnings for overly broad selectors, contrast problems, and CSS size, plus sample HTML to preview selectors outside Salesforce.

Templates

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.

Deploy

One-command deployment kit

Download a ready Salesforce CLI project: both CSS files as static resource metadata, head markup, OmniScript Setup design tokens, and Theme panel values. Deploy with a single sf command.

Site template

Pre-branded portal in a zip

The Site Kit ships a complete Experience Cloud site with your palette already wired in: branding set, head markup, and variable-driven CSS split so rebranding is a one-file redeploy. Five commands from zip to live portal.

How it works

1

Pick a template

Adjust brand colors, spacing, radius, shadow, and choose your scope and target cloud.

2

Preview & check

Compare before/after, review safety warnings, and inspect the generated tokens.

3

Copy the CSS

Copy or download the output with placement instructions for Experience Builder or a static resource.

4

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.

Site level

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.

Script level

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.

No CSS

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 every portal workflow

Some customers have one portal. Others have one portal with seasonal campaigns, or an agency book of client portals. OmniStyler keeps the live editing simple and moves organization, review, history, and deployment into the account.

Single portal owners

Use the free editor to restyle the live portal, then upgrade when you need sync, merge, history, and a deploy kit.

One portal, many styles

Create holiday, campaign, dark-mode, and rebrand variants. Review them safely, approve one, and keep old versions available.

Internal teams

Admins, designers, and developers share portal themes with roles, active-theme selection, version history, and deployment handoff.

Freelancers

Keep each client portal organized, duplicate concepts, export review previews, and hand off clean CSS without giving clients your account.

Agencies and partners

Manage many client portals, reusable seasonal variants, client approval notes, and team workflows from one account.

Developers

Get stable selectors, merge conflict reports, head-ready CSS, and a Salesforce CLI deploy kit instead of loose snippets.

Pricing direction

The local extension stays free. Paid plans are for the account layer: cloud sync, theme libraries, review workflow, version history, team access, and deployment.

Free

For trying OmniStyler on one browser.

$0

  • Local live editor
  • Copy and download CSS
  • Basic merge preview
  • No account required

Pro

For one admin, designer, freelancer, or consultant.

$39 / user / month

  • Cloud sync
  • Multiple themes per portal
  • Version history
  • Merge workbench and deploy kit

Team

For a company managing portals together.

$99 / month

  • 3 included seats
  • Shared portal library
  • Roles and active theme
  • Draft, review, approved, archived states

Agency

For freelancers and partners managing many clients.

$199 / month

  • 10 included seats
  • Client workspaces
  • Review preview exports
  • Theme bundle import/export

Paid account features are free for signed-in users until July 31, 2026. Enterprise and SI partner pricing is available for regulated customers, procurement, SSO, and high portal counts. View full pricing.

Style your portal in minutes

Free, browser-based, and built from real Experience Cloud projects.

Launch OmniStyler