Themes and Blueprints

The site’s Theme page is a workbench for themes: the stock themes that ship with WordPuppi, and blueprints, which are editable copies you can keep, reuse, and share. This page explains the three columns, the three editing tabs, and which theme the build actually uses.

Stock themes and blueprints

A stock theme ships with WordPuppi. It is the same for everyone, it is read only, and it cannot be deleted. Open one to browse its templates, preview it with your real content, or use it as the site’s theme as it is. Each has a one line description, and they sit in the Account column under your own blueprints, grouped by what they are for: general, portfolio, consultant, and blog.

A blueprint is one editable copy of a theme, made from a stock theme or from another blueprint. It is a snapshot: it does not change when the theme it was copied from changes.

Blueprints appear in three columns.

Column	Who sees it	Notes
Account	every seat on the account that owns this site	shared, and where the stock themes are listed
Site	this site only	owned by the site
User	you, on every account you belong to	private

The grid and list button at the top of the User column switches every column between tiles and rows. The choice is remembered in your browser.

Hiding the stock themes

The eye button in the Account column header reads Hide stock themes, and then Show stock themes. Hiding them tidies the column when you mostly work with your own blueprints. The stock theme the site currently builds with always stays visible, and the stock themes are still there when you create a new theme. The choice is stored in your browser.

The tiles

Each tile is a small mock page painted with that theme’s own palette, read live from its static/style.css :root block. Both the light and the dark palette are rendered and toggled by CSS alone: your admin colour mode picks one, and hovering or focusing the tile flips to the other. A theme with no readable palette shows a neutral template glyph instead.

Two markers matter and they are independent:

A primary coloured ring means “this is the theme you are currently editing below”.
A star means “this is what the site builds with”. In list view the row also says Site theme.

Long names scroll on hover rather than being cut off. Tiles are ordinary buttons, so Enter and Space select them.

Right click a tile (or long press on touch) to open its menu. For a blueprint it holds:

Duplicate, a submenu that asks where the copy should land: Account, Site, or User. The copy is named after the original with “copy” appended.
Rename.
Set as site default, on Account and Site blueprints, or Clear site default on whichever blueprint currently holds the star.
Delete, after a separator, in the destructive style.

A stock tile has no Rename or Delete. Its menu is Duplicate (to get an editable copy) and Use as site theme, which reads Site theme ✓ and is disabled when the site already builds with it. Selecting a stock theme also shows a panel with its description and two buttons: Duplicate to Account and Use as site theme.

Column menus

The empty area of a column has its own right click menu with New Theme, with the scope already fixed to that column. New Theme is also a button in the Site column when it is empty, and in the User column header beside the grid and list button, where it lets you choose the scope.

Which one the build uses

The precedence is short:

the applied blueprint (the starred one, stored as account_theme_id on the site’s settings), whatever column it is in
the bundled theme named in the site’s settings

Using a stock theme with Use as site theme sets the bundled theme and clears any starred blueprint in the same step, otherwise the blueprint would keep winning. That is why the bundled theme dropdown in Settings, Generation pauses itself and explains which of the two is shadowing it.

Creating a theme

New Theme opens a dialog named New Theme, or for example New Site Theme when the scope is already fixed by the column you started from. It asks for:

Belongs to, shown only when the scope is still open (the User column button). Opening it from a column menu fixes the scope to that column.
Stock theme, the theme to copy. It defaults to the site’s current bundled theme, and its description is shown underneath. The name follows your choice until you type your own.
Name.

Press Create. The new theme is selected as soon as it exists, so you can start editing it immediately. To copy an existing blueprint instead of a stock theme, use Duplicate on its tile.

Editing a blueprint

The selected blueprint opens in a three tab workbench, beside a preview pane.

Fonts and Colors

A guided editor over the blueprint’s main stylesheet (static/style.css by convention, otherwise the first .css under static/). It reads the :root custom properties and surfaces every --color-* as a colour picker and every --font-* as a font select, with a live sample page rendering the current values.

Light and dark are edited separately, chosen with a segmented control, because the palette lives in two blocks: the light :root and the dark @media (prefers-color-scheme: dark) :root. Saving splices each block independently and byte preserves everything you did not touch. Seven curated font stacks are offered (system sans, system mono, serif, humanist sans, geometric sans, rounded, slab serif).

Your own fonts

A dashed panel lists the Custom fonts the blueprint already carries, and adds more in two ways:

Upload font… picks a .woff2, .woff, .ttf, or .otf file from your computer.
From media… opens Choose a font from Media, a picker over the site’s own media library. Fonts are media files now, so a font you uploaded on the Media page is available here without uploading it again.

Either way the font file is copied into the blueprint at static/fonts/, and an @font-face rule for it is added to the top of the stylesheet. The font then appears in every font select. Choose it and save. Fonts apply to both the light and the dark palette.

If the blueprint has no stylesheet under static/, the tab tells you so and points at Custom Files. A stock theme shows “Stock themes can’t be edited. Duplicate this one to change its colors and fonts.”

Standard Files

The files inherited from the theme the blueprint was copied from. A file tree grouped by directory on the left, an editor on the right. .html files open in the Tera editor; everything else opens in a plain monospace editor. Binary files are not editable here. Standard files cannot be deleted, and one you have changed is tagged edited. Opening the tab with no file chosen shows a Theme sample entry that renders a canned page through the blueprint.

Every .html file has a Design on the canvas button that opens it in the template designer. On a stock theme the button is disabled, with the hint to duplicate the theme first.

Custom Files

The files you added yourself, meaning anything the original theme never had. Same workbench, plus a New file button under “Your files”. Paths are relative to the theme root, for example templates/partials/hero.html. A page template made by Design page lands here.

Cmd S (or Ctrl S) saves the open file. Navigating away with unsaved edits, including selecting a different blueprint, opens a confirm dialog first.

The preview pane

The pane builds a preview on its own whenever you select a theme or save a file, and renders one real page from your saved files: the page this template makes, or the homepage if you have one, otherwise the newest published post, otherwise an honest placeholder telling you to publish something. Rebuild preview forces a build. Open in new tab (Open in browser in the desktop app) opens the same build with working navigation. If the file you are editing has unsaved changes, a toast says the preview shows your last saved version.

When the theme you are editing is not the one the site builds with, the pane notes that you are previewing it while the site still builds with the starred default. A build error is shown inside the pane instead of a stale page, and a page the selected theme cannot render says so, with the reason.

Page and Template Designer for laying out a template or a single page on a canvas
Sites and Settings for the bundled theme picker and the build controls
Publishing and Custom Domains for getting a rebuilt theme onto the web