Skip to main content

Documentation Index

Fetch the complete documentation index at: https://documentation.outpost.pub/llms.txt

Use this file to discover all available pages before exploring further.

CTAs created on or after May 2026 use scoped CSS: Outpost prepends a CTA-specific selector to every rule you write, so styles only affect that one CTA. CTAs created before May 2026 use unscoped (legacy) CSS — your rules are injected as-is and apply to anything on the page that matches. Legacy CTAs were left as-is to avoid changing how they render in production.

​
Tell which mode your CTA uses

Open the CTA in the editor. If you see a red LEGACY CSS banner above the form and a Legacy badge next to the Custom CSS field, the CTA is on legacy CSS. No banner means the CTA is scoped. In the Select CTA picker on a slot’s audience row, legacy CTAs also carry a red Legacy CSS badge under their status badge.

​
How scoping works

Under the hood, Outpost wraps every rule you write in .outpost-cta[data-cta-id="…"]. The same .outpost-cta-heading { font-style: italic; } becomes effectively .outpost-cta[data-cta-id="abc123"] .outpost-cta-heading { font-style: italic; }. You don’t add the wrapper yourself — write the CSS as if this were the only element on the page. See Custom CSS in the CTA Library guide for the class hooks (.outpost-cta-heading, .outpost-cta-subheading, .outpost-cta-submit, .outpost-cta-inner).
:root, html, and body selectors are treated as global and are not scoped, even on a scoped CTA. Move those rules onto .outpost-cta-* elements instead.

​
Upgrade a legacy CTA

Upgrading is a clone-and-swap. There’s no in-place toggle — see One-way by design.
1

Clone from the editor

Open the legacy CTA in the editor and click Clone this CTA and upgrade in the red banner. A confirm dialog summarizes what’s about to happen. Accept it — Outpost creates a new CTA with your Custom CSS copied over and scoping turned on.
2

Check the new CTA's CSS

Open the clone and review the Custom CSS field. Anything that targeted :root, html, body, or selectors outside .outpost-cta-* won’t behave the way it did under legacy. Rewrite those rules onto the CTA’s own elements.
3

Swap in the new CTA

Go to the slot or audience currently serving the legacy CTA, click the Browse / change button (list icon) on the audience row, and select the new clone. The legacy CTA keeps serving until you do this.
4

Archive the legacy CTA

Once the clone is serving correctly, set the legacy CTA to inactive or archive it. Keep it around if you want its history — see Analytics history.

​
Analytics history

CTAs are tracked by ID. Cloning produces a new ID, so the new CTA starts with zero impressions and conversions. The legacy CTA keeps its history.
If the historical numbers matter, archive the legacy CTA rather than deleting it. Analytics remain queryable.

​
One-way by design

Once a CTA is on scoped CSS, it stays scoped. There’s no toggle back to legacy. Legacy and scoped CSS have meaningfully different rendering behavior, and a silent round-trip would change what your readers see on the page. If you need to compare behavior, keep the legacy CTA alongside the clone.

​
Frequently asked questions

“Legacy” means a CTA was created before the May 2026 CSS scoping change. Its Custom CSS is injected onto the page without a CTA-specific selector prefix, so the rules can match elements outside the CTA. Legacy CTAs aren’t broken — they render the way they always have. They’re just on the older behavior, and the editor labels them so you know which rules apply.
No. Legacy CTAs continue to render and serve to readers exactly as they did before May 2026. The change was opt-in for new CTAs; existing ones were left on the old behavior on purpose.
The Legacy marker is keyed off the CTA’s creation date, not whether you’ve written Custom CSS into it. A legacy CTA with an empty Custom CSS box has nothing to leak, so the warning is informational — but if you ever add Custom CSS to that CTA, those rules would be unscoped. Cloning it now sets you up on the new behavior for the future.
Cloning creates a draft. It deliberately does not reassign any slots or audiences — your legacy CTA keeps serving until you swap the clone in yourself. Open the slot, click the Browse / change button on the audience row, and pick the new clone.
The selectors you write are identical. The difference is where they apply. On a legacy CTA, .outpost-cta-heading { color: red; } recolors every matching element on the page. On a scoped CTA, the same rule only recolors the heading on that one CTA — Outpost rewrites the selector to include the CTA’s unique data-cta-id wrapper.
Yes. The Custom CSS field on a legacy CTA still works — your changes save and render as unscoped CSS, same as before. Upgrading is only required if you want scoped behavior or want to clear the Legacy marker.
Legacy and scoped CSS behave differently. A body { background: ... } rule that works on a legacy CTA would silently stop working under scoping. Flipping the flag in place would change what your readers see without warning. Cloning forces you to review the rules first, then swap the new CTA in deliberately.