Haven documentation

A warm Ghost theme for interiors and home-décor writers: arched photos, a moodboard homepage, before/after sliders, colour palettes from every photo and home tours with a project card.

Thank you for choosing Haven. 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 demohaven.ghostcms.templates.codememory.com
• AuthorCode Memory

Highlights

• Arches everywhere: an arched trio and a setting sun on the homepage, arch-topped card photos, a wide arched post photo (or switch to rounded or square in the theme settings)
• Moodboard homepage: posts in masonry columns that keep their places when more stories load
• Before/after slider: a two-photo gallery whose caption starts with "Before" becomes a slider you drag, swipe or move with the arrow keys
• Colour palette from every post photo: five colours picked automatically, each copies its code with one click
• Swatch lists: a list whose items start with a colour code (#D8C7B0 Oat — walls) becomes arched paint cards
• Project card from internal tags: #room, #budget, #time, #style, #where and #size
• Home tour post template: a tall arched window beside the title, the project card and a sticky list of rooms
• Home tours row on the homepage for posts with the internal tag #tour, with a badge on their cards
• Browse by room: round tag photos under the hero
• Rooms page of arched doorways and a Contributors page
• Styled product cards for "shop the look" and a drop cap on every post
• Light by default, with a warm walnut dark mode and a reader toggle
• Membership page with tiers and a monthly/yearly switch; styled paywall for members and paid posts
• Sign in, sign up and account pages
• Self-hosted fonts (Gloock, Nunito Sans)
• Fully translatable, 17 theme settings, no jQuery

What is in the download

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

You only need haven.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 haven.zip from the haven_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 haven.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. Homepage: mark three or more posts as Featured; the newest three fill the arches. Set Hero title in the theme settings.
7. Home tours: add the internal tag #tour and choose the Home tour post template. Use headings for each room; they become the list beside the text.
8. Project card: add internal tags such as #budget £1,900 and #time Six weekends.
9. Rooms page: create a page with the slug topics and the Rooms template; give each tag an image, a description and an accent colour.

Sample content

The download includes the demo's text as a Ghost import file: sample-content/haven-sample-content.json. It holds 30 posts, 8 pages, 9 tags and the demo writers, with the same templates and settings per post as the live demo. Use it to see how Haven 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 haven-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. Haven uses it for buttons, links, highlights and the reading-progress bar. Haven uses your accent colour (terracotta #B0583B by default) for buttons, the setting sun behind the homepage arches, the drop cap, links and the reading progress bar. Each tag's accent colour is used for its label on cards and its doorway on the Rooms page.

Logo

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

Haven ships its own fonts (Gloock, Nunito 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.

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:

Before and after sliders

Any gallery with exactly two photos becomes a before/after slider when its caption starts with the word Before:

1. Add a Gallery card and upload the before photo first, then the after photo.
2. Write a caption that starts with Before, for example Before and after: the same corner, six weekends apart.
3. Publish. Readers drag the handle (or swipe on a phone, or use the arrow keys) to compare. The slider nudges once when it first comes into view, so readers see that it moves.

Use two photos taken from the same spot for the best effect. The word is translatable in locales/, so a French site can start the caption with Avant.

Palettes and swatch lists

Every post with a feature image shows Colours in this room: five colours Haven picks from the photo in the reader's browser, with a lift for saturated colours so a terracotta cushion is not lost next to a large grey wall. Readers click a colour to copy its code. Turn it off with Show palette.

To show your own colours, write a bulleted list where every item starts with a colour code:

- #D8C7B0 Oat — the walls, two coats
- #EFE7DA Linen — the ceiling
- #B0583B Terracotta — cushions and a lamp

The list becomes arched paint cards with the name, the code and your note; each card copies its code.

The automatic palette needs the photo on your own site or on a server that allows cross-origin images. Photos inserted from Unsplash work.

The project card and home tours

Add any of these internal tags (tags whose name starts with #, which readers never see) and Haven shows them in a card under the post photo, with an icon each:

• #where Bristol, UK
• #size 96 m²
• #room Kitchen
• #budget £3,200
• #time Five weeks
• #style Painted Shaker

For a home tour, add #tour and choose the Home tour template. The photo becomes a tall arched window beside the title, the project card sits under the byline, and every heading in the post appears in a sticky Rooms in this tour list that marks the room you are reading. Tours also get a badge on their cards and a place in the Home tours row on the homepage.

Photo shapes and the moodboard

The Image shape setting changes every card photo, arch and post photo at once: Arch (the default), Rounded or Square.

The homepage moodboard places each card in the shortest column, so the page looks full at every width. Cards use three heights in turn for a relaxed rhythm, and cards loaded with Load more stories join the columns without moving the ones above. Change the section title with Moodboard title.

Pages and templates

Haven 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

Haven 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. Haven 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 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 { --sage: #8a7f6e; }
.sun { display: none; }
</style>

Development

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

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