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
- For live editing on any site, install OmniStyler from the Chrome Web Store.
- No extension allowed on your machine? The account center covers theme management, merge, and the deploy kit in any browser.
- 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
- Click Pick element. It works through shadow DOM, so it reaches inside FlexCards and LWR components as readily as a plain page.
- Choose the selector that is stable and scoped enough for the job.
- Use the visual controls for color, spacing, borders, typography, layout, and image backgrounds.
- Use Test selector to see what the rule will affect.
- 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
- Paste the site's current stylesheet into the merge workbench. On Salesforce, that's the portal's existing Head Markup CSS.
- Run Merge.
- Review conflicts where existing CSS may still beat the new theme.
- 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.