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

Features

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

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:

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

that's it! If you want to use the built-in options to customise the look and feel of the theme, see the instructions below.

Customisation

Theme translations

The theme is translated into the following languages:

To change the language use the select General settings > Publication Language in the Ghost admin page.

Other languages are supported - including Ukrainian, Korean, Indonesian, Swedish + 40 or so others - however the translations are not currently 100% complete, so you may still see some English text.

Custom fonts

The default theme fonts (Inter and Poppins) are included as part of the theme. You can choose custom fonts if you prefer (these are delivered via a font delivery service - fonts.bunny.net).

custom fonts

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:

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:

  1. 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).
  2. 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.
  3. 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

Sidebar - secondary navigation items

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:

Site 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:

Dark mode

The dark mode option is enabled automatically. 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.

Table of contents

The TOC is optional. When enabled you can choose between an expanded version - which will show when there is room on the screen - or a minimised version. The minimised version shows in the bottom left off the screen and includes a reading progress indicator. The minified view is also used when using 'full mode' while looking at the site on a device with a small screen.

Recommendations

Ghost supports cross-promotion for publishers via a Recommendation feature. You can read about Ghost's recommendations feature here.

There are a couple of ways to use the feature with this theme.

To create a separate recommendations page, create a new page and assign the custom recommendations template (this will add your recommended webpages to your new page).

An example of this kind of page can be found by clicking the 'start' icon on the demo site sidebar.

Alternatively you can add a /#/portal/recommendations link to any post or page - this will open a pop-up window showing your links. You can try it by clicking the button below:

Tag and author list pages

you can create a list of all your site tags or authors by adding a new page and selecting the Tags or Authors template respectively.

Code highlighting

to start a block of code type three backticks ( ``` ) in the editor and press <tab>. Syntax highlighting is supported for C, C#, Java, Javascript, awk, python and Go + markup languages like JSON, XML, HTML and markdown. Here is a sample bit of json:

{
    "name": "transmission",
    "description": "transmission Ghost theme",
    "type": "module",
    "demo": "https://demo.transmissionthemes.com",
    "version": "2.8.0",
    "engines": {
        "ghost": ">=5.0.0"
    }
}

You an include code inline by surrounding the code single backticks (`).

If you want to show command line activity like this:

git clone https://github.com/nickabs/lightsail-utils.git
>Cloning into 'lightsail-utils'...
>remote: Enumerating objects: 164, done.
>remote: Counting objects: 100% (31/31), done.
>remote: Compressing objects: 100% (15/15), done.
>remote: Total 164 (delta 23), reused 20 (delta 16), pack-reused 133
>Receiving objects: 100% (164/164), 47.43 KiB | 747.00 KiB/s, done.
>Resolving deltas: 100% (101/101), done.
cd lightsail-utils

... add an html block and surround your commands with the html below. You can include the output from command by prefixing the output text with a '>'

<pre class="language-bash command-line"
     data-user="root"
     data-host="localhost"
      data-filter-output=">"> 
  <code>
    command 
    > output
  </code>
</pre>

Google Analytics

If you plan to use Google Analytics to monitor how many people use your web site and have not already set-up your Google Analytics property, follow these instructions to do so now.

You can use the custom option (below) to record your Google Analytics tag id and this will automatically add the standard google tag script to your web pages without the need for a separate code injection step.

The instructions on finding your google analytics tag id are here

For developers

If you want to modify the theme read here.

Reporting problems

please raise an issue on github

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.

The Small Workshop
shed building, hand tools, motorcycles and three wheeled vehicles.

Future developments

Planned features here:

TODO · Issue #21 · nickabs/transmission
Transmission theme To-Do list custom features dark mode toggle dropdown navigation menu sharing icons Tags and authors page Inter and Menelo font families Pagination home page and article collectio…