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.

This page is for technical users who want to understand what they are installing, inspect the ZIP before handoff, or add careful custom CSS after downloading.

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/blocks/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 how the theme is assembled.

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

Related links