Vestige Documentation

1. Download the vestige.zip file from your purchase confirmation email.
2. In Ghost Admin, go to Settings → Design → Change theme.
3. Click Upload theme and select the zip file.
4. Once uploaded, click Activate.

After activating Vestige, complete these essential setup tasks:

1. Set your site title and description — Settings → General.
2. Upload a logo — Settings → Design → Brand. Recommended: SVG or PNG, max height 40px.
3. Configure navigation — Settings → Navigation.
4. Create tags — At minimum, create the tags that will appear as homepage sections (e.g., Essay, Newsletter, Interview).
5. Set up membership — Settings → Membership to enable subscribe forms.
6. Configure testimonials — Settings → Design → Custom → Homepage section.

Vestige supports three color modes:

• Auto — Follows the visitor's system preference (default).
• Light — Warm cream background with forest green accents.
• Dark — Dark background with muted green accents.

To change: Settings → Design → Theme → Site wide → Color scheme.

Dark / Light Mode Toggle

Vestige includes a sun/moon toggle button in the header that lets visitors switch between light and dark mode. Their preference is saved in the browser.

To enable/disable: Settings → Design → Theme → Site wide → Show dark mode toggle (enabled by default).

Color Tokens

Dark mode uses a separate set of color tokens:

Vestige uses three font families:

• Headings: Playfair Display (serif)
• Body: Source Serif 4 (serif)
• UI elements: DM Sans (sans-serif)

You can override the heading and body fonts via Ghost's custom font picker in Settings → Design → Brand → Typography. Vestige respects Ghost's --gh-font-heading and --gh-font-body CSS variables.

Configure your site navigation in Settings → Navigation.

Primary Navigation

Appears in the site header. Recommended: 2–4 items to keep the header clean.

Topics Dropdown

The header automatically includes a Topics dropdown that lists your top tags (up to 8, sorted by post count). Each item shows the tag name and description. This is fully dynamic — no configuration needed, just create tags and assign posts to them.

Secondary Navigation

Appears in the site footer. Use this for links like Privacy Policy, Terms, Contact, etc.

Set your site title in Settings → General → Title & description. The title appears in the header when no publication logo is uploaded, and is also used in the subscribe CTA, footer, and browser tab.

Vestige supports two image types in Settings → Design & branding → Customize:

Publication Logo

When set, the logo replaces the site title text entirely in the header. Use this for a full wordmark or custom logo.

• Recommended format: SVG or PNG with transparency.
• Recommended max height: 40px for best header fit.

Publication Icon

When set (and no logo is uploaded), the icon displays next to the site title text. Use this for a small square mark or favicon-style icon (e.g., a monogram, symbol, or orb).

• Recommended: 60×60px square, SVG or PNG.
• Also used as the browser favicon.

Behavior Summary

Ghost supports Facebook and X/Twitter links in Settings → General → Social accounts. These are displayed in the footer.

The hero section displays your latest featured post with a large title, excerpt, feature image, and a "Read this issue" link.

To set a post as the hero:

1. Open the post in Ghost Editor.
2. Click the settings icon (gear) in the top right.
3. Toggle Feature this post on.

The most recently published featured post appears in the hero. Make sure it has a feature image set for the best visual result.

Below the hero, Vestige includes a social proof section with:

• "As featured in" logos — Press/publication logos displayed in a horizontal row.
• Stats text — A single line of trust-building text (e.g., "Trusted by thousands of readers").
• Testimonial cards — Up to 3 testimonials with star ratings, quotes, and author names.
• Subscribe form — An inline email subscription form (visible to non-members only).

Configuring "As Featured In" Logos

Go to Settings → Design → Theme → Homepage:

• featured_in_label — The heading text above logos (default: "As featured in"). Leave empty to hide the label.
• featured_in_logo_1 through featured_in_logo_5 — Upload up to 5 brand/press logos (SVG or PNG recommended).

Configuring Stats Text

• stats_text — The trust line displayed above testimonials (e.g., "Trusted by thousands of readers · Published weekly · Free & paid tiers").

Configuring Testimonials

Go to Settings → Design → Theme → Homepage:

• testimonial_1_quote / testimonial_1_author — First testimonial.
• testimonial_2_quote / testimonial_2_author — Second testimonial.
• testimonial_3_quote / testimonial_3_author — Third testimonial.

The homepage automatically groups posts by tag into categorized sections. Each section displays:

• Tag name as section heading with post count pill.
• Tag description as subtitle.
• "View all" link to the full tag archive.
• Up to 3 posts from that tag.

Sections appear for each of your primary tags. The display format varies:

• List layout — Used for tags like "Essay" and "Interview" (text-focused posts).
• Grid layout — Used for tags like "Newsletter" (image-heavy posts with feature image cards).

To control which tags appear, create tags in Ghost Admin → Tags and assign posts to them.

This section appears near the bottom of the homepage and includes:

• Author avatar and bio.
• "Topics we explore" — A grid of tag cards linking to tag archives.

The author information is pulled from the site owner's Ghost profile. Update it in Settings → Staff → [Your profile].

A full-width subscribe call-to-action appears at the bottom of every page (except for logged-in members). It includes:

• Site title as heading ("Subscribe to [Site Name]").
• Description text.
• Email input + subscribe button.
• Trust text below the form.

