Reel documentation

A dark, cinematic Ghost theme for video creators: every post is a watch page with a big stage, chapters, Up next, a lights-off mode, a mini player and a Continue watching row.

Thank you for choosing Reel. 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.

• Version1.0.0
• Ghost6.0.0 or later
• Live demoreel.ghostcms.templates.codememory.com
• AuthorCode Memory

Highlights

• Watch pages: the first video in a post moves up onto a full-width stage above the title, with a glow in the colours of its poster
• Chapters: a list whose items start with a time (0:00 Intro, 1:30 The shot) becomes buttons that jump the video to that second
• Up next rail beside every video, from the same playlist first; when a video ends, a countdown card plays the next one
• Lights off: a button (or the T key) dims the whole page around the video; Esc brings the lights back
• Mini player: a playing video follows the reader into a corner when they scroll down to read
• Continue watching: the homepage remembers which videos a reader started, with red progress bars on every thumbnail and a Resume button on the video (kept in the reader's browser, no account needed)
• Shorts: posts with the internal tag #short get a vertical stage and their own row on the homepage
• Playlists: every tag is a playlist with a numbered list and a Play all button; a Playlists page shows them all as stacked covers
• Duration chips on thumbnails from the video itself, or from an internal tag like #dur 12:47
• Now showing: the newest featured video fills the top of the homepage
• Locked videos show the poster with a lock and a signup button, so free visitors see what they are missing
• Dark by default, with a warm light mode and a reader toggle
• Short, Playlists and Creators templates
• Membership page with tiers and a monthly/yearly switch; styled paywall for members and paid videos
• Sign in, sign up and account pages
• Self-hosted fonts (Dela Gothic One, Albert Sans)
• Fully translatable, 16 theme settings, no jQuery

What is in the download

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

You only need reel.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 reel.zip from the reel_1.0.0_for_ghost_6.0.0_or_later folder. Do not upload the whole download.
4. Click Activate.

Updating

When a new version is released, download it from your ThemeForest Downloads page and upload the new reel.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. Videos: add a Video card anywhere in a post (upload the file or paste it). Reel moves the first video card onto the stage at the top of the post. Set a feature image too: it is the thumbnail on the homepage and the poster for locked videos.
7. Chapters: write a bulleted list where every item starts with a time, like 0:00 Intro, 1:30 The shot. It becomes a chapter list that jumps the video.
8. Shorts: for a vertical video, add the internal tag #short and choose the Short post template.
9. Playlists: create a page with the slug topics and the Playlists template; give each tag a description, an image and an accent colour.

Sample content

The download includes the demo's text as a Ghost import file: sample-content/reel-sample-content.json. It holds 28 posts, 8 pages, 8 tags and the demo writers, with the same templates and settings per post as the live demo. Use it to see how Reel 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 reel-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.

Logo, colours and fonts

Accent colour

Settings → Design & branding → Accent colour. Reel uses it for buttons, links, highlights and the reading-progress bar. Reel uses your accent colour (tomato red #FF4D2D by default) for buttons, the play buttons, progress bars on thumbnails, chapter times and the reading progress bar. Each tag's accent colour is used for the stacked tabs on its playlist cover.

Logo

Upload a logo in Design & branding → Brand. Without a logo, Reel 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

Reel ships its own fonts (Albert Sans, Dela Gothic One), 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.

Navigation

Settings → Navigation. Primary navigation appears in the header and the full-screen menu. Secondary navigation appears in the footer. Links from the demo:

Tag pages have the address /tag/<tag-slug>/, author pages /author/<author-slug>/.

Theme settings

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

The stage and chapters

Reel turns every post with a video into a watch page:

1. Add a Video card to the post. Any place works; Reel moves the first one onto the stage.
2. Set a feature image. It is the thumbnail on cards, the glow behind the stage and the poster when the video is locked.
3. Optional: add a bulleted list of chapters. Every item must start with a time: 0:00 Before the sun, 0:06 First light. The list becomes buttons; the current chapter lights up while the video plays.

A post without a video card shows its feature image on the stage, so text posts fit in too.

Continue watching, Resume and Up next

While a reader watches, Reel keeps their place in their own browser (no account, no cookies sent to you). The homepage then shows a Continue watching row with the time left, every thumbnail gets a progress bar, and the video shows a Resume from 0:08 button.

The Up next rail lists more videos from the post's primary tag first, then others. When a video ends, a card counts down and opens the next one; readers can cancel. Turn the rail off with Show up next.

Lights off and the mini player

Lights off dims everything except the video. Readers press the button beside the title or the T key; Esc turns the lights back on. Hide the button with Show theatre button.

The mini player appears when a video is playing and the reader scrolls down: the video moves to the bottom-right corner and keeps playing. It has a close button and is off on phones, where the screen is too small. Turn it off with Show mini player.

Shorts, durations and playlists

For vertical videos, add the internal tag #short (a tag whose name starts with #, which readers never see) and choose the Short template. The video gets a tall stage with the text beside it, and the homepage shows all shorts in their own row.

Duration chips come from the video file. For a locked video, or to show a different time, add an internal tag like #dur 12:47.

Every public tag is a playlist: its page shows a numbered list with thumbnails and a Play all button. The Playlists page template shows all tags as stacked covers with a video count.

Pages and templates

Reel 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.

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.

Membership, tiers and payments

Reel 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. Reel 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.

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 8 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 { --stage: #0b1020; }
.showing .glow { display: none; }
</style>

Development

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

cd reel
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/reel.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

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.