Reference → Create a Custom CSS snippet

Create a Custom CSS snippet

Paste site-wide styles that override your theme

The Custom CSS area is where you drop named, toggleable stylesheets that render in the <head> of every public page. Use it when you want to tweak brand colors, swap a font, tune a button radius, or layer a campaign override on top of your theme — without opening SG-Builder. Each snippet has a title, a status toggle, and a priority that controls cascade order. This guide walks from the Add New button to a live brand override rendering on your homepage.

What is this for?

Custom CSS is SGEN's global style-injection point. You write CSS once and it cascades over every public page until you turn it off. It sits higher-specificity than your theme defaults, so :root tokens, utility classes, and element-level overrides you put here win against the Appearance settings. It is not a page-content tool — page HTML belongs in SG-Builder.

Good use cases

Example 1: Acme Coffee Roasters brand refresh. The marketing lead at Acme Coffee Roasters wants to roll out a seasonal warm-brown palette across every page — hero, buttons, headings — without re-saving every SG-Builder page. You create a new Custom CSS snippet titled Acme Autumn Palette, paste the override block below, set priority 5, and flip Status to Active. On the next public-page reload, the whole site picks up the new colors.

:root { --brand: #8b4513; --brand-hover: #6f3a10; --heading-font: "Playfair Display", serif;
}
h1, h2, h3 { font-family: var(--heading-font); letter-spacing: -0.01em;
}
.btn-primary { background: var(--brand); border-color: var(--brand); border-radius: 999px;
}
Public site preview
https://acmecoffeeroasters.com/

Autumn in a cup.

Single-origin Guatemalan Huehuetenango, roasted last Tuesday.

Shop the Roast

Example 2: Hide a legacy widget on every page. Acme has an old email-signup sidebar widget sitting on 30 blog posts. You don't want to open each post; you paste one Custom CSS rule and it's gone site-wide. Name the snippet Hide Legacy Signup Sidebar, priority 10, Active.

body .sidebar-email-signup-legacy { display: none;
}

No content is deleted — the widget just stops rendering on visitors' screens. If you change your mind tomorrow, set the snippet Inactive and the widget reappears on the next page load.

Example 3: Staging-only debug border. On the Acme staging site, a developer wants every container that isn't aligned to the grid to jump out in red. Paste a quick debug stylesheet, leave it Inactive in production, and flip it Active on staging only.

/* Debug: highlight containers missing horizontal padding */
main .container:not([class*="px-"]) { outline: 2px dashed #dc2626; outline-offset: -2px;
}

