Features

Welcome to the Transmission theme for Ghost! This is what you need to know to get started.

The Transmission theme is tailored for sites with lots of content and long articles. The current features include:

dark mode toggle: the site defaults to the operating system preference but this can be over-ridden by the user. The user's preference is remembered so that it still applies when they next return to the site.
primary navigation menu with optional drop-down submenus. You can choose to show the items as an expanded list in the header or a minimised (hamburger) view.
optional table of contents for long articles, including a reading progress indicator - the TOC is accessible via a small icon when viewing the site on a mobile device and there is an option to use the mini-view on all device sizes if you prefer.
optional sidebar for secondary navigation including sharing icons (facebook, twitter, Bluesky, whatsapp etc). The sidebar can also be customised to include page and post links identified by an icon of your choosing.
Search
Tags and authors page (including support for multiple authors)
one-time payments ("buy me a coffee")
site and newsletter registrations
modern Inter, Roboto and Menelo font families are installed with the theme
infinite pagination (will display a button to Load More posts)
configurable layouts: home page, post layout, headers and footers are all configurable.

Installation

Use the download button on the right hand side to get the latest theme zip file. This can then be installed via the standard Ghost admin (Settings > Theme > Upload Theme)

Note if you are using Safari to download the theme zip file, the downloaded file will automatically be unzipped by default. To stop this behaviour you have to adjust Safari’s settings:

Open Safari on your Mac.
Go to Safari > Preferences in the top menu.
In the Preferences window, select the General tab.
Uncheck the box that says "Open safe files after downloading".

that's it! If you want to customise the navigation options, see the sections on Navigation below.

A two level drop down navigation can be created using the standard Ghost navigation feature (settings > navigation). When the navigation item name is preceded by a single dash it will show as a parent item and any item with two dashes immediately following it will show as a child item. For example, this is how the main menu on this site is configured:

... and this is how the menu looks when in 'expanded' mode

The sidebar is optional and you can pick where the it shows on the screen.

You can add items to the secondary navigation in two ways: using internal tags and/or using standard secondary navigation items.

A list of sharing links (twitter, facebook etc) is also included to allow users of your website to share links to your content.

The sidebar is configured to show under the hero header in the demo site and is organised like this: Internal tags | Sections (secondary navigation items) |share links

Note that the option to show the sidebar on the left or work only applies to larger screens. On smaller screens the sidebar moves to the top.

sidebar menu shown in the 'top' position

Sidebar - internal tags

If you would like to create entries in the sidebar with icons like those shown above, do the following:

Create a sidebar internal tag. These are identified by a prefix of ## (the two leading hashes in the tag name distinguish sidebar tags from any standard internal tags you may be using on your site).
You can number these sidebar items to control their sort order, e.g ##1... , ##2.. etc. The numeric part of the prefix determine the order the items are shown in the sidebar.
You can then upload a svg icon to represent the item on the sidebar. You can get a good range of svg icons from https://www.svgrepo.com. If you don't upload an svg then a default icon will be used.

Sidebar internal tag creation (see theTags menu option on the left hand side)

Finally you should apply the new tag on the post or page that you want to be linked to the sidebar item. Where multiple pages are tagged with a sidebar internal tag the most recently published page is used as the link for the sidebar item. Where no pages are tagged, the latest tagged post is used as the link. Sidebar internal tags that are not used on any posts or pages are not shown in the sidebar

Additionally, you can add secondary navigation items (Settings > Navigation > Secondary). These items will be shown as a separate section in the sidebar with a heading of 'Sections'. On this demo site this section is used to list the home page for each of the site authors:

Enrolment banners

Ghost allows end users to sign-up to receive regular newsletters or to sign-up for a subscription (for instance so they can get access to premium content). You can configure a banner to show either - or both - of these options.

Newsletters

Subscriptions

Newsletters and subscriptions

There is also an option called "Hide comments subscribe CTA", which hides the standard Ghost "subscribe" call-to-arms that shows automatically when you enable comments. This is primarily intended for un-monetised blogs where there are no subscription tiers, but you would still like people to sign-up so they can comment. For this type of site you can use this option together with the newsletter-only option.

This is how it looks on my blog:

Reporting problems

please raise an issue on github

For developers

You are welcome to adapt the theme to your own needs, or to contribute changes to the main project. See the github project for details:

Release utility

If you have copied the theme to make your own version, the release javascript utility can be used to create new github releases from the command line.

To do a quick release of all the latest changes pushed to github since the last release:

npm run bump-patch # bump the (patch/minor/major) version and commit changes.
git push origin main # push changes to github
npm run full-release # create a github release for the new version

npm run full-release does the following:

gscans the theme
creates a changelog based on github commits since the previous release
creates an updated dist/theme.zip file
creates a github release with a tag based on the version in package.json
uploads the theme.zip file to the new release

use npm run draft-full-release to create a draft release.

if you prefer, you can run each of these stages separately using the appropriate npm run scripts:

create-changelog
create-release
create-draft-release
upload-zipfile

use npm run to get a full list of all the npm; scripts defined in package.json

To use the release utility you first need to

create a subdirectory in your local theme repo directory called changelogs
Create a personal access token in your github account: > Developer settings> Personal Access Tokens > Tokens (classic). The token needs full 'repo' permissions
Assign the token to a local env variable called GITHUB_TOKEN.

The script will create releases in the repo identified in the packge.json file (repository.url).

Earlier versions of the theme

The latest release will always be available from the 'download' link on this demo site. If you need an earlier version see the releases section.

My personal website (see below) uses the version that is currently under development. Note that this is pre-release code and may contain untested features.

Future developments

Planned features here: