Diorama Theme¶
Diorama is a dark, photo-first theme for sites whose pictures tell the story: photo blogs, galleries, makers and clubs. Photos fill the screen under a see-through header, the blog is a wall of photos with a full-screen viewer, and every post opens on its photo with the story in a reading column underneath. The shop, basket and checkout still work, on the same dark ground.
It is built on top of Nova (Diorama → Nova → Bootstrap template fallback), like Ridge and Spec, so every page works as soon as a site switches to it.
Site admins pick it under Admin → Shop Settings → Theme (Choosing a Theme); platform staff can also set it per site in System → Tenants → {site} → Theme (theme name Diorama).
Design principles¶
| Principle | What it means on the page |
|---|---|
| Photos first, the story underneath | A page that opens on a photo (a hero, a post's masthead) gets the full width and the top of the screen; the header floats over it. |
| A dark ground | Near-black (#0D0E10) so photos glow, with warm off-white type. Chrome is hairlines, not boxes or shadows. |
| One accent | The brand colour (flare #FF4D2E by default) marks the action: buttons, the current link, a quote's rule. Buttons carry dark text on it. |
| Big titles, small facts | Bricolage Grotesque for titles and the site name, Instrument Sans for reading, IBM Plex Mono for dates and counts. All three are self-hosted. |
What Diorama redesigns¶
| Area | Highlights |
|---|---|
| Header | One bar: the logo or name, the menu, search (when the site has it), Sign in and the basket (only on a site that sells, storefront-commerce-chrome-enabled), and the header button (Header Button settings). Over a photo it is see-through, and turns solid once the page scrolls. A menu item with children is a native <details> drop-down. Below 900px the menu, account and button move into a drawer (a <dialog>). The announcement, when set, sits above the bar. |
| Home page | A hero first in the page (a full-screen Centered slideshow hero suits it best) runs under the header to the top of the screen. Nova's hero presets take Diorama's type and accent buttons. |
| Blog | The blog list is the photo wall by default (see Content Management, blogListExtension); turn on the extension's Display Images?. The blog's masthead is a band of large type, or a photo if the blog has one. |
| Posts | The masthead photo fills most of the screen with the title, description and date at its foot. The story reads in a 720px column at 20px in a medium weight (light type on a dark ground looks thinner than the same type on white); its first paragraph is the lede, quotes get the accent rule, and pictures in a figure may run wider than the text on large screens. With sidebar content the post reads beside it, as on Ridge. |
| Latest and related posts | Photo cards (4:3 photo, mono date, title, the start of the description), as many columns as fit. Nova's log and timeline layouts still work through pageTemplateOverride. |
| Account | Nova's account area (band, tabs, overview tiles and cards, order rows) on the dark ground: the band and cards in the panel colour with hairline borders, the current tab marked with the accent, status pills in dark tints. Sign in, register and the password pages (fragment/auth-head) use Diorama's stylesheet: a dark card, an accent button and an outlined Sign out. |
| Basket and checkout | Nova's basket and checkout steps through the --nb-* tokens: dark panels with hairlines, mono prices, the accent pill as the checkout button. Nova's panels with a hard-coded white background, form fields, Bootstrap buttons (such as the 404 page's) and JSON-component buttons with no colour of their own are all brought onto the dark ground. |
| Site HTML blocks | Bootstrap's colours are re-pointed (body text, cards, alerts as dark tints, primary = the accent with dark text on it, coloured bands with legible text), bold text in a markdown post is ink rather than Bootstrap blue, and a text colour pasted into a product description or post gives way to the theme's. Links and headings are themed with element selectors, so a block that styles its own with a class keeps them. Colours a block sets for itself (a custom button class, an inline <style>) stay as written: check those when moving a site from a light theme. |
| Footer | The site name beside the site's footer content (or its social links), then the footer text and disclaimer (for a trademark or charity notice). |
Shop, product, search, basket, checkout and account pages keep Nova's templates inside Diorama's header
and footer. They read on the dark ground because Diorama turns Nova's grey scale round (gray-50 is the
darkest surface, gray-900 the strongest text), as Spec does.
Setting up a photo site¶
- Switch the theme to Diorama.
- A site that sells nothing: turn off Show Shopping Links in Header and Footer (
storefront-commerce-chrome-enabled) so the header has no Sign in or basket. - Home page: a
herowith the Centered preset,height: screenand two or more background images for a slideshow. - Blog: give each post a masthead image (
managePages setImages) with alt text in the media library, and turn on Display Images? on the blog'sblogListExtension. - Brand colour: set it in the Design Brief if the flare accent doesn't suit. Leave the brief's surface colour unset: Diorama already provides the dark ground.
Files¶
| Path | What |
|---|---|
templates/diorama/fragment/ |
head, nav (header and drawer), footer, diorama-icons, diorama-cards (the post card) |
templates/diorama/page.html, blog/ |
The content page, blog list and blog post layouts |
templates/diorama/extensions/ |
blogMasthead, blogList (the photo wall), blogLatestPosts, blogRelatedArticles, menuGeneratorExtension and collectionChooser menus |
settBuilder/themes/diorama/css/diorama.css |
Nova token re-points, then the chrome and content styles |
settBuilder/themes/diorama/js/diorama.js |
The drawer, the drop-downs, the header's scrolled state and height |
Registered by the system update 2026-10-22-add-diorama-theme.json and the initialisation data.