Launch documentation

Launch homepage

A bright Ghost theme for SaaS and startup blogs: a gradient hero with your lead story in a browser window, a changelog with version badges, release notes with New / Improved / Fixed labels and an announcement bar.

Thank you for choosing Launch. This guide covers everything from uploading the theme to setting up paid memberships. If something is not covered here, write to support@codememory.com — we answer within one working day.

Highlights

  • Gradient homepage hero: your title, the site description, a signup form and the newest featured post inside a tilted browser window
  • Changelog: add an internal tag like #v 2.4.0 to a post and it gets a version badge, a place on the Changelog page timeline and a "New" pill on the homepage
  • Release notes template: lists whose items start with New:, Improved: or Fixed: get coloured labels, and every screenshot sits in a browser frame
  • Browser frames for screenshots in any post with the internal tag #frame, with your product's address in the bar
  • Announcement bar at the top of every page; readers can close it, and a new message shows again
  • Call-to-action card after every post (title, text, button and link from the theme settings)
  • Comparison tables: ✓ and ✗ cells become clear icons with labels for screen readers
  • Table of contents on long posts, with numbered sections
  • Editor's picks, a releases row and tag chips on the homepage
  • Light by default, with a deep-blue dark mode and a reader toggle
  • Changelog, Topics and Writers page templates
  • Membership page with tiers and a monthly/yearly switch; styled paywall for members and paid posts
  • Sign in, sign up and account pages
  • Reading progress bar, image lightbox, galleries, callouts, toggle cards and code blocks
  • Self-hosted fonts (Plus Jakarta Sans, JetBrains Mono)
  • Fully translatable, 19 theme settings, no jQuery

What is in the download

themeforest-launch-ghost-theme/
├── documentation/                          ← you are here
├── sample-content/launch-sample-content.json  ← optional demo posts (see Sample content)
└── launch_1.0.0_for_ghost_6.0.0_or_later/
    ├── launch.zip                          ← upload this file to Ghost
    └── launch/                             ← the same theme, unzipped, with source files

You only need launch.zip to use the theme. The unzipped folder is there for developers who want to change the code (see Development).

Installation

  1. Sign in to your Ghost admin (yoursite.com/ghost).
  2. Go to Settings → Design & branding → Customize → Change theme.
  3. Click Upload theme and choose launch.zip from the launch_1.0.0_for_ghost_6.0.0_or_later folder. Do not upload the whole download.
  4. Click Activate.
Ghost(Pro) customers: custom themes need the Creator plan or higher. Self-hosted Ghost: any version from 6.0.0 works.

Updating

When a new version is released, download it from your ThemeForest Downloads page and upload the new launch.zip the same way. Ghost asks whether to overwrite the existing theme — choose Overwrite. Your content, navigation and theme settings are kept.

If you edited the theme files yourself, keep a copy of your changes first: an update replaces every file.

Quick setup (10 minutes)

To make your site look like the demo, do these steps in order. Each one is explained in detail further down.

  1. Brand: Settings → Design & branding → set the Accent colour, upload a logo and a site icon.
  2. Navigation: Settings → Navigation → add your main links (see Navigation).
  3. Pages: create the pages in Pages and templates and pick the matching template.
  4. Membership: Settings → Membership → turn on signups; add paid tiers and connect Stripe (see Membership).
  5. Theme settings: Design & branding → Theme tab (see Theme settings).
  6. Changelog: create a page with the slug changelog and choose the Changelog template. Add an internal tag #v 1.0.0 to each release post.
  7. Hero: set Hero title in the theme settings and mark your best posts as Featured. The newest featured post appears in the browser window.
  8. Call to action: set the CTA title, text, button and link, or leave the title empty to hide the card.

Sample content

The download includes the demo's text as a Ghost import file: sample-content/launch-sample-content.json. It holds 31 posts, 9 pages, 8 tags and the demo writers, with the same templates and settings per post as the live demo. Use it to see how Launch looks with real content, or as a starting point you edit.

  1. Use a new or test site — the import adds posts next to anything you already have.
  2. Go to Settings → Advanced → Import/Export → Import content.
  3. Choose launch-sample-content.json and confirm.
  4. Set up Navigation, page templates and theme settings as described below. Ghost does not import these from a content file.
Photos, audio and video from the demo are not included: they are stock media used for the preview only (see third-party materials). Add your own feature images to the posts. Imported writers can be removed in Settings → Staff when you no longer need them.

Logo, colours and fonts

Accent colour

