OmniStyler CSS Generator

Template

Scope

CSS scope selector Target cloud Selector pack

Components

Brand

Primary Accent Surface Background

Text color

Shape

Radius 8px Spacing 16px Shadow

Style Assistant

Describe the portal style

Saved Templates

Template name

Load saved template Import JSON

Before

After

Captured CSS Workbench

Review the selector and edit the component CSS here. Use Capture updates the generated CSS block, then Copy CSS or Copy for Head Markup includes it in the final output.

No captured component yet Use the Chrome extension on an Experience Cloud page, then choose Open OmniStyler.

Selector CSS editor

Visual Controls

Change common component styles, then apply them into the CSS editor.

Background Text Border Radius 8px Padding 16px Font weight Shadow Use !importantHelpful against SLDS overrides.

These lines style the OmniScript without any CSS file. Paste them all: Aura sites and Lightning pages read the --lwc- lines, LWR sites read the --dxp-g- lines, and SLDS 2 themes read the --slds-g- styling hooks. Each runtime ignores the prefixes it does not use. Salesforce notes that design tokens are not supported in Safari, so keep the stylesheet as your fallback.