Skip to main content
The Library holds every CTA template you can assign to a slot, and the Default Design and Custom CSS settings control how they look.

​
What is the Library?

The CTA Library is your site’s catalog of every CTA template Outpost knows how to render — every button, in-post box, popup, slide-up, paywall, and gated PDF prompt. The Library doesn’t render anything to readers itself; it’s the set of templates you draw from when you set up a slot. Every template ships enabled by default. When you pick a CTA for a slot, Outpost creates an independent copy of the template (with its own ID) for that slot, and that copy — not the base — is what readers see. The base stays put as a stylistic starting point for the next copy you make. You’d visit the Library to:
  • Hide templates you don’t want. Disable any template to keep it out of the picker the next time you set up a slot.
  • Tune a base template. Edit a base so every copy you make from it afterward starts with your publication’s headline voice, button copy, or styling baked in — see Editing the base sets your template.
CTA Library with In-Post tab selected, showing Button, In-Post Box Modern, and In-Post Box Classic sections with enable toggles and edit/preview buttons

​
How to use the Library

1

Browse by type

The tabs across the top match the slot types — In-Post, Post Popup, Post Slide Up, Homepage Popup, Registration/Metered Wall, and Gated PDF. Pick the tab for the kind of CTA you want to build.
2

Disable any template you don't want to see

All templates are enabled by default. Toggle one off if you’d rather it not appear in the picker the next time you set up a slot. Disabling a template doesn’t affect copies already assigned to slots — those keep working.
3

Edit a base to set your defaults

Click the pencil to customize the headline, button copy, image, colors, fonts, and CSS on the base template. The base is never shown to readers; it’s the starting point for every new copy you create from it. See Editing the base sets your template for what propagates and what doesn’t.
4

Use it from a slot

To actually put a CTA on your site, head to Auto Display Slots (or whichever feature consumes the CTA — paywalls, gated PDFs, the Tip Jar) and pick a template. Outpost creates an independent copy of the base for that slot — with its own ID — and that copy is what you customize further and what readers see.

​
How the Library is organized

The Library is split into tabs that mirror the slot types in Auto Display:
  • In-Post — Buttons, Modern boxes, and Classic boxes
  • Post Popup — Modern and Classic popup styles
  • Post Slide Up — Modern and Classic slide-up styles
  • Homepage Popup — Subscribe and Discount popup styles
  • Registration/Metered Wall — Subscribe and upgrade paywall styles
  • Gated PDF — Subscribe and upgrade popup styles for downloads

​
CTA categories

​
Buttons (7 types)

Simple, inline buttons that can be placed in posts:
ButtonPurpose
SubscribeSign up as a free member
Upgrade to PaidConvert free members to paid
Upgrade to AnnualConvert monthly to annual
DonateOne-time donation via Tip Jar
Gift SubscriptionPurchase a gift subscription
Multitier Custom LinkSelector for multiple subscription tiers
Custom LinkLink to any URL

​
In-Post Boxes — Modern (10 styles)

Full-width boxes with modern styling: Subscribe, Subscribe Slim, In-Post Box Modern - Wide, Discount Offer, Custom Link, Upgrade, Donate, Multiline Text, No Button, Promo (Big Image Above Text/Text Only)

​
In-Post Boxes — Classic (8 styles)

Full-width boxes with classic styling: Subscribe, Subscribe Slim, Discount Offer, Custom Link, Upgrade, Donate, Multiline Text, No Button

​
Popups — Modern (6 styles)

Subscribe, Discount, Custom Link, Upgrade, No Button, Wide

​
Popups — Classic (5 styles)

Subscribe, Custom Link, Upgrade, Discount, No Button

​
Slide-Ups — Modern (5 styles)

Subscribe, Upgrade, Discount, Custom Link, Wide

​
Slide-Ups — Classic (4 styles)

Subscribe, Discount, Link, Upgrade

​
Editing a CTA

