CTA Library & Styling - Outpost Docs

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 — The CTA Library showing available templates organized by type

How to use the Library

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 Download. Pick the tab for the kind of CTA you want to build.

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.

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.

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, Classic boxes, and HTML Box
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 Download: Subscribe and upgrade popup styles for downloads

HTML Box appears in two places: here under In-Post, and on the Ad Tool Library. Both read the same row for your site, so switching HTML Box off in one place hides it in the other.

CTA categories

Buttons (7 types)

Simple, inline buttons that can be placed in posts:

Button	Purpose
Subscribe	Sign up as a free member
Upgrade to Paid	Convert free members to paid
Upgrade to Annual	Convert monthly to annual
Donate	One-time donation via Tip Jar
Gift Subscription	Purchase a gift subscription
Multitier Custom Link	Selector for multiple subscription tiers
Custom Link	Link to any URL

The Multitier Custom Link button lets you send different readers to different places. When you open it, you get one row per audience: readers Outpost doesn’t recognize, free members, and each of your paid Ghost tiers. Every row starts with the label Learn More and an empty URL, so fill in a URL on each row you want to use. A row you leave blank shows no button at all to the readers it covers.

In-Post Boxes: Modern (10 styles)

Full-width boxes with modern styling: Subscribe, Subscribe Slim, Subscribe Wide, Discount Offer, Custom Link, Upgrade, Donate, Multiline Text, No Button, Subscribe 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

HTML Box (1 style)

An in-post box that renders HTML you paste in yourself, for anything the standard styles don’t cover. It takes two separate blocks of markup, one for desktop and one for mobile, each capped at 10,000 characters. Fill in both. Readers on a phone or tablet only see the mobile block, so leaving it empty shows them nothing. HTML Box sits under its own HTML heading on the In-Post tab and in the in-post CTA picker on Auto Display Slots, and it keeps its place on the Ad Tool.

Popups: Modern (6 styles)

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

Popups: Classic (5 styles)

Subscribe, Custom Link, Upgrade, Discount, No Button

Slide-Ups: Modern (5 styles)

Subscribe, Upgrade, Discount, Custom Link, Subscribe 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). On the Custom Link styles the URL is required. If you leave it empty, the CTA renders without its button and the rest of the box or popup shows as normal.
Image: Background or header image (on supported styles). See Images for the sizes each style takes.
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. The text fields have length limits, listed in Text limits below.

Editing the base sets your template

Each CTA in the Library is a base template: a starting point that readers never see directly. When you pick a CTA for a slot, Outpost makes a separate copy of it, and that copy is what readers see. The base stays in the Library, ready to be copied again. 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.

Settings panels

The reorganized editor described here is rolling out one site at a time. If your editor shows a single long Settings tab alongside separate Custom CSS, Preview, and Advanced Settings tabs, your site is still on the previous layout. Where the two editors differ elsewhere on this page, the difference is called out.

On the updated editor, the Settings tab is a stack of collapsible panels instead of one long form. Open the panel you need and leave the rest closed:

Content: the reader-facing copy and the image. Less-used fields sit in a nested More options panel inside it.
Sign-up agreement: whether this CTA shows an agreement checkbox, and whether the box starts ticked. See Agreement text.
Sign-in: Show sign-in link, Sign-in message, Sign-in link text, and Sign-in link URL, now in one place rather than split between two sections.
Frequency: holds Display Frequency (hours), how long to wait before showing this popup to the same visitor again. The default is 24 and anything from 0 to 8760 is accepted. This panel is on popups, slide-ups, and paywall popups only; in-post boxes don’t have it. It replaces the section previously called Display Settings.
Tier Settings: on the Multitier Custom Link button only.
Design: this CTA’s colors and fonts, grouped under Background, Text, Buttons, Sign-in text, Overlay, and Dark theme. Each control drops the heading’s word from its own label, so the control under Background reads Color. A Use site’s default design checkbox hands the CTA back to Default Design.
Custom CSS: the box described in Custom CSS, as a panel rather than its own tab.

Fields that depend on a switch dim when the switch is off, but they stay editable and still save. Sign-in message, Sign-in link text, and Sign-in link URL dim when Show sign-in link is off, and Name placeholder dims when Name field has no Include box ticked.

Text limits

Each text field shows a counter beneath it in the form 120 / 300. Where a shorter length is recommended, the counter names the recommendation as well and turns orange once you pass it. The recommendation is advice about how the CTA reads; the limit is enforced when you save.