What NOT to use this for

  • Don't paste JavaScript or HTML here. The save handler strips anything that looks like a tag. If you pasted <script> or <div>, it will be silently removed and your snippet will save as empty. Use Custom → Codes for HTML and scripts.
  • Don't wrap your CSS in <template data-safe="style" data-attrs=""></code> tags.</strong> The form expects raw CSS. Wrapper tags are stripped on save; you'll just save naked CSS inside them — but you might also lose the inner content if the regex bites. Skip the wrappers.</li><li><strong>Don't use CSS content tricks that embed HTML-looking strings.</strong> A rule like <code>body::before { content: &quot;<b>hi</b>&quot;; }</code> gets its <code><b></code> stripped on save, breaking the output. If you need literal angle brackets in <code>content:</code>, escape them (<code>\003C</code>, <code>\003E</code>).</li><li><strong>Don't use this for per-page CSS.</strong> There's no targeting — every Active snippet renders on every page. For one-page tweaks, use SG-Builder's <em>Additional CSS</em> trait on the component.</li><li><strong>Don't paste 10 MB of CSS.</strong> The server accepts it, but your homepage will bloat. Keep snippets small and split by purpose so you can toggle them individually.</li></ul> <h3>How this connects to other features</h3> <ul><li><strong>Custom Codes</strong> — for third-party HTML, <code><script></code>, and <code><link></code> tags (fonts, tag managers). Custom CSS is styles only; Custom Codes is everything else.</li><li><strong>Appearance → Theme Editor</strong> — for brand colors, button radius, heading fonts managed through the theme UI. Custom CSS is a higher-specificity override layer on top.</li><li><strong>SG-Builder → Additional CSS trait</strong> — for per-component, per-page CSS. Use that when a style should only apply to one block on one page.</li></ul> <h3>Before you start</h3> <ul><li>You are signed in as an SGEN admin.</li><li>You have the CSS ready to paste — raw rules, no <code><style></code> wrapper.</li><li>You know whether you want it live immediately (Active) or saved as a draft (Inactive).</li></ul> <h3>Where to go</h3> <ol><li>Open the left navigation.</li><li>Select <strong>Custom → CSS</strong> to open the list at <code>/sg-admin/custom_css/</code>.</li><li>Click <strong>+ Add New</strong> (top-right) to open the create form.</li></ol> <div class="sgen-demo-wrap"><div class="sgen-demo-label">Custom CSS</div><div class="demo-2"><div class="listv"> <div class="head"> <div class="head-top"> <div> <h1>Custom CSS</h1> <div class="sub">Manage custom CSS snippets used across your site.</div> </div> <a class="add-btn" href="javascript:void(0)" data-msg="+ Add New - preview only"> + Add New</a> </div> <nav class="pills" aria-label="filter"> <a class="pill active" href="javascript:void(0)" data-msg="Filter: All Custom CSS (active)">All Custom CSS<span class="ct">3</span></a><a class="pill" href="javascript:void(0)" data-msg="Filter: Active">Active<span class="ct">2</span></a><a class="pill" href="javascript:void(0)" data-msg="Filter: Inactive">Inactive<span class="ct">1</span></a><a class="pill" href="javascript:void(0)" data-msg="Filter: Trash">Trash<span class="ct">0</span></a> </nav> </div> <div class="tools"> <form> <select name="bulk_action" data-msg="Bulk action - preview only"> <option>Action For Selected</option> <option>Move to Active</option><option>Move to Inactive</option><option>Move to Trash</option> </select> <button type="button" class="apply-btn" data-msg="Apply bulk action - preview only">Apply</button> </form> <form class="search" role="search"> <input type="text" name="s" placeholder="Search..." value="" data-msg="Search - preview only"> <button type="button" class="apply-ghost" data-msg="Search - preview only">Search</button> </form> </div> <table role="table"> <thead><tr><th style="width:28px"><input type="checkbox" aria-label="select all" data-msg="Select all - preview only"></th><th>Title</th><th>Status</th><th>Targets</th><th>Placement</th><th>Priority</th><th>Author</th><th>Created</th></tr></thead> <tbody> <tr><td style="width:28px"><input type="checkbox" data-msg="Select row - preview only"></td><td style=""><a class="rowtitle" href="javascript:void(0)" data-msg="Open - preview only">Acme Autumn Palette</a><span class="row-actions" style="display:block;margin-top:4px;font-size:12px;color:#6b7280;"><a href="javascript:void(0)" data-msg="Edit - preview only" style="color:#d51522;text-decoration:none;">Edit</a><span class="sep" style="color:#d1d5db;margin:0 6px;">|</span><a href="javascript:void(0)" class="danger" data-msg="Trash - preview only" style="color:#dc2626;text-decoration:none;">Trash</a></span></td><td style=""><span style="color:#16a34a;font-weight:600">Active</span></td><td style="">Global</td><td style="">&lt;head&gt;</td><td style="">5</td><td style="">alex@acmecoffeeroasters.com</td><td style="">Apr 23, 2026</td></tr> <tr><td style="width:28px"><input type="checkbox" data-msg="Select row - preview only"></td><td style=""><a class="rowtitle" href="javascript:void(0)" data-msg="Open - preview only">Hide Legacy Signup Sidebar</a><span class="row-actions" style="display:block;margin-top:4px;font-size:12px;color:#6b7280;"><a href="javascript:void(0)" data-msg="Edit - preview only" style="color:#d51522;text-decoration:none;">Edit</a><span class="sep" style="color:#d1d5db;margin:0 6px;">|</span><a href="javascript:void(0)" class="danger" data-msg="Trash - preview only" style="color:#dc2626;text-decoration:none;">Trash</a></span></td><td style=""><span style="color:#16a34a;font-weight:600">Active</span></td><td style="">Global</td><td style="">&lt;head&gt;</td><td style="">10</td><td style="">alex@acmecoffeeroasters.com</td><td style="">Apr 23, 2026</td></tr> <tr><td style="width:28px"><input type="checkbox" data-msg="Select row - preview only"></td><td style=""><a class="rowtitle" href="javascript:void(0)" data-msg="Open - preview only">Staging Debug Borders</a><span class="row-actions" style="display:block;margin-top:4px;font-size:12px;color:#6b7280;"><a href="javascript:void(0)" data-msg="Edit - preview only" style="color:#d51522;text-decoration:none;">Edit</a><span class="sep" style="color:#d1d5db;margin:0 6px;">|</span><a href="javascript:void(0)" class="danger" data-msg="Trash - preview only" style="color:#dc2626;text-decoration:none;">Trash</a></span></td><td style=""><span style="color:#6b7280">Inactive</span></td><td style="">Global</td><td style="">&lt;head&gt;</td><td style="">15</td><td style="">dev@acmecoffeeroasters.com</td><td style="">Apr 23, 2026</td></tr> </tbody> </table> </div></div></div> <h3>Steps</h3> <h4>1. Open the Add New form</h4> <p>Click <strong>+ Add New</strong> on the list toolbar. SGEN navigates to <code>/sg-admin/custom_css/add_new</code>. You'll see a two-column layout: title + CSS editor on the left, status and priority on the right.</p> <div class="sgen-demo-wrap"><div class="sgen-demo-label">Custom CSS</div><div class="demo-3"><div class="bc">Dashboard / Custom CSS / New</div> <div class="page-head"> <a class="back" href="javascript:void(0)" data-msg="Go back - preview only" aria-label="Back">←</a> <div> <h1>Custom CSS</h1> <div class="sub">Create and update custom stylesheets.</div> </div> </div> <form class="grid single" action="javascript:void(0)"> <div class="panel"> <label class="fld"><strong>Title<span class="req">*</span></strong><input type="text" name="title" value="Acme Autumn Palette" placeholder=""><span class="hint">For your reference. Never shown on the public site.</span></label> <label class="fld"><strong>CSS snippet</strong><div class="editor-wrap"> <div class="editor-head"><span>HTML</span><span>CodeMirror</span></div> <div class="editor" role="textbox" aria-multiline="true" aria-label="CSS snippet">:root { --brand: #8b4513; --brand-hover: #6f3a10; --heading-font: &quot;Playfair Display&quot;, serif; } h1, h2, h3 { font-family: var(--heading-font); } .btn-primary { background: var(--brand); border-radius: 999px; }</div> </div><span class="hint">Raw CSS only — no &lt;style&gt; wrapper.</span></label> <label class="fld"><strong>Priority</strong><input type="number" name="meta[priority]" value="5" placeholder=""><span class="hint">1 loads first; 20 loads last. Higher priorities override lower ones.</span></label> <label class="fld"><strong>Status</strong><label style="display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:400;color:#374151;cursor:pointer"> <input type="checkbox" name="status" checked data-msg="Toggle Status - preview only"> <span>active</span></label><span class="hint">Leave unchecked to save as draft.</span></label> <div class="foot"><button type="button" class="btn-primary" data-msg="Would POST /Admin_Custom_CSS_Actions/do_code">Create Custom CSS</button><button type="button" class="btn-ghost" data-msg="Would navigate back to /sg-admin/custom_css">Cancel</button></div> </div> </form></div></div> <h4>2. Fill in the fields</h4> <ul><li><strong>Title</strong> — a descriptive name for your reference. Example: <em>Acme Autumn Palette</em>. Defaults prefill with "My Custom CSS" — change it before saving; otherwise your row is literally named "My Custom CSS."</li><li><strong>CSS snippet</strong> — paste raw CSS. The editor is syntax-highlighted. <code><style></code> wrappers are removed on save; just paste rules.</li><li><strong>Priority</strong> — any integer from 1 to 20. Lower numbers render first, higher numbers render last (and therefore override). If you have one base-brand snippet and one campaign-override snippet, give the base priority 1 and the campaign priority 10 so the campaign wins.</li><li><strong>Status</strong> — toggle <strong>Active</strong> if you want the CSS to render on visitors' pages immediately. Leave it off to save as a draft.</li></ul> <h4>3. Click Create Custom CSS</h4> <p>The form submits. On success you see a green "Custom CSS has been successfully created!" banner and the URL changes to <code>/sg-admin/custom_css/edit/<new_id></code>. Your row appears in the list.</p> <h4>4. Verify on the public site</h4> <p>Open your public homepage in a new browser tab (or hard-reload it with <strong>Ctrl+Shift+R</strong> to bypass the cache). If the snippet is Active, you should see your styles applied immediately. Right-click the page → <strong>View page source</strong> and search for part of your CSS — you'll find it wrapped in a <code><style></code> block inside <code><head></code>, alongside any other active CSS snippets.</p> <div class="sgen-demo-wrap"><div class="sgen-demo-label">Public site preview</div><div class="demo-4"><div class="browser"> <div class="chrome"> <div class="dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div> <div class="url">https://acmecoffeeroasters.com/</div> </div> <div class="frame"><div class="inject-label">View source near <head></div> <div class="code-inspect"><span class="kw"><style></span>:root{--brand:#8b4513;--brand-hover:#6f3a10}h1,h2,h3{font-family:&#39;Playfair Display&#39;,serif}.btn-primary{background:#8b4513;border-radius:999px}<span class="kw"></template>
Visible to anyone who opens View-source on your live page. Confirms the snippet is rendering at the chosen placement.

What success looks like

After clicking Create Custom CSS and reloading your public site:

  • The list at Custom → CSS shows your new snippet with Status: Active (green badge).
  • Your homepage renders with the new styles applied — colors, fonts, button radii, whatever your CSS specified.
  • Right-clicking the public homepage → View page source → searching for any selector from your snippet finds it inside a <style> block in <head>, alongside any other Active snippets.
  • The success banner reads "Custom CSS has been successfully created!" immediately after submit.

If your snippet is one of several, the cascade order matches the Priority field: priority 1 loads first, priority 20 loads last (last-in wins for same-specificity rules).

What to do if it does not work

  • "I saved my snippet but nothing changed on the public site." Check two things: (a) is the Status set to Active? (Inactive snippets are stored but don't render.) (b) Hard-reload the page with Ctrl+Shift+R. Browsers cache CSS aggressively.
  • "My CSS looks different in the database than what I pasted." Check for tag-like strings. The save handler strips anything between < and >. If you had content: "<hi>", the <hi> is gone. Replace it with escaped Unicode (\003Chi\003E).
  • "Priority isn't working the way I expect." CSS cascade is both priority AND specificity. Two rules with the same selector: the later one wins. Two rules with different selectors: the more specific one wins regardless of priority. If your override is not winning the cascade, increase the selector's specificity by prefixing it with body (for example, body .my-class { ... }). This is preferable to the !important flag, which is harder to debug when overrides chain.

Next step

  • Manage existing Custom CSS snippets (see the companion page)
  • Custom → Codes (for HTML, scripts, and external font links)
  • Appearance → Theme Editor (for managed brand-level styles)
On this page