Click the Edit (pencil) button on any CTA in the Library to customize:
  • Header text — The headline shown to readers
  • Description text — Supporting copy below the headline
  • Button text — The call-to-action button label
  • Button URL / Offer — Where the button links (Ghost portal, offer URL, or custom URL)
  • Image — Background or header image (on supported styles)
  • Labels — Member labels to apply on conversion (for tracking and automation). Distinct from Hit Labels, which are applied when the paywall is displayed to a member (before any conversion action).
  • Design override — Use default design or customize colors, fonts, or Custom CSS for this CTA. Most CTAs expose their CSS in the interface (sometimes under Advanced Settings); you can also style CTAs from your Ghost theme. Pick one approach and stick with it.
Click Preview (eye icon) to see what the CTA looks like to readers.

​
Editing the base sets your template

Each CTA in the Library is a base template — a stylistic starting point that’s never shown to readers directly. When you pick a CTA for a slot, Outpost creates an independent copy of the base (with its own ID), and that copy is what gets rendered. The base just sits in the Library waiting to seed the next copy. That makes editing a base a set-and-forget tool: configure your publication’s house style on the base once, and you stop hand-tweaking every new CTA you create from it. What edits to a base do — and don’t — affect:
  • Copies you create afterward inherit everything from the edited base — headline text, button copy, image, colors, fonts, Custom CSS, all of it.
  • Copies that already exist in your slots are independent records and do not pick up base edits. If you want them in sync with the new base, edit them in the slot where they live, or replace them with a fresh selection (which clones the updated base).
This works for all the standard content and design fields, not just Custom CSS. If you want every future In-Post Subscribe Box to start with your house font, a particular headline voice, and a 24px button radius, set those on the base once before your next slot setup.
This is distinct from Default Design below. Default Design sets defaults that apply across every CTA type (accent color, fonts, button radius). Editing a base CTA sets defaults for one specific template, and only for copies you make from it afterward. Use Default Design for site-wide brand defaults; edit a base CTA when you want template-specific content or styling baked in.

​
Custom CSS

Your CTA may still use unscoped (legacy) CSS — every CTA that existed before the May 2026 scoping change does — in which case you’ll see a Legacy badge in the Custom CSS section of the editor. The behavior described below applies to scoped CSS; see Legacy vs. Scoped CTA CSS for how to tell which mode your CTA uses and how to migrate.
The Custom CSS box, under a CTA’s Advanced Settings, is for small visual tweaks that the standard color and font controls don’t cover — adjusting spacing, transforming the button text, italicizing the headline, and the like. A few common adjustments have no point-and-click control at all (rounding a button’s corners to an exact amount is the usual one), so CSS is the only way to make them. Write plain selectors that target the CTA’s elements. Outpost automatically scopes everything you enter to this one CTA, so your rules can’t leak out and restyle other CTAs or the rest of your site. You don’t need to add an ID or wrapper yourself — write the CSS as if this were the only element on the page, and Outpost handles the rest.

​
How scoping works

Outpost adds the CTA’s unique ID to the front of every selector you write: 
/* You write this */
.outpost-cta-submit {
  border-radius: 8px;
}

/* Outpost applies this */
.outpost-cta[data-cta-id="abc123"] .outpost-cta-submit {
  border-radius: 8px;
}
That prefix is what stops your styles from leaking out — but it has one side effect worth knowing. Because the prefix sits in front of your selector, your rules can only reach elements inside the CTA. A selector aimed at the CTA’s own outer box won’t match: not the .outpost-cta wrapper, not its slot class (.outpost-slot-3), not its style class (.modern-box-promo). Outpost ends up looking for that box inside itself, which never happens — and there’s no error message, the rule just does nothing. Stick to the inner elements below and you’ll avoid this.

​
Elements you can target

