Cobalt documentation
A split-screen magazine: on the left, a living panel shows the image and headline of the story you look at; on the right, the magazine scrolls.
Installation
- Download
cobalt.zipfrom your purchase email or your purchases library. Do not unzip it. - In Ghost Admin, open Settings → Design & branding → Change theme.
- Click Upload theme, select the zip, then Activate.
Cobalt requires Ghost 6 (self-hosted, or a Ghost(Pro) plan that allows custom themes).
Updating
Upload the new zip the same way and confirm the overwrite. Your content, navigation and theme settings are kept.
Import the demo content
The download includes cobalt-demo.zip: posts, pages, tags, navigation and images.
- Use a new or empty site: importing over existing content creates duplicates. On a fresh Ghost, first delete the default content in Settings → Advanced → Danger zone → Delete all content.
- Open Settings → Advanced → Import/Export and import the zip (not just the JSON, or the images will be missing).
- Theme settings are not part of an import: set them in Design & branding (see the table below).
The living panel
- From 1000 px wide, the panel on the left follows the story in view (scroll) or under the mouse. Back at the top, it shows the page’s opening content again.
- It stays still on smaller screens, touch screens, with reduced motion and without JavaScript; under 1000 px it becomes the opening screen of each page.
- On a post or page it shows the feature image and the title, so the image is not repeated in the column (only its caption is).
- Settings: Panel color (pick a colour dark enough for white text), Panel image veil, Panel logo (a white version works best), Panel tagline.
Homepage sections
| Section | Content comes from |
|---|---|
| Issue line | Issue label and today’s date. |
| Cover story | The latest Featured post, or the latest post. |
| Editor’s picks | Posts tagged #picks (4 at most), or the next posts. The third is shown as an essay without image: pick an opinion piece for it. |
| Most read | Posts tagged #trending (5 at most), or the latest posts. |
| Latest | The latest posts with Load more; stories already shown above are skipped. |
# (type #picks in the Tags field of a post). Readers never see them and they have no public page; the theme uses them to pick content.Appearance
Light, Dark or Auto for the magazine column. The full-screen menu numbers its items. Fonts: Archivo (wide), Newsreader and IBM Plex Mono; a heading font chosen in Ghost replaces Archivo and its stretched effect.
All settings
| Setting | Tab | Default | What it does |
|---|---|---|---|
| Color scheme | Site-wide | Light | Default color scheme of the magazine column. Readers can switch. |
| Panel color | Site-wide | #1746d2 | Color of the live panel, links and rules. Pick a dark enough color for white text. |
| Panel logo | Site-wide | — | Optional logo for the panel (a white version works best on the color) |
| Panel image veil | Site-wide | Medium | How much the panel color covers the photo of the story in view |
| Panel tagline | Site-wide | — | Sentence at the bottom of the panel (defaults to the site description) |
| Other social links | Site-wide | — | Extra social profile URLs, comma-separated (Pinterest, WhatsApp, GitHub...) |
| Show newsletter | Site-wide | On | Subscription block at the end of the magazine column, on every page |
| Newsletter heading | Site-wide | Stay curious. | Heading of the subscription block |
| Newsletter text | Site-wide | One email every Monday: the five stories worth your time, and one idea to argue about. | Text of the subscription block |
| Show issue line | Homepage | On | Thin line with a label and today's date at the top of the column |
| Issue label | Homepage | This week | Label at the start of the line (e.g. Issue 41) |
| Show cover | Homepage | On | Cover story: the latest Featured post (or the latest post) |
| Show picks | Homepage | On | Editor's picks: posts tagged #picks (or the next latest posts) |
| Picks title | Homepage | Editor's picks | Heading of the editor's picks |
| Show trending | Homepage | On | Numbered list on a dark band: posts tagged #trending (or the latest) |
| Trending title | Homepage | Most read this week | Heading of the numbered list |
| Show latest | Homepage | On | List of the latest posts with Load more |
| Table of contents | Post | On | Show a table of contents on posts with three or more headings |
Posts per page: 10 (set by the theme). Settings are in Settings → Design & branding → Customize, in the Site-wide, Homepage and Post tabs.
Navigation & social links
- Dropdowns: in Settings → Navigation, start a label with a dash (
-About) to put it in a dropdown under the item above. That parent item only opens the dropdown; its URL is not used. - Social accounts: X, Facebook, LinkedIn, Bluesky, Threads, Mastodon, TikTok, YouTube and Instagram come from Settings → General → Social accounts. Add any other profile in the Other social links setting (comma-separated URLs): Pinterest, WhatsApp, Telegram, Discord, GitHub, Dribbble, Behance, Spotify, Twitch, Snapchat, Reddit and Medium get their icon, any other URL gets a link icon.
- The RSS icon is added automatically.
Posts & pages
- Table of contents: added automatically to posts with three or more H2 headings (setting Table of contents).
- Full width page template: choose it in the page settings for landing pages.
- The page option Show title and feature image is respected.
- Every editor card is styled, including wide and full-width images, galleries, toggles, callouts, buttons and bookmarks.
Members & newsletter
The subscription block uses Ghost’s native members. It is hidden for signed-in members, and when sign-ups are off or invite-only (Settings → Membership).
Translation
Every text of the theme goes through Ghost’s translation system. Copy locales/en.json inside the theme to locales/fr.json (or your language code), translate the values, zip the theme again and upload it. Then set the language in Settings → General → Publication language.
FAQ
The panel does not move.
It only follows the stories from 1000 px wide, with a mouse or trackpad, when the reader has not asked to reduce motion.
A section of the homepage does not appear.
Check its switch in Design & branding, then its content: every section hides itself when it has nothing to show (no Featured post, no post with the internal tag, an empty tag…).
Can I change the fonts?
Yes: the fonts chosen in Design & branding → Typography replace the theme’s heading and body fonts.