Field	Limit	Recommended
Header text, on every style	80 characters	60
Description text on the Multiline Text and No Button in-post boxes, and on the No Button popups	1600 characters	400
Description text on slide-ups (except Subscribe Wide)	200 characters	none
Description text everywhere else, including the Subscribe Wide slide-up	300 characters	none
Button text on the signup form in boxes, popups, paywalls, and gated download popups, and on the Subscribe Wide slide-up	40 characters	none
Button text on every other slide-up	30 characters	none
Subscribe, Upgrade to Paid, Upgrade to Annual, Gift Subscription, and Custom Link buttons	60 characters	40
Donate button	60 characters	45
Desktop and mobile markup on the HTML Box, counted separately	10,000 characters	none

On the description and agreement fields, bold text and links count toward the limit, so formatted text reaches the limit sooner than the visible character count suggests. The 1600-character description limit on those six styles replaces a much lower cap. It was raised so long description copy that was already saved on a site can be edited and saved again.

Images

An image field states what it needs directly above the control:

Style	Image
Boxes, popups, slide-ups, paywall popups, and gated download popups	3:2 ratio, at least 600px wide
Wide Modern popup and Wide Modern slide-up	16:9 ratio, at least 800px wide
Gated download card logo	1:1 ratio, at least 480px wide
Gated download box logo	1:1 ratio, at least 120px wide

Choosing a file opens a Crop Image dialog with Cancel and Apply. Files are capped at 5 MB, and the cropped result is saved as a JPEG. Once an image is set, the control shows Remove Image and Replace image side by side, so you no longer have to remove the old image before uploading a new one. Replace image runs the same crop dialog.

Only the cropped copy is stored, so a saved image can’t be re-cropped. To change the crop, upload the file again.

On sites still using the previous editor, the image control is unchanged: Remove Image and the upload button already sat side by side, and the file cap there is 1 MB.

Unsaved changes

Closing the editor with edits you haven’t saved asks first. The prompt is headed You have unsaved changes and offers three answers:

Discard changes closes the editor and puts the CTA back the way it was last saved.
Save and close saves your edits, then closes. It reads Save and leave when you are moving to another page in Outpost.
Keep editing returns you to the editor.

You get the prompt on every way out: the X in the header, Escape, clicking outside the dialog, the Cancel button, and moving to another page in Outpost. Reloading the page or closing the browser tab gets your browser’s own leave-site warning instead. On the previous editor, the Advanced Settings dialog checks the same way and shares the same record of what you have changed, so moving between the two dialogs doesn’t lose track of your edits. The save bar sits at the bottom of the editor with Cancel and Save changes, and stays in view on the Preview tab while there is anything left to save. If a save fails, the editor stays open with your edits intact.

Custom CSS

Your CTA may still use unscoped (legacy) CSS. Every CTA that existed before the May 2026 scoping change does, and in that 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. 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

Selector	Element
`.outpost-cta-inner`	The box that holds everything
`.outpost-cta-image`	The image
`.outpost-cta-heading`	The headline
`.outpost-cta-subheading`	The description text
`.outpost-cta-content`	The text column (heading, description, and form together)
`.outpost-cta-form`	The area holding the email field and button
`.outpost-cta-submit`	The 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, which means 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. The tab also holds your site’s agreement text, which saves separately from the design settings.

Accent color

The Accent color card offers three choices:

Site accent (from Ghost): follow the accent color on your Ghost site. This doesn’t copy a fixed color. Outpost reads the accent color it has synced from Ghost each time a CTA renders, so changing the accent in Ghost changes your CTAs with it. To pull in a color you have just changed in Ghost, use Refresh on Publication Details with Site settings selected.
Outpost accent color: pick one of seven preset colors.
Custom accent color: set your own. The Edit button opens a Custom Accent Color dialog with Light Mode and Dark Mode tabs.

The accent color applies to your Auto Display buttons and larger CTAs in light mode. Dark mode colors are generated automatically for readability. These apply to every CTA and button by default, and you can override them on an individual CTA.

Buttons

Setting	Options
Button font	Site Default Font or select a custom font
Button radius	Fully rounded or Slightly rounded

On Modern boxes, Modern popups, and Modern slide-ups, Button font also sets the font of the email and name fields in the signup form, and their text sits level with the button. Wide Modern and Rounded Modern styles, and all Classic styles, keep their own field styling. Button radius reaches the signup form on the Classic styles: it rounds the corners of the email and name fields as well as the button, so the whole form matches. Modern, Wide Modern, and Rounded Modern styles keep a fixed field radius of their own and don’t follow this setting.

Larger CTAs

This part of the tab is split into two blocks, Design and Sign-in upsell.

Design

Setting	Description
Header font	Font for CTA headlines
Description font	Font for CTA body text

Setting	Description
CTAs shown to unknown readers	One checkbox, Include text and a link for registered members to sign in. Tick it to add the sign-in prompt to CTAs shown to readers Outpost doesn’t recognize.
Sign In link explanation	The words before the link. Default: “Already a member?”
Sign In link text	The link label itself. Default: “Sign in”
Default sign-in URL	A site-wide sign-in page for the link to point at. See Where the sign-in link points.
Content selector	CSS selector for your Ghost theme’s content area (default: `.gh-content`)

