Walkthrough
Give your Experience Cloud a new life
Two complete paths, every step numbered, every step with a checkpoint that tells you it worked. Path A rebrands a portal you already have. Path B stands up a new pre-branded site from a zip. 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 Inspector extension: download the zip, unzip it, open chrome://extensions, enable Developer mode, Load unpacked, and select the unzipped folder.
- For deploys: the Salesforce CLI (sf) installed. Copy-paste paths exist where noted if you prefer no CLI.
Path A: rebrand an existing portal (about 45 minutes)
Step A1: capture your brand
Open your company's public website in a tab. Open the OmniStyler Inspector side panel and click Capture Brand from This Page.
Checkpoint: a new tab opens on omnistyler.com/app with your company's colors in the Brand pickers and a status note naming the site it captured from. If the palette looks off, adjust the pickers by hand; capture is a starting point.
Step A2: tune and safety-check
Pick the template closest to your goal, adjust radius, spacing, and shadow, and watch the before/after preview. Open the Safety tab.
Checkpoint: all Safety rows show pass or note, none warn. Contrast warnings mean real accessibility failures on the portal; fix them now by darkening or lightening colors.
Step A3: preview the whole brand on your real portal, no deploy
Open your sandbox portal page in a tab. Click Copy Experience CSS in OmniStyler, paste it into the side panel's Editable CSS box, and click Apply CSS.
Checkpoint: the portal page rebrands in front of you: header, buttons, cards. Click Remove Preview and it returns to stock. Nothing has touched 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 OmniStylerOmniCSS 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 OmniScripts
In OmniScript Builder, Setup tab: enter OmniStylerOmniCSS in Custom Lightning Stylesheet File Name (name only, no .css). Paste the Tokens tab's OmniScript Setup design tokens into Lightning Design System Design Tokens. Activate the script.
Checkpoint: the Builder preview itself shows your colors on step cards, buttons, and the progress chart. If not, check the field has the bare resource name and the script was re-activated.
Step A7: the final pass
Test the published page as yourself, as a guest, and at phone width. Check one OmniScript 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.