This section is automatically hidden for signed-in members.

Each post page includes:

• Primary tag label with published date and reading time.
• Post title and excerpt.
• Author name with avatar.
• Feature image (container-width with rounded corners).
• Post content (680px max-width for comfortable reading).
• Tag pills at the bottom.
• Author card with bio.
• Previous/Next post navigation.

Reading time is displayed next to the date on post pages. To toggle it:

Settings → Design → Custom → Post → Show reading time

Set to false to hide reading time from all posts.

1. Go to Settings → Membership.
2. Choose your access model: free, paid, or both.
3. For paid tiers, connect Stripe in Settings → Membership → Stripe.

Once membership is enabled, Vestige automatically shows:

• Subscribe button in the header.
• Sign in link in the header.
• Subscribe forms in the social proof and CTA sections.
• Account link for signed-in members (replaces Subscribe/Sign in).

Vestige includes a custom paywall system with three components:

1. Post page paywall

When a reader doesn't have access to a gated post, Vestige shows:

• A blurred excerpt preview (full-width) with a gradient fade, giving readers a taste of the content.
• A paywall card (full-width) with a lock icon, title, description, and call-to-action button.

The paywall adapts based on the reader's membership status:

• Non-members see a "Subscribe now" button that opens the Ghost signup portal.
• Free members see an "Upgrade your plan" button that links to account plan settings.

2. Lock icon on post listings

Gated posts display a small lock icon next to the post title on the homepage, tag archives, and author archives. This helps readers identify members-only or paid content at a glance, without any additional text label.

3. How to gate a post

1. Open any post in the Ghost editor.
2. Click the settings gear (top right).
3. Under "Post access", select:
   • Public — No paywall, visible to everyone. No lock icon.
   • Members only — Free and paid subscribers can read. Lock icon shown.
   • Paid members only — Only paid subscribers can read. Lock icon shown.

No theme code changes are needed per post — the same template handles all visibility levels automatically.

Each tag has an archive page at /tag/[slug]/. It displays:

• Tag name and description.
• All posts tagged with that tag, paginated.

Customize tag metadata in Ghost Admin → Tags → [Tag name]. Add a description to give context on the archive page.

Each author has a page at /author/[slug]/ showing their avatar, bio, and all their posts.

Update author information in Settings → Staff → [Author name].

All colors are defined as CSS variables on :root (light mode) and [data-color-scheme="dark"] (dark mode).

Light Mode

Dark Mode

Override any variable via Settings → Code Injection → Site Header:

Change accent color to blue

<style>
:root {
    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;
}
[data-color-scheme="dark"] {
    --color-accent: #60a5fa;
    --color-accent-hover: #93bbfc;
}
</style>

Change link color

<style>
:root {
    --color-link: #7c3aed;
    --color-link-hover: #6d28d9;
}
</style>

Use custom fonts

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
    --font-heading: 'Lora', Georgia, serif;
}
</style>

Widen the content area

<style>
:root {
    --content-max: 760px;
    --container-max: 1400px;
}
</style>

Add custom CSS or JavaScript via Settings → Code injection. This is the recommended way to customize your theme without editing source files. See the Design System section above for all available CSS variables you can override.

Example: Invert logo for dark mode

<style>
[data-color-scheme="dark"] .gh-head-logo img {
    filter: invert(1);
}
</style>

Example: Hide "Powered by Ghost" in footer

<style>
.gh-foot-meta { display: none; }
</style>

By default, Vestige shows 10 posts per page. To change this, you need to edit the theme's package.json file:

1. Download the theme zip from Ghost Admin.
2. Extract and edit package.json.
3. Change "posts_per_page": 10 to your desired number.
4. Re-zip and upload the theme.

Vestige supports Ghost's native commenting system. Enable it in Settings → Membership → Commenting.

Options:

• Off — No comments.
• All members — Free and paid members can comment.
• Paid members only — Only paid subscribers can comment.

Vestige ships with full translation support. All user-facing UI strings use Ghost's {{t}} helper and are defined in locales/en.json.

How to translate Vestige

1. Download and extract the theme zip.
2. Open locales/en.json to see all translatable strings.
3. Create a new file for your language, e.g. locales/fr.json for French, locales/de.json for German.
4. Copy the contents of en.json and translate the values (right side) while keeping the keys (left side) unchanged.
5. Set your site language in Settings → General → Publication language (e.g., fr for French).
6. Re-zip and upload the theme.

Example (French)

{
  "Subscribe": "S'abonner",
  "Sign in": "Se connecter",
  "Read more": "Lire la suite",
  "Previous": "Précédent",
  "Next": "Suivant"
}

Translatable strings

Vestige includes translations for: navigation labels (Subscribe, Sign in, Account), post navigation (Previous, Next), paywall text, subscribe forms, error pages, member pages (signup, signin, account), and more. See locales/en.json for the complete list.

You can set up automatic theme deployment using GitHub Actions. When you push theme changes to your repository, the workflow builds, zips, and uploads the theme to your Ghost instance via the Admin API.

Requirements:

• A Ghost Admin API key (Settings → Integrations → Add custom integration).
• Store the key as a GitHub secret (e.g., GHOST_ADMIN_API_KEY).

See the Ghost Theme Docs for more details on the Admin API.