Manual

From first edit to deployable CSS

This is the operating manual for the extension plus account workflow. The loop is the same on any site you own; where Salesforce Experience Cloud needs special handling, this manual calls it out. Use the guide pages for deeper Experience Cloud styling background.

1. Install or open

  1. For live editing on any site, install OmniStyler from the Chrome Web Store.
  2. No extension allowed on your machine? The account center covers theme management, merge, and the deploy kit in any browser.
  3. On the site you want to restyle (a landing page, a marketing site, or an Experience Cloud portal), open OmniStyler from the toolbar and allow site access when Chrome asks.

2. Capture and style

  1. Click Pick element. It works through shadow DOM, so it reaches inside FlexCards and LWR components as readily as a plain page.
  2. Choose the selector that is stable and scoped enough for the job.
  3. Use the visual controls for color, spacing, borders, typography, layout, and image backgrounds.
  4. Use Test selector to see what the rule will affect.
  5. Use Undo or Reset if a selection is too broad.

3. Save themes

Local edits work without login. Sign in when you want cloud sync, named themes, review status, team sharing, or version history.

  • Save current: stores the current style of the site or portal as a named theme.
  • Activate: makes a theme the team/default pull target for that site.
  • Duplicate: creates a new campaign or client variant from an existing theme.
  • Status: move themes through draft, review, approved, and archived.

4. Merge with existing CSS

  1. Paste the site's current stylesheet into the merge workbench. On Salesforce, that's the portal's existing Head Markup CSS.
  2. Run Merge.
  3. Review conflicts where existing CSS may still beat the new theme.
  4. Preview the merged result before copying or downloading.

5. Deploy

Use Copy for a clean stylesheet you can drop into any site. On Salesforce, use Copy for Head Markup for a quick manual deployment, or Download Deploy Kit for a Salesforce CLI project containing the stylesheet, metadata, head markup, and README.

Production rule: test in a Salesforce sandbox first, especially on pages with Lightning components, FlexCards, custom headers, guest access, and mobile layouts.