Settings → Design & branding → Accent colour. Launch uses it for buttons, links, highlights and the reading-progress bar. Launch uses your accent colour (violet #5B4BFF by default) for buttons, links, version badges and the reading progress bar. The violet-to-amber gradient on the announcement bar, hero, call-to-action card and featured tier is part of the design; change it in CSS with the --g1 to --g4 variables. Each tag's accent colour is used for its dot on cards and chips.

Logo

Upload a logo in Design & branding → Brand. Without a logo, Launch shows the site title in the theme's display font. A transparent PNG or SVG around 400 × 100 px works best. If your logo is dark, upload a light version in the Theme tab under Logo for dark mode.

Fonts

Launch ships its own fonts (JetBrains Mono, Plus Jakarta Sans), hosted inside the theme — no requests to Google. To use different fonts, pick a Heading font and Body font in Design & branding → Brand. The theme follows your choice everywhere. Choose Theme default to go back.

Light and dark mode

In the Theme tab, Color scheme sets the default: Light, Dark or System (follows the reader's device). Readers can switch with the moon/sun button in the header or the switch in the menu; their choice is remembered on that device.

Theme settings

Settings → Design & branding → Customize. Theme settings are split between the Site wide, Homepage and Post tabs. Every setting:

SettingGroupTypeDefaultWhat it does
Color schemeSite wideselectLight (Light / Dark / System)Readers can still switch with the sun/moon button.
Logo for dark modeSite wideimage—Optional light version of your logo for dark mode.
Newsletter titleSite widetextGet the Tuesday noteTitle of the newsletter box.
Newsletter textSite widetextemptyText of the newsletter box. Empty = site description.
Footer textSite widetextemptySmall footer line. Empty = site description.
Show share buttonsPostbooleanOnShare buttons (X, Facebook, LinkedIn, copy link) under posts.
Show author boxPostbooleanOnAuthor photo and bio under posts.
Show related postsPostbooleanOnThree posts from the same tag under each post.
Show reading progressPostbooleanOnProgress bar at the top of the screen while reading a post.
Announcement textSite widetextemptyA bar at the top of every page. Empty = no bar. Readers can close it; a new text shows again.
Announcement urlSite widetextemptyLink for the announcement bar, for example /changelog/.
Frame addressSite widetextemptyAddress shown in browser frames around screenshots. Empty = your site address.
Hero titleHomepagetextemptyBig title on the homepage. Empty = site title. The site description shows under it.
Show hero frameHomepagebooleanOnShow the newest featured post in a browser window next to the title.
Show changelogHomepagebooleanOnThe newest release (posts with a #v tag) above the title, and the latest releases row.
Cta titlePosttextReady to try it yourself?Call-to-action card after each post. Empty = no card.
Cta textPosttextempty
Cta buttonPosttextStart free
Cta urlPosttextemptyButton link. Empty = the free signup form.

Releases and the changelog

Launch reads the version from an internal tag (a tag whose name starts with #, which readers never see):

  1. On a release post, add the tag #v 2.4.0 (any version text works: #v 3.0 beta).
  2. In the post settings, choose the Release notes template.
  3. Publish. The post gets a version badge on its card and header, the homepage shows it in the New pill and the releases row, and the Changelog page lists it on the timeline.

The Changelog page is a normal page with the Changelog template; any text you write on it appears above the timeline. Turn the homepage pill and row off with Show changelog.

New, Improved and Fixed labels

In a post with the Release notes template, write a bulleted list where each item starts with a label and a colon:

- New: Scheduled reports by email and Slack.
- Improved: The API is three times faster.
- Fixed: Weekly charts start on Monday again.

Launch removes the prefix and shows a coloured label instead (green, blue, amber). The words are translatable in locales/, so a German site can write Neu:, Verbessert: and Behoben:.

Browser frames and the announcement bar

Screenshots in Release notes posts, and in any post with the internal tag #frame, get a browser window around them with three dots and an address bar. Set the address with Frame address (for example app.yourproduct.com); empty uses your site address.

The announcement bar appears when Announcement text is set, with an optional link. A reader who closes it does not see the same text again; when you change the text, it shows again for everyone.

Comparison tables

In any table, cells that contain only ✓ (or Yes) and ✗ (or No) become green ticks and grey crosses, centred in their column, with "Included" and "Not included" for screen readers. A table needs at least two such cells; a dash stays a dash.

Pages and templates

Launch includes page templates for the pages every membership site needs. Create a page in Ghost (Pages → New page), set its URL in the page settings, then choose the Template in the same panel.

TemplateSuggested URLUse
Changelog
custom-changelog.hbs
/changelog/Every post with a #v tag on a timeline, newest first: version, date, screenshot in a browser frame and summary.
Topics
custom-topics.hbs
/topics/Every public tag as a card with its image, colour dot, description and post count.
Writers
custom-writers.hbs
/writers/Every author with at least one post: photo, location, bio and post count.
Membership
custom-membership.hbs
/membership/Your tiers with a monthly/yearly switch. The page body (for example a FAQ made of toggle cards) appears below.
Signin
custom-signin.hbs
/signin/Email sign-in form (magic link) with the page's feature image.
Signup
custom-signup.hbs
/signup/Free signup form with name and email and the page's feature image.
Account
custom-account.hbs
/account/Signed-in members see their plan, renewal date, card and links to manage billing and newsletters.

Tip: the membership page shows your tiers automatically. Anything you write in the page body appears underneath — the demo uses toggle cards for a FAQ.

Post templates

Choose a template per post in the post settings panel → Template.

TemplateUse
Release notes
custom-release.hbs
Version badge, framed screenshots, New / Improved / Fixed labels and the earlier releases below.

Membership, tiers and payments

Launch is built for Ghost's members features: free and paid signups, tiers, a paywall and the Portal popup.

1. Turn on signups

Settings → Membership → Access → Who should be able to subscribe? → Anyone can sign up.

2. Connect Stripe

Settings → Membership → Tiers → Connect with Stripe. Use test mode first, then switch to live mode when you are ready to take real payments.

3. Create tiers

Settings → Membership → Tiers. Add a name, monthly and yearly prices, a description and benefits. Launch shows every public tier on the membership page with a monthly/yearly switch, and marks the second tier as Most popular.

4. Members-only content

In a post's settings set Post access to Members only, Paid-members only or specific tiers. Readers without access see the start of the post and a paywall box that invites them to join or upgrade. To choose where the preview stops, add a Public preview divider in the editor (type /public).

5. Sign-up forms and buttons

Subscribe forms in the theme create free members and send a confirmation email. Every Subscribe, Sign in and Account button opens Ghost's Portal popup, so members can change plans, update cards and cancel without leaving your site.

Emails (sign-in links, receipts) need working email. On Ghost(Pro) it works out of the box. Self-hosted sites must configure Mailgun or SMTP in config.production.json.

Newsletters, comments and search

Newsletters: Settings → Newsletters. Posts can be sent by email when you publish. The theme's subscribe forms subscribe readers to your default newsletters.

Comments: Settings → Membership → Commenting. When on, comments appear under every post that the reader has access to.

Search: works out of the box. The search icon in the header opens Ghost's search; readers can also press Ctrl/⌘ + K.

Reading features

  • Reading progress bar on posts, in the post's topic colour (can be turned off in the Post tab).
  • Image lightbox: click any image or gallery photo in a post to see it full screen; use the arrow keys to move through a gallery.
  • Every editor card is styled: images (regular, wide, full), galleries, quotes, callouts, toggles, bookmarks, buttons, videos, audio, files, products, headers and signups. Create a page with every card to check your brand — the demo's style guide shows them all.

Posts per page

The home, tag and author pages load 9 posts, then a Load more button fetches the next set without reloading the page. To change the number, edit "posts_per_page" in package.json, zip the theme folder and upload it again.

Translation

Every word in the theme can be translated.

  1. In the unzipped theme folder, copy locales/en.json to a new file named after your language code, for example locales/fr.json.
  2. Translate the values (the text on the right). Keep the keys (the text on the left) and anything in {curly braces} unchanged.
  3. Zip the theme folder and upload it.
  4. Settings → General → Publication language → enter the same code (fr).

Custom CSS

Small style changes do not need a new theme upload. Settings → Code injection → Site header:

<style>
:root { --g1: #0ea5e9; --g2: #6366f1; --g3: #a855f7; --g4: #ec4899; }
.hero-shot .frame { transform: none; }
</style>

Development

For larger changes, work on the unzipped launch/ folder. You need Node.js 20 or later.

cd launch
npm install        # once
npm run dev        # rebuild CSS/JS on every change
npm run build      # one-off build
npm test           # check the theme with gscan
npm run zip        # dist/launch.zip, ready to upload

CSS lives in src/css (one file per area, joined by main.css); JavaScript in src/js. Built files go to assets/built. Templates are Handlebars files in the theme root and in partials/.

Questions

The homepage looks empty after I activated the theme.

The home sections use your posts, featured posts and tags. Publish a few posts, mark some as Featured and add tags. The browser window needs a featured post; the New pill and releases row need posts with a #v tag.

The membership page shows no prices.

Paid tiers only appear once Stripe is connected and the tiers are public (Settings → Membership → Tiers).

Sign-in emails do not arrive.

Check your email settings (self-hosted: Mailgun or SMTP in the config file). Ask readers to look in their spam folder.

How do I remove "Published with Ghost" from the footer?

Delete the link from partials/footer.hbs in the unzipped theme, zip the folder and upload it again.

Can I use the theme on more than one site?

A Regular licence covers one site (one end product). Buy one licence per site.

Are the demo images included?

No. Demo photos come from Pixabay and are only used on the demo site. The theme itself contains no stock photos.

Support

Support is included with your purchase and covers: answering questions about the theme's features, and fixing bugs. It does not cover custom changes or problems with third-party code.

Email support@codememory.com with your purchase code and your site address. See the changelog for what changed in each version and third-party materials for credits.