Almanac documentation

A personal Ghost theme for essays, notes and a digital garden: a writing heatmap, everything listed by year, growth stages, sidenotes in the margin and a Wander button.

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

Highlights

• Writing heatmap: the last twelve months as a calendar of squares, darker for essays than for notes, each square linking to that day's entry
• Everything, by year: the homepage, tags and authors list entries as dated rows with a heading for each year, even across Load more
• Growth stages from internal tags: #seedling, #budding and #evergreen show as small marks on rows and posts, with a legend
• Sidenotes: write ((like this)) and the text becomes a numbered note in the margin on wide screens, and a tap-to-open note on phones
• Planted and last tended dates: posts show when they were published and, if edited later, when they were last tended
• Notes stream: short posts with the internal tag #note get their own row style, a sidebar stream and a Note template
• Note post template: an index card with ruled lines and links to the older and newer note
• Wander: a dice button that opens a random post, in the header, after every post, in the footer and on the 404 page
• Today's almanac line under the site name: weekday, date, week and day of the year, in the reader's language
• Start here, garden beds and growth stages in the homepage side column
• Archive, Garden (tags with their newest entries) and People page templates
• A dot-grid paper look in light mode and a night-ink dark mode, with 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 (Crimson Pro, DM Mono)
• Fully translatable, 17 theme settings, no jQuery

What is in the download

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

You only need almanac.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 almanac.zip from the almanac_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 almanac.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. Archive: create a page with the slug archive and the Archive template. The Everything, by year button after each post links to it.
7. Notes: for a short post, add the internal tag #note and choose the Note template. Give all notes the same public tag (for example Notes) as their first tag so the older/newer links follow the notes.
8. Growth stages: add #seedling, #budding or #evergreen to any post.
9. Start here: mark your best posts as Featured; the first five appear in the homepage side column.

Sample content

The download includes the demo's text as a Ghost import file: sample-content/almanac-sample-content.json. It holds 48 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 Almanac 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 almanac-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. Almanac uses it for buttons, links, highlights and the reading-progress bar. Almanac uses your accent colour (moss green #2F6B4F by default) for the heatmap squares, year headings, links and buttons. Sidenote numbers use a rust colour set in CSS as --rust. Each tag's accent colour is the top border of its bed on the Garden page.

Logo

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

Almanac ships its own fonts (Crimson Pro, DM Mono), 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 writing heatmap and the year list

The homepage shows the last twelve months as a calendar: one square per day, one column per week. A day with an essay is darker than a day with a note; two entries on one day are darker still. Hover or focus a square to see the date and titles; click it to open the entry. The line above the calendar counts entries, essays and notes, and your longest run of weeks with at least one entry.

The heatmap reads your newest 100 posts. Turn it off with Show heatmap, or rename it with Heatmap title.

Every list of posts groups entries under a heading for each year. On the homepage and the Archive page the heading also shows how many entries that year has.

Sidenotes

Write an aside inside double brackets in any paragraph or list item:

In the morning I do it first. ((Urgent and important are different words for a reason.))

Almanac replaces it with a small number. On screens wider than 1180 pixels, the note sits in the right margin beside its line, the way old books printed them. On smaller screens, readers tap the number to open the note under the line. Numbers run through the whole post.

Turn sidenotes off with Show sidenotes: the text then appears in ordinary brackets.

Growth stages and tended dates

Mark how finished a post is with one internal tag (a tag whose name starts with #, which readers never see):

• #seedling: a first rough idea
• #budding: taking shape, still growing
• #evergreen: finished, and still true

The stage shows as a small mark on list rows, in the post meta line, on the Garden page and in the legend on the homepage. The words are translatable in locales/.

Each post says when it was planted (published). When you edit a post at least two days after publishing it, Almanac also shows last tended with the edit date. Turn that off with Show tended date.

Notes, Wander and the dateline

Posts with the internal tag #note are short entries. They get a lighter italic row in lists, their own stream in the homepage side column (Show notes, Notes title), and the Note post template: an index card with ruled lines and links to the older and newer note.

The Wander button (a small die) opens a random post from your site's sitemap. It never opens the page you are already on.

Under the site name, the dateline shows today's weekday, date, week of the year and day of the year, in the language of your site. Turn it off with Show date line.

Pages and templates

Almanac 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

Almanac 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. Almanac 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 15 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 { --rust: #7a4e7e; }
body { background-image: none; }
</style>

Development

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

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