Custom CSS – Unidy Documentation

The Custom CSS feature allows Unidy administrators to inject CSS code into the pages of their Brand ID. This is useful for visual customisations that go beyond the standard styling options - such as hiding background images, overriding colours, or adjusting layout elements.

Custom CSS blocks are managed under Customization → Custom CSS in the Unidy dashboard.

Creating a CSS block

Navigate to Customization → Custom CSS in the dashboard sidebar.

Click New in the top right corner.

Fill in the required fields (see table below) and click Save.

Field	Description
Title	A descriptive internal name for the block, e.g. Hide header background image. Not shown to end users.
Brand	Assign the block to a specific brand, or choose Global to apply it to all brands on the tenant.
URL Match Pattern	An optional regular expression matched against the URL path (e.g. `^/profile`). Leave empty to apply the CSS on every page of the brand.
CSS Code	The CSS rules to inject. Edited in a code editor with syntax highlighting.

⚠️

Keep the URL match pattern simple. The regex runs on every request. Complex patterns with excessive backtracking can slow the site down.

Draft and publish workflow

CSS blocks follow a draft/publish workflow. Changes you write in the editor are saved as a draft and are not visible to users until explicitly published.

Action	What it does
Save	Saves your changes as a draft. The currently published CSS (if any) remains active for users.
Publish draft	Promotes the draft to the live version. Users will see the new CSS immediately.
Discard draft	Deletes the draft and reverts to the last published version.

On the detail page of a block, you can see both the Published CSS (currently active) and the Draft CSS (pending) side by side, with a yellow Unpublished changes badge when a draft exists.

❗

A block must be both published and enabled to take effect. Saving a draft alone is not enough - you must also click Publish draft and ensure the block is enabled.

Enabling and disabling a block

Each CSS block has an enabled/disabled toggle, accessible via the actions menu on the detail page. A block only injects CSS into pages when it is enabled. Newly created blocks start as disabled by default.

You can temporarily disable a block (e.g. for seasonal changes) without deleting it.

Previewing changes before publishing

Before publishing a draft, you can use Preview for myself to test how the CSS looks on the live site - visible only to you, in your current browser session.

Open the CSS block detail page.

Click Preview for myself in the actions menu.

Navigate to the page(s) affected by the block to review the result.

Click Stop preview when done.

The preview toolbar at the bottom of the screen lists all active previews. You can clear them individually or all at once.

Targeting specific pages

By default (empty URL match pattern), a CSS block applies to every page of the assigned brand. To restrict it to specific pages, enter a regular expression in the URL Match Pattern field that is matched against the URL path (the part after the domain).

Examples:

Pattern	Matches
`^/profile`	The profile page and all sub-paths under `/profile`
`^/logins`	The login page
`^/(logins\|registrations)`	Both the login and registration pages
(empty)	All pages

Global vs. brand-specific blocks

Brand-specific blocks apply only to the selected brand.

Global blocks apply to all brands on the tenant and are stacked on top of any brand-specific blocks.

If both a global and a brand-specific block match the same page, both are injected - the global block first, the brand-specific block second.

Common use cases

Removing or replacing background images on the login or profile page

Overriding brand colours for specific pages

Hiding elements that are not relevant for a particular brand

Adjusting spacing or typography beyond what the standard style settings allow

💡

For injecting JavaScript or arbitrary HTML (e.g. tracking scripts, chat widgets) use the Custom Code in HTML feature under Brand Configs instead.