Walkthrough - the flagship case
Give your Experience Cloud portal a new life
Experience Cloud is the hardest case, so it is the one we walk through in full. Two complete paths, every step numbered, every step with a checkpoint that tells you it worked. Path A restyles a portal you already have. Path B stands up a new pre-branded site from a zip. The same point-and-style loop runs on any site you own - here it is on the surface that fights back hardest. Found a step that fails? Tell us the step number: [email protected].
Before you start
- A sandbox or Developer Edition org. Never start in production.
- Chrome with the OmniStyler extension installed from the Chrome Web Store.
- For deploys: the Salesforce CLI (sf) installed. Copy-paste paths exist where noted if you prefer no CLI.
Path A: restyle an existing portal (about 30 minutes)
Step A1: pick a real portal element
Open your sandbox portal page. Open the OmniStyler side panel, click Pick element, and choose the card, button, field, or layout section you want to restyle.
Checkpoint: the side panel shows a resolved chain, a ranked target selector, and visual controls. The page updates live as you change values.
Step A2: tune selectors and states
Use the resolved chain to retarget an ancestor if needed, choose a selector scope, and style Normal, Hover, or Focus states. Use Test selector before shipping broad rules.
Checkpoint: Test selector outlines only the elements you intended to affect, and Saved rules contains each selector you changed.
Step A3: merge with existing head CSS
Open the Merge tab, paste the portal's current Head Markup CSS or click Read from page, then run Unified merged sheet.
Checkpoint: OmniStyler reports which edited selectors merged, which appended, and any conflicts that need review. Preview on page applies the merged sheet without touching the org.
Step A4: deploy the two stylesheets
Click Download Deploy Kit, unzip it, and from the unzipped folder run:
sf org login web --alias my-org --instance-url https://test.salesforce.com
sf project deploy start --source-dir force-app --target-org my-orgNo CLI? Skip this step and use the copy-paste route in step A5 instead; you'll paste CSS rather than reference resources.
Checkpoint: the deploy table shows OmniStylerExperienceCSS and OmniStylerComponentCSS as Created (or Changed on re-runs).
Step A5: wire the site
In Experience Builder: Settings, then Advanced, then Edit Head Markup, and add (replace YOURPREFIX with your site's URL path, or drop it if the site has none):
<link rel="stylesheet" href="/YOURPREFIX/sfsites/c/resource/OmniStylerExperienceCSS" />Copy-paste route instead: Theme panel, kebab menu, Edit CSS, paste the Experience CSS raw (no style tags there), or paste the Copy for Head Markup output into Head Markup. Then Publish.
Checkpoint: after publish, view the page source on the live site and find the link tag (or your pasted CSS). The page shell wears your colors. If nothing changed, you forgot Publish, or the prefix in the href is wrong.
Step A6: wire the components
For each Lightning component you want to style (for example an OmniScript or FlexCard), attach the OmniStylerComponentCSS static resource to it in Setup, by static resource name only (no .css). Paste the Tokens tab's design tokens into the design tokens field in Setup. Activate the component.
Checkpoint: the Builder preview itself shows your colors on cards, buttons, and charts. If not, check the field has the bare resource name and the component was re-activated.
Step A7: the final pass
Test the published page as yourself, as a guest, and at phone width. Check one styled component end to end. Check Safari, where design tokens do not apply and the stylesheet carries the brand alone.
Checkpoint: consistent brand in all five views. You're done: the portal has its new life.
Path B: a new pre-branded site from scratch (about 30 minutes)
Step B1: brand and download
Set your brand in the tool (or capture it, step A1), then click Download Site Kit and unzip.
Checkpoint: the zip contains a README.md, force-app, and three stylesheets under staticresources.
Step B2: run the five README commands
From the unzipped folder, follow the README in order: login, deploy settings, create the site, wait for the Network query to return a row, deploy force-app, publish.
Checkpoint per command: settings deploy says Changed or Unchanged; community create returns a job id; the Network query shows your site with Status UnderConstruction; the full deploy lists the site bundle and three resources; publish says it is publishing your changes.
Step B3: activate and look
Setup, Digital Experiences, All Sites, Workspaces, Administration, Activate. Then open the site URL from the publish output.
Checkpoint: the guest home page loads already wearing your palette, and view-source shows the OmniStylerTheme and OmniStylerBase link tags. Reshape pages in Experience Builder freely; the brand travels with the variables.
Step B4: rebrand later, one file
Change colors in the tool, download a fresh kit, and redeploy only staticresources per the README's Rebrand later section. Republish to flush caches.
Checkpoint: the live site shows the new palette after publish. Allow a few minutes for public resource caches.