Manage Custom CSS snippets

Edit, toggle, prioritize, and retire your stylesheets

Once you have a few Custom CSS snippets in place, the list view at Custom → CSS is where you live. It shows every snippet with its status, priority, author, and created date. You can search by title, filter by status, edit in place, toggle Active to Inactive, and retire old snippets to Trash. This guide covers the everyday ops — how to find the snippet you want, how to iterate, and when to use Inactive vs Trash.

What is this for?

The list is your inventory of every Custom CSS snippet you've saved. Use it to:

• See at a glance which snippets are Active (rendering on the public site) vs Inactive (saved but dormant).
• Iterate on a snippet — click the title, edit the CSS, save.
• Toggle a snippet off temporarily without losing it.
• Retire old snippets by sending them to Trash, where they stay retrievable for as long as you need.

Good use cases

Example 1: Acme's morning CSS health check. The Acme Coffee Roasters dev looks at Custom CSS every Monday to see which snippets are Active. They spot an old Black Friday 2024 Ribbon stylesheet still toggled Active and flip it Inactive — the ribbon was supposed to be seasonal. No CSS deleted, no risk; just cleaned up the live cascade.

Example 2: Tuning a stylesheet in place during a design review. The designer tells Acme the button-radius on the Autumn Palette is too round. Alex clicks Acme Autumn Palette from the list, opens the edit form, changes border-radius: 999px to border-radius: 12px, clicks Update, and hard-reloads the homepage. Two-second feedback loop — no branching, no git, no redeploy.

Example 3: Retiring a stylesheet that served its purpose. Acme's Black Friday 2024 Ribbon is obsolete. Alex clicks the row-hover Trash action. The snippet moves to the Trash tab and stops rendering on the public site. If marketing wants to reuse the ribbon next November, Alex opens the Trash tab and clicks Restore — the snippet lands back in Inactive, ready to rename or re-activate.

What NOT to use this for

• Don't use Delete Permanently for routine retirement. It's inside the edit form and it hard-deletes the row with no recovery. Use the list's Trash action instead — that's a soft delete you can undo.
• Don't rely on Inactive as a short-term lock. Anyone with edit access can flip a snippet back to Active. If you need to prevent a snippet from ever running again, send it to Trash (or Delete Permanently after you've confirmed you don't need it).
• Don't use the Targets column as per-page targeting. The column always reads "Global" — it's not wired to anything. Every Active snippet runs on every page.
• Don't edit snippets directly in the database. The form's save handler writes the required type=css and placement=head metadata; hand-crafted SQL rows won't show up in this list until the metadata is correct.

How this connects to other features

• Custom → Codes — HTML and script snippets live there. If you landed on Custom CSS by mistake looking for a tag-manager code, switch over.
• Appearance → Theme Editor — if you want a managed path to brand colors or button shapes (with presets, color pickers, device previews), use the Theme Editor. Custom CSS is the escape hatch when the Theme Editor doesn't cover what you need.
• SG-Builder — per-page and per-component styling lives on the page itself. The Additional CSS trait on any SG-Builder component scopes a style to just that component.

Before you start

• You are signed in as an SGEN admin with Custom CSS access.
• You have at least one Custom CSS snippet saved (see the companion Create guide).

Where to go

1. Open the left navigation.
2. Select Custom → CSS to open the list at /sg-admin/custom_css/.

Steps

Find a snippet

The list shows every saved snippet. Use the pills at the top to filter by status:

• All Custom CSS — everything, including Trash.
• Active — only snippets currently rendering on the public site.
• Inactive — saved drafts.
• Trash — soft-deleted snippets.

Use the search box (top-right) to filter by title. The list also shows pagination at 20 rows per page.

Edit a snippet

Click the snippet title in the list. The edit form opens pre-filled with the current values. Change whatever you like — title, CSS, priority, status — and click Update Custom CSS. On success you see a green "Custom CSS has been successfully updated!" banner. The change takes effect on the next public-page reload; there's no cache to bust on the SGEN side. Hard-reload the browser with Ctrl+Shift+R to skip the browser's CSS cache.

Toggle a snippet Active or Inactive

Open the snippet's edit form, toggle the Active switch, click Update. Or use the bulk-action dropdown on the list: check the boxes for the snippets you want, pick Move to Active or Move to Inactive from the dropdown, click Apply. The status updates immediately and the public site reflects the change on its next render.

Send a snippet to Trash

Hover a row in the list. Click Trash in the row-hover actions. The row moves to the Trash tab and stops rendering. This is a soft delete — the CSS is preserved.

Restore a trashed snippet

Click the Trash pill at the top of the list. Find the row you want back. Hover it and click Restore. The snippet returns to the list as Inactive — ready to rename, edit, or re-activate.

Delete a snippet permanently

On the Trash tab, hover a row and click Delete Permanently (or use the bulk-action dropdown with Delete Permanently selected). This removes the row from the database and cannot be undone. Only do this when you're certain you'll never want the snippet back.

What success looks like

The list at Custom → CSS is your single source of truth for which snippets are live:

• After Update Custom CSS — the success banner reads "Custom CSS has been successfully updated!" and the row's Modified date is today.
• After toggling Active to Inactive — the row's Status badge flips to grey "Inactive". On the next public-page reload, the snippet's CSS is no longer in <head>.
• After clicking Trash — the row disappears from the All / Active / Inactive views and appears under the Trash pill.
• After clicking Restore on a trashed row — the snippet returns to the list as Inactive, ready to re-activate.
• After Delete Permanently on a trashed row — the row vanishes from the database. There is no undo.

What to do if it does not work

• "My edit saved but the page still looks the same." Hard-reload the public page (Ctrl+Shift+R). Browsers cache stylesheets aggressively; a soft reload can show stale CSS for minutes.
• "My snippet disappeared from the list." Check the pill filter at the top — if you're on the Active pill, Inactive rows are hidden. Click All Custom CSS to see everything except Trash. Click Trash to see trashed rows.
• "I see 'No items were found!' after search." Your search term didn't match any title. Titles are stored exactly as you typed them (including capitalization). Clear the search to return to the full list.
• "I restored a snippet but it's not on the public site." Restore lands the snippet as Inactive, not Active. Open the row and toggle Active before reloading the public page.

Next step

• Create a Custom CSS snippet (companion page)
• Custom → Codes (for HTML, scripts, and font links)
• Appearance → Theme Editor (for managed brand controls)