Theme guide

Everything on this page is done in Ghost admin. There is no code to edit and no build step: the zip you downloaded is the finished theme.

Start here

1. Upload the theme. Settings, then Site, then Theme, then Change theme, then Upload theme. Pick noir.zip and activate it once the upload finishes.
2. Import the demo content, if you want it. Settings, then Advanced, then Import/Export, then Universal import. Do this after activating Noir: Ghost only applies a theme’s settings to the theme that is currently active.
3. Replace the demo photographs before you launch. They are licensed for the demo, not for your site.

If you imported the demo you now have eighteen stories, four pages and a front page that already works. The rest of this page is how to make it yours.

The ten minute version

Everything else has a sensible default.

Colour, shape and type

Your brand colour (Settings, Site, Design & branding, Customize, Brand) is the accent: buttons, links inside a story, rules, the opening quotation mark. The theme holds it to whatever the surface behind it can carry, so you can pick the colour you actually use rather than one that happens to work on bone white.

Dark mode has its own accent, because a colour chosen for a pale page is usually too dark on a near-black one. Dark accent color starts at a muted gold. Clear the field and the theme lightens your own brand colour instead.

Color scheme decides what a first-time visitor sees. Auto follows their system. Light and Dark set a starting point the reader can change with the toggle in the header. The two "only" options lock the mode and hide the toggle.

Control shape sets the corner radius across the whole site: Pill for rounded buttons and tag pills, Square for zero radius on every control, the share sheet included. Photographs are never rounded either way.

Type. Noir ships no webfonts and makes no network calls: the type falls back through faces already installed on macOS, Windows and most Linux desktops. Pick a font under Typography in Settings, Site, Design & branding, Customize, Brand, and Ghost’s choice wins over the theme’s. Worth knowing before you do: Ghost serves those fonts from a third party, so choosing one adds an outside request to every page load. Leaving it on Theme default keeps the site self-contained.

Collections

A collection is a Ghost tag. Noir uses them everywhere: under a story’s title, on the wall, in the marquee, and as a filter.

• The first tag on a post is its primary tag, and that is the one shown under the title and on the tile. Order them in the post settings.
• A tag’s description appears under its name on the collection page.
• Tags starting with # are internal to Ghost and never show.
• Every collection page is the same wall as the Work page, filtered to one collection, with pills at the top to switch between them.

Two or three collections is the shape this theme was drawn for. It works with more, but the marquee and the pill row read best when the list is short.

The front page

The front page is built in this order. Each section reads from something you control, and clearing that thing removes the section, heading and all.

The hero

Mark stories as Featured in the post settings. The three newest take the hero and play as slides, with a progress bar each, that a reader can click, swipe or arrow through. One featured story renders as a still hero instead. A pause control sits in the bottom-right corner of the hero. Featured stories are left out of the wall below, so nothing appears twice. Mark at most three: a fourth featured story would appear nowhere on the front page.

Set Hero style to Split for one photograph beside the title, or Off to open straight into the wall. With the hero off, featured stories rejoin the wall.

Mark nothing as Featured and the newest story leads, so the page is never blank on a site you have not curated yet.

The wall

A story’s title lives inside its photograph and arrives when the pointer does. On a phone or tablet, where there is no pointer, the title sits under the frame instead, with the collection and date beneath it.

Every tile is cropped to a shape from a repeating cycle of seven, so no two neighbours share a frame. Grid style set to Uniform drops the cycle and crops everything to one shape. Grid columns sets how many columns you get on the widest screens.

The studio panel

Point Studio page at the slug of a page you have written about yourself. The panel takes that page’s feature image, title and excerpt, and links to it. The row of figures under it is counted from what the site actually holds: how many stories, and the year of your oldest one.

The enquiries panel

This one reads the page whose slug is exactly contact. Give that page a title and an excerpt and it appears. Delete the page and the section goes with it.

Stories

Pick a layout per post from Post settings, Template.

Use Editorial for studio notes, pricing explainers and advice pieces: anything where the words are the reason for the page. A story with no feature image falls back to the editorial opening on its own.

Both layouts end the same way: tags and a share control, more from the same collection, then the next story’s photograph at full width. Each of those can be switched off under Post in the theme settings.

Galleries

Use Ghost’s gallery card. Noir lays the images out by their real proportions, so nothing is stretched or cropped to fit: rows fill the width at one height, with at most three images per row on a desktop and two on smaller screens.

Clicking any photograph opens the lightbox, which pages through that gallery with arrows, the keyboard or a swipe. A single image card opens on its own, because stepping from it into an unrelated picture further down the page would be a surprise rather than a convenience. An image you wrapped in a link keeps its link instead.

Locking a story

Set access in Ghost’s own post settings: public, members, paid, or one tier. Noir shows a small lock above the title of any story the reader cannot open, on the wall and anywhere else a tile appears, and Ghost’s own subscription prompt handles the content itself.

Pages

Pick one per page from Page settings, Template.

The Default page keeps everything, cards included, in a column that starts where the title does. Pick Wide for a page that leads with photographs.

The Gallery page starts with twelve stories and adds twelve more each time Load More is pressed, without leaving the page. The button disappears when the last batch arrives, and anything you write in the editor appears above the wall. The Show More link under the front page’s grid finds this page by its template rather than its name, so you can call it Work, Portfolio or anything else and change its URL freely.

The Enquire page posts its form to whatever URL you put in the Contact form action setting: a Formspree endpoint, a serverless function, anything that accepts a POST. With no URL set the form is left out, because a form that silently goes nowhere is worse than no form. The rest of the page still renders.

Menus

Both menus are edited in Settings, Site, Navigation. The primary menu shows in the header on large screens and in the drawer below that. The secondary menu lives in the drawer and the footer.

Photographs

• Upload at around 2400px on the long edge. Ghost makes the smaller sizes and the theme serves WebP with a full set of candidates, so a phone never downloads a desktop photograph.
• Every story needs a feature image to appear on the wall or in the hero.
• Portrait and landscape both work. The wall crops to its own pattern; galleries inside a story never crop.
• The studio panel uses its page’s feature image, so give that page a good one.

Members and the newsletter

Standard Ghost, nothing theme-specific. Turn members on in Settings, Membership, Access, which is also where you choose who can comment on stories. The footer carries a signup band you can switch off with Show footer newsletter. Portal, tiers, comments and search are all Ghost’s own, and Noir styles them to match in both colour modes.

Every setting

They live in Settings, Site, Design & branding, Customize, on the Theme tab, under three groups.

Site wide

Homepage

Post

Ghost allows twenty settings per theme. Noir uses nineteen.

Another language

Every word the theme itself writes goes through Ghost’s translation helper. The file locales/en.json inside the theme lists all of them. Copy it to locales/fr.json, or whichever code you need, translate the values, and set Settings, General, Publication language to match.

Things that are deliberate

There is no author box. Noir was drawn for one photographer. A byline card under every story on a site with a single author is furniture.

Titles hide until you hover. A wall at rest should be a wall of photographs and nothing else. On touch screens, where hovering is not possible, the titles sit under the frames instead.

Movement is short, one-way, and never what makes something appear. Turn JavaScript off and the whole site still renders. A reader whose system asks for reduced motion gets a theme that does not move.

Nothing is fetched from anywhere. No webfonts, no CDN, no outside requests at all, unless you add them yourself.

Help

Email hello@xocothemes.com with your Ghost version, the theme version, and a link to the page in question.