WordPress Plugin
Design Customization
Skin the plugin with a preset, tune named CSS controls, or drop into free-form Custom CSS.
Every visual element rendered by the plugin — the modal, the panels, the inline module cards, the header widget — is themeable from Unidy → Design. Three layers of control let you go from one-click preset to arbitrary CSS.
1. Presets
A preset sets ten named CSS variables (accent color, corner radius, and matching focus ring) in one click. Four presets ship:
- Neutral (Sport) — near-black accent (
#111827), 12px radius. The safe default.
- Warm (Editorial) — rust accent (
#b4530f), 14px radius. Reads editorial / cultural.
- Bold (Institutional) — saturated blue (
#1d4ed8), 6px radius. Reads institutional / sporty.
- Rounded (Playful) — green (
#15803d), 18px radius. Reads community / soft.
All four presets share the same surface, spacing, and typography — only accent and radius differ. This keeps any skin visually consistent even if you swap presets mid-year.
2. Named controls
Under Controls you can tune the presets' individual values without leaving Notion-safe territory:
- Primary color — CTA background, focus rings, avatar fill.
- Primary text — label color on CTA buttons (usually white or off-white).
- Surface — modal/panel background.
- Body text — main text color.
- Muted text — hints, placeholders, secondary labels.
- Border — input outlines, dividers.
- Corner radius — cards, modal, panel corners.
- Modal width — modal dialog width in pixels (default 360).
- Panel width — right-side panel width in pixels (default 320).
- Font family — CSS font-family value. Quote multi-word names (e.g.
"Inter", -apple-system, sans-serif).
Tuning any control switches the preset selector to Custom — a marker that the operator has deviated from a shipped preset. You can always click a preset again to reset.
3. Live preview
To the right of the controls, a Preview panel shows the modal, panel, or signed-in state rendered with your current settings. Toggle between the three modes with the pill buttons above the preview.
The preview loads the plugin's real overlay.css, so what you see is what your visitors see.
4. Custom CSS
When the named controls don't express what you need, drop CSS into the Custom CSS textarea. Rules here are appended after overlay.css on every page load, so they win the cascade without needing !important.
Broken CSS here can break the sign-in overlay. Test in a private browser window before publishing site-wide changes.
Good use cases for Custom CSS:
- Sponsor-specific override (a partner-branded page needs a different accent).
- Header-image insertion above the modal logo.
- Font imports from a self-hosted webfont URL.
5. Dark host pages
If your WordPress theme uses a dark background, our default white cards read fine on top (real editorial contrast). If you want the cards to blend with the host page instead, use the data-u-theme="dark" attribute on the SDK root element (advanced — contact your Unidy CSM for guidance on how to trigger it per embed).