Manual

From first edit to deployable CSS

This is the operating manual for the extension plus account workflow. Use the guide pages for deeper Salesforce styling background.

1. Install or open

  1. For live portal editing, get the Chrome extension. The Chrome Web Store listing is in review; until it is approved, download the zip, open chrome://extensions, enable Developer mode, and load the unzipped folder.
  2. No extension allowed on your machine? The web studio covers CSS generation, merge, and the deploy kit in any browser.
  3. On a portal domain, open OmniStyler from the toolbar and allow site access when Chrome asks.

2. Capture and style

  1. Click Pick element.
  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 portal style as a named theme.
  • Activate: makes a theme the team/default pull target for that portal.
  • 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 portal's current Head Markup CSS into the merge workbench.
  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 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 OmniScripts, FlexCards, custom headers, guest access, and mobile layouts.