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
- For the browser-only CSS builder, open /app/.
- For live portal editing, download the Chrome extension from the homepage.
- Open
chrome://extensions, enable Developer mode, and load the unzipped extension folder. - On a portal domain, open OmniStyler and allow site access when Chrome asks.
2. Capture and style
- Click Pick element.
- 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 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
- Paste the portal's current Head Markup CSS into the merge workbench.
- 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 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.