How theme ZIPs are built

The theme you download from Fantasma is a normal Ghost theme ZIP. It is built from visual choices in the builder, but the generated package is made from familiar Ghost theme files: Handlebars templates, partials, assets, locale files, and package metadata.

If you want to inspect the ZIP before handoff or add custom CSS after download, this page walks through what is inside.

Templates and layouts

Ghost templates such as home, post, page, tag, author, and error become theme template files in the ZIP. These files decide which page context Ghost is rendering.

Layouts provide shared framing around those templates. A layout can hold site-wide pieces such as navigation and footer sections, so several templates can use the same structure without repeating it in every page file.

Sections and blocks

Fantasma writes major page regions as section partials:

partials/sections/navigation.hbs
partials/sections/posts.hbs
partials/sections/footer.hbs

Blocks are written as smaller reusable partials:

partials/blocks/heading.hbs
partials/blocks/paragraph.hbs
partials/blocks/button.hbs
partials/fragments/post-card.hbs

That split keeps the generated theme readable. A template calls sections, and sections call blocks. You do not need to edit these files for normal builder work, but the structure is there if a developer needs to inspect the assembly.

Ghost partial overrides

Some files sit directly under partials/ because Ghost expects them there. Fantasma includes these when the theme needs to control standard Ghost output:

  • partials/navigation.hbs renders Ghost navigation through the standard navigation helper.
  • partials/recommendations.hbs renders Ghost recommendations through the standard recommendations helper.

These are Ghost integration points, not custom Fantasma helpers. The theme stays inside Ghost-compatible Handlebars patterns.

CSS and assets

Fantasma uses Tailwind during theme generation, then ships compiled CSS in the theme ZIP. You do not need a Tailwind build step on your Ghost server.

The ZIP can also include supporting assets under assets/, such as theme CSS, JavaScript, images, and feature-specific files. With Bundle fonts in theme on, every family the pairing needs is written to assets/fonts/ with matching @font-face rules in assets/style.css, and the theme asks Google for nothing. A family whose font files name both a copyright holder and a licence also carries that licence as assets/fonts/<family>-LICENSE.txt. Every bundled family is listed in assets/fonts/ATTRIBUTION.txt with a link to its licence, which is the whole record for families the files say less about. Fantasma only includes some scripts and styles when the theme uses the feature they support, such as navigation behavior, dropdown menus, dark mode controls, lightbox, table of contents, page transitions, or featured video behavior.

Customization hooks

Fantasma adds stable fs-* classes to generated sections and blocks. Use these hooks when writing custom CSS in Ghost Code Injection or when making careful theme edits after download.

Section hooks follow this pattern:

.fs-section-navigation {}
.fs-section-posts {}
.fs-section-footer {}

Block hooks follow this pattern:

.fs-block-heading {}
.fs-block-paragraph {}
.fs-block-post-card {}

These classes are meant for customization. The deeper markup inside a block can still improve over time, but fs-section-* and fs-block-* are the stable layer to target.

Source-compatible classes

The theme also keeps useful gh-* classes where they help with Source-style customizations and Ghost ecosystem snippets. Examples include navigation, footer, post cards, content areas, recommendations, forms, sharing, and social links.

Use fs-* hooks when you are targeting Fantasma sections or blocks. Use gh-* hooks when you are adapting CSS written for Source-like Ghost themes.

Translation files

Fantasma includes a default locale file in the generated theme:

locales/en.json

This file contains translatable theme strings, including eligible text entered in the builder. For language setup and manual translation steps, see Translating your theme.

routes.yaml

When your project uses custom routes or collections, Fantasma can also generate routes.yaml. That file is separate from the theme ZIP in Ghost. Upload it under Ghost Labs when the builder tells you routes changed.

See Download and upload routes.yaml for the full upload steps.

Instructions for AI coding agents

The package root also carries AGENTS.md and a CLAUDE.md that imports it. These are the files AI coding agents such as Claude Code, Codex, and Cursor read before they touch a project. They explain that the theme is build output, that the next download or publish replaces every file, and where a change belongs instead: the project in Fantasma, Ghost Admin, or Code Injection using the fs-* hooks above. An agent asked to edit the theme warns the user first and, when the user still wants a code edit, keeps it as a diff to re-apply after the next build.

Both files are rewritten on every export, so keep your own notes in a separate file. Ghost 6.39 and newer drop both files when installing the theme, so there they live only in the ZIP you downloaded; older Ghost 6 releases keep them next to the theme files, where nothing reads them.

Related links