Most sites need nothing here. While your site is on Ghost’s standard Portal links, the sign-in link opens Ghost’s sign-in window on the page the reader is already reading, so they aren’t sent off to your homepage to sign in. If you have replaced the Portal Sign In link with a page of your own, readers are sent to that page instead. Outpost works through three places in order and uses the first one that is filled in:

The Sign-in link URL on that CTA, in the Sign-in group of the CTA editor.
Default sign-in URL on this tab.
Your site’s Portal Sign In link, from the Membership Links on Publication Details.

Set Default sign-in URL if your readers sign in somewhere else, either because you turned off Portal sign-in or because you built your own sign-in page. Put that page’s URL there and every CTA on your site uses it. To send readers of one particular CTA somewhere different from the rest, fill in Sign-in link URL in that CTA’s own editor. A URL saved on the CTA itself is used ahead of your site setting, so leaving that field empty is what lets a CTA follow the site.

CTAs created before the 3.16 release each saved their own copy of the Ghost sign-in URL. Since a URL on the CTA is used first, any of those older CTAs keeps sending readers to Ghost even after you set a Default sign-in URL. To fix one, open it and clear its Sign-in link URL field.

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.

Agreement text

The wording shown next to the agreement checkbox under a CTA’s signup form is one site setting, not a field on each CTA. It lives in the Agreement text card at the bottom of the Default Design tab, below the design settings.

This card has its own Save agreement text button. The Save design settings buttons above it don’t save the agreement text, and this button doesn’t save the design settings.

Write the wording into Text shown next to the checkbox. Formatting is bold and links only: select the words you want to link, then use the link button. Because the links sit inside the text, one sentence can point at both your terms page and your privacy page. The limit is 2000 characters. On the description and agreement fields, bold text and links count toward the limit, so formatted text reaches the limit sooner than the visible character count suggests. If you go over it, the editor tells you by how much and the save button stays disabled until you are back under. Links in the agreement open in a new tab, so a reader partway through signing up isn’t navigated away from the form.

Which wording a CTA shows

While the site setting is empty, the card says so, and each CTA keeps showing whatever agreement text was saved on it before.
Once the site setting holds text, every CTA shows that text instead.

Nothing is deleted either way. Clearing the site text hands each CTA back to its own stored wording.

What each CTA still controls

Each CTA decides whether the checkbox appears at all, and whether it starts ticked. On the updated editor those two controls are in the Sign-up agreement panel: Show an agreement checkbox and Start with the box already ticked, alongside a read-only preview of the wording readers will see and a link back to this card. On the previous editor the same controls read Show Terms and Conditions Agreement and Checkbox Prechecked. Readers only see the agreement on CTAs where that checkbox is switched on. Where it appears it is required: the form won’t submit until it’s ticked. Setting the CTA to start ticked just pre-ticks it for the reader. It applies to CTAs with a signup form, which covers in-post boxes, popups, slide-ups, paywall popups, and gated download subscribe popups.

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

​What is the Library?

​How to use the Library

​How the Library is organized

​CTA categories

​Buttons (7 types)

​In-Post Boxes: Modern (10 styles)

​In-Post Boxes: Classic (8 styles)

​HTML Box (1 style)

​Popups: Modern (6 styles)

​Popups: Classic (5 styles)

​Slide-Ups: Modern (5 styles)

​Slide-Ups: Classic (4 styles)

​Editing a CTA

​Editing the base sets your template

​Settings panels

​Text limits

​Images

​Unsaved changes

​Custom CSS

​How scoping works

​Elements you can target

​Overriding built-in styles

​Recipes

​Why isn’t my CSS applying?

​Default Design

​Accent color

​Buttons

​Larger CTAs

​Design

​Sign-in upsell

​Where the sign-in link points

​Content selector: when to change it

​Agreement text

​Which wording a CTA shows

​What each CTA still controls

​Related

Auto Display CTAs

Slots & Targeting

Labels

CTA Dashboard

What is the Library?

How to use the Library

How the Library is organized

CTA categories

Buttons (7 types)

In-Post Boxes: Modern (10 styles)

In-Post Boxes: Classic (8 styles)

HTML Box (1 style)

Popups: Modern (6 styles)

Popups: Classic (5 styles)

Slide-Ups: Modern (5 styles)

Slide-Ups: Classic (4 styles)

Editing a CTA

Editing the base sets your template

Settings panels

Text limits

Images

Unsaved changes

Custom CSS

How scoping works

Elements you can target

Overriding built-in styles

Recipes

Why isn’t my CSS applying?

Default Design

Accent color

Buttons

Larger CTAs

Design

Sign-in upsell

Where the sign-in link points

Content selector: when to change it

Agreement text

Which wording a CTA shows

What each CTA still controls

Related