SelectorElement
.outpost-cta-innerThe box that holds everything
.outpost-cta-imageThe image
.outpost-cta-headingThe headline
.outpost-cta-subheadingThe description text
.outpost-cta-contentThe text column (heading, description, and form together)
.outpost-cta-formThe area holding the email field and button
.outpost-cta-submitThe button
This isn’t the full list — you can target any element inside the CTA. To find an element’s class, right-click it in your browser and choose Inspect. For example, to uppercase the button label and italicize the headline on just this CTA: 
.outpost-cta-submit {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.outpost-cta-heading {
  font-style: italic;
}

​
Overriding built-in styles

Some properties are already set by the CTA’s built-in styles and by the color controls in the editor. When you set one of those same properties, the built-in value sometimes wins and your rule looks like it was ignored. Adding !important settles it: 
.outpost-cta-inner {
  padding: 1.5rem !important;
}
This comes up most with the button’s background and text color (always locked in, so they always need !important) and with the box’s padding, width, and background. The simple text tweaks above — text-transform, font-style, and so on — don’t need it, because nothing else is setting them.

​
Recipes

Common requests. Each one targets an inner element, so each is safe to paste straight in. Round the button’s corners. The editor’s button-radius options are fully- or slightly-rounded only, set for the whole site at once — so an exact radius, or a different radius on just one CTA, has to go here: 
.outpost-cta-submit {
  border-radius: 8px !important;
}
Size the button to its label instead of a fixed width: 
.outpost-cta-submit {
  width: auto !important;
  white-space: nowrap !important;
}
Add space above the whole CTA. The outer margin lives on the CTA’s wrapper, which custom CSS can’t reach, so put the space on the first element inside instead: 
/* Use .outpost-cta-image when the CTA has an image; otherwise .outpost-cta-inner */
.outpost-cta-image {
  margin-top: 2.5rem !important;
}
Tighten the box padding: 
.outpost-cta-inner {
  padding: 1.5rem !important;
}
Don’t use :root, html, or body selectors. These are treated as global and are not scoped to your CTA — anything you attach to them affects your entire site. If you’ve been defining variables on :root to style a CTA, move those rules onto the CTA’s own elements (like the ones above) instead.
When you clone a CTA, its Custom CSS is copied to the new CTA and automatically re-scoped to that copy. Editing the clone’s CSS won’t affect the original, and vice versa.

​
Why isn’t my CSS applying?

Run down this list — it covers almost every case:
  • You targeted the CTA’s outer box. Selectors like .outpost-cta, a slot class (.outpost-slot-3), or a style class (.modern-box-promo) can’t be reached — only the inner elements can. See How scoping works.
  • You used :root, html, or body. Outpost leaves these global on purpose, so they don’t behave the way you’d want inside a CTA. Move the rules onto the CTA’s own elements.
  • A built-in style is winning. Add !important — see Overriding built-in styles.
  • Your CTA is in Legacy mode. Legacy and scoped CTAs handle CSS differently. Look for the Legacy badge, then see Legacy vs. Scoped CTA CSS.
  • It’s saved but not live yet. Re-publish the CTA and hard-refresh the page; caching can keep an old version around for a few minutes.

​
Default Design

This lets you set global styling that applies to all CTAs unless overridden on individual CTAs. On first connection, Outpost reads your Ghost theme’s accent color and fonts and uses them as defaults.
Default Design page showing accent color selection, button font and border radius settings, and larger CTA font settings

​
Accent color

  • Outpost accent color — Choose from 7 preset colors or set a custom color
  • The accent color applies to buttons and larger CTAs in light mode
  • Dark mode colors are generated automatically

​
Buttons

SettingOptions
Button fontSite Default Font or select a custom font
Button radiusFully rounded or Slightly rounded

​
Larger CTAs

SettingDescription
Header fontFont for CTA headlines
Description fontFont for CTA body text
Include sign-in linkShow “Already a member? Sign in” text for unknown readers
Sign-in link textCustomizable sign-in prompt text
Sign-in URLWhere the sign-in link points (default: Ghost portal)
Content selectorCSS selector for your Ghost theme’s content area (default: .gh-content)

​
Content selector — when to change it

Most Ghost themes use .gh-content as the content wrapper, and Outpost uses this to detect where your post starts and ends for In-Post CTA placement. You should only change this if your In-Post CTAs are not appearing in posts even though Auto Display is enabled and configured correctly. This is most common with custom or heavily modified Ghost themes that rename the content wrapper. To find your theme’s selector, right-click on your post body in a browser, choose Inspect, and look for the class on the outermost <div> wrapping your post text. The Theme Connection Wizard does look for this and tries to set it when first connecting your theme.
If In-Post CTAs aren’t showing right after you sign up, your theme is probably not connected or your content selector is non-standard.

Auto Display CTAs

Overview of how slots, audiences, and CTAs fit together

Slots & Targeting

Configure where CTAs appear and who sees them

Labels

Apply member labels on conversion for tracking and automation

CTA Dashboard

View analytics across all your CTAs