Custom CSS — Reference

The Custom CSS surface is the design-system styles tier — the place where an operator extends the active theme's tokens with site-wide rules, page-scoped overrides, and the per-record CSS that SG-Builder generates for component styling. It is the canonical writer for everything in the cascade above the theme defaults and below the inline component styles.

This page is a reference for platform engineers and integrators. Custom CSS lives separately from Custom Codes — the latter accepts arbitrary HTML and script for site-wide injection; this surface accepts style rules only and renders into a dedicated style block. The separation is intentional: it lets the platform sanitize and budget styles independently from the script-injection path.

Overview

Custom CSS lives under the Custom module group in SG-Admin, paired with Custom Codes (script and tag injection) and the operator-data siblings Custom Fields, Custom Fonts, and Custom Objects.

The module is paired by convention: one half renders the list, create, edit views; the other half handles writes — save, table refresh, soft delete, restore. The list view groups records by scope and by source — operator-authored rules sit at the top of the list, SG-Builder-generated rules sit underneath in a collapsed group.

A Custom CSS record carries a name, a scope (site-wide or a page allow-list), an enabled flag, a priority within scope, a source flag (operator or sg-builder), and the CSS body itself. On render, the platform composes the active set of records into a single