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.

The Library holds every CTA template you can assign to a slot, and the Default Design and Custom CSS settings control how they look. A CTA must be enabled in the Library before it can be assigned anywhere.

Library

The Library is where you browse, edit, enable, and manage all available CTA templates. CTAs must be enabled in the Library before they can be assigned to a slot.
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 Library is organized by the same slot type tabs as Auto Display Slots:
  • 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, Rounded Subscribe, 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.

Custom CSS

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. 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. The elements you’ll most often target:
SelectorElement
.outpost-cta-headingThe headline
.outpost-cta-subheadingThe description text
.outpost-cta-submitThe button
.outpost-cta-innerThe CTA container
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;
}
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.

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 8 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