Syllabus documentation

A calm, structured Ghost theme for online courses, with a lesson sidebar, chapters, progress tracking and quizzes.

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

Highlights

• Courses from tags: each public tag is a course, its posts are the lessons, oldest first
• Chapters from internal tags (#chapter Getting started): no plugin, no code
• Lesson page with a course outline sidebar, "Lesson 2 of 4", the chapter in the breadcrumb and an "On this page" list
• Mark as complete: readers tick off lessons and see a progress ring on every course, saved on their device with no account needed
• Continue learning: the homepage brings readers back to the last lesson they opened
• Quick checks: a list under a "Quick check" heading becomes a clickable quiz with a score and Try again
• Course page with a hero, facts (lessons, chapters, reading time), Start / Continue button, full curriculum and instructor card
• Locks on members-only and paid lessons for readers without access; members see them unlocked
• Homepage with a notebook-style syllabus card, course cards with progress, How it works steps, new lessons and instructors
• Courses and Instructors page templates
• Previous / next lesson links that stay inside the course, and an end-of-course link
• Mobile lesson bar with a slide-in course outline
• Membership page with tiers and a monthly/yearly switch; styled paywall for members and paid lessons
• Sign in, sign up and account pages
• Each course has its own colour (tag accent colour) for its cards, outline, progress and links
• Light, dark and system modes with a reader toggle
• Reading progress bar, image lightbox, galleries, tables and toggle cards
• Self-hosted, easy-to-read fonts (Lexend, Atkinson Hyperlegible Next)
• Fully translatable, 19 theme settings, no jQuery

What is in the download

themeforest-syllabus-ghost-theme/
├── documentation/                          ← you are here
└── syllabus_1.0.0_for_ghost_6.0.0_or_later/
    ├── syllabus.zip                          ← upload this file to Ghost
    └── syllabus/                             ← the same theme, unzipped, with source files

You only need syllabus.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 syllabus.zip from the syllabus_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 syllabus.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. Courses: in Tags, create one public tag per course with a description, a feature image and an accent colour. Give every lesson the course tag as its first tag.
7. Lesson order: lessons are listed by publish date, oldest first. To reorder, change the publish dates.

Logo, colours and fonts

Accent colour

Settings → Design & branding → Accent colour. Syllabus uses it for buttons, links, highlights and the reading-progress bar. Syllabus uses your accent colour (pine green #2E6B57 by default) for buttons, the logo and the signup box. Button text turns black or white automatically so any accent stays readable. Each course uses its tag's accent colour for its cards, outline, progress ring and links; pick strong, mid-dark colours, because white ticks sit on them.

Logo

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

Syllabus ships its own fonts (Atkinson Hyperlegible Next, Lexend), 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:

Building a course

1. Create a public tag for the course (for example Watercolour Foundations) with a description, image and accent colour. Its tag page becomes the course page.
2. Write each lesson as a post with the course tag first. Lessons appear in publish-date order, oldest first; Ghost's previous/next links follow the same order inside the course.
3. Chapters (optional): add an internal tag that starts with #chapter to each lesson, for example #chapter Getting started. Lessons next to each other with the same chapter tag are grouped, and chapters are numbered in order.
4. Set members-only or paid access on any lesson. Readers without access see a lock in the outline and the paywall on the lesson.
5. Create a page with the Courses template (slug courses) for the catalogue, and a page with the Instructors template (slug instructors).

Progress and Continue learning

Readers mark each lesson as complete with the button at the end of the lesson. The outline, the course page, the course cards and the lesson cards then show ticks and a progress ring, and the homepage shows a Continue learning card for the last lesson opened. The course page has a Reset progress link.

Progress is stored in each reader's browser (no account, nothing sent to a server), so it does not follow a reader to another device. Turn it off with Show progress; turn off the homepage card with Show continue.

Writing a quick check

Add a heading (H2 or H3) that starts with Quick check near the end of a lesson. Under it, write each question as a normal paragraph, followed by a bulleted list of answers. Make the one right answer bold (select it and press Ctrl/Cmd+B).

Syllabus turns every such list into buttons: readers pick an answer, see right or wrong, and get a score with a Try again button. Without JavaScript the bold answer simply shows as the answer key. The heading word comes from the translation file, so it follows your site language. Turn it off with Show quiz.

Homepage

1. Hero — headline and text (Hero title, Hero text), a search box, counts of courses, lessons and instructors, and a syllabus card for your largest course.
2. Continue learning — for returning readers (Show continue).
3. Courses — up to six course cards with progress (Show courses, Courses title).
4. How it works — three short steps (Show steps).
5. New lessons — the newest lessons with a More lessons button (New lessons title). Syllabus shows 9 per page.
6. Instructors — up to four staff users (Show instructors).

Pages and templates

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

Membership, tiers and payments

Syllabus 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. Syllabus 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>
.lesson-item.is-done .lesson-state { background: #f2b544; border-color: #f2b544; }
.sheet { transform: none; }
</style>

Development

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

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