Introduction

The following documentation is your guide to the new theme. Since this is a Ghost theme documentation, it is assumed that you have a basic knowledge of the Ghost app.

If you’re just starting out with Ghost, it is best to see the guides in the official Ghost Help Center – check this out and you’ll have all the information that is available.

Uploading a theme

This is where the magic happens! You are able to upload, activate and delete a theme in the Ghost Admin of your publication.

Step-by-Step

1. To upload a theme, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
2. Then click the Upload theme button in the upper right corner.
3. Once uploaded, click Activate to activate the theme on your site.

Tip: After uploading the theme my settings in Design section were reset, what should I do?

The best solution is to always use the same name e.g. theme-name.zip – that way you will not have to enter your settings again after uploading a theme.

Ghost assigns the settings in the Design section to the name of the uploaded archive. If you upload theme-v1.zip and theme-v2.zip – Ghost will recognize them as two different themes – so the settings will reset.

Editing a theme

In many places in the following documentation you will encounter information about editing theme files. To edit files, you will need to unzip the theme archive – at this point you will have access to the necessary files indicated in the theme documentation.

Step-by-Step

1. To edit your theme files, download a copy of the theme. For this purpose go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
2. Use the Advanced dropdown menu in the upper right corner to download your theme, then unzip the theme locally.
3. Once the theme is unzipped, the files can be edited using an code editor – make the changes indicated in the theme documentation.

You can edit files using applications (code editor) such as Sublime Text, Visual Studio Code or Brackets. Using native text editors like TextEdit on macOS may add formatting may cause the theme to work incorrectly.

1. When you’ve finished making changes to the theme code, re-zip the theme directory for uploading back to Ghost.

To create a zip archive on a macOS, right-click on the theme folder to view the context menu. Then, click the Compress option. On Windows right-click on the theme folder, select Send to, and then select Compressed (zipped) folder.

1. To upload a theme, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
2. Then click the Upload theme button in the upper right corner.
3. Once uploaded, click Activate to activate the theme on your site.

Updating a theme

Updates to the theme ensure compatibility with the latest Ghost version, performance improvements and minor bug fixes. So it is important that you use the latest available theme version.

If your theme features custom code, updating it with the latest versions will overwrite all your customizations.

Step-by-Step

1. Download the latest version of the theme from Themeforest, then unzip the archive locally.
2. Choose a theme version that is compatible with your Ghost version.
3. To upload a theme, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
4. Then click the Upload theme button in the upper right corner.
5. Once uploaded, click Activate to activate the theme on your site.

Tip: What if you’ve already edited the theme, and want to update it without losing your changes?

That’s a bit trickier to deal with but not impossible, as long as you can remember what the changes were, or more specifically which files you edited. Unfortunately in Ghost when updating a theme you have to re-enter your changes.

For more advanced users, it can be helpful to use a comparing files app like Sublime Merge – that way you can find your changes if you don’t remember them.

Tip: After uploading the theme my settings in Design section were reset, what should I do?

The best solution is to always use the same name e.g. theme-name.zip – that way you will not have to enter your settings again after uploading a theme.

Ghost assigns the settings in the Design section to the name of the uploaded archive. If you upload theme-v1.zip and theme-v2.zip – Ghost will recognize them as two different themes – so the settings will reset.

Uploading a logo

A publication logo is the primary logo for your brand and is displayed across your theme.

Step-by-Step

1. To upload a logo, go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Brand – expand this settings list and go to the Publication logo position.
3. Click Upload logo to upload your logo.
4. Finally, click Save to activate.

Tip: How to change logo size?

1. To change logo size go to the Code injection settings in the Ghost Admin and paste this code to the Site header:

<style>
.header-logo img {
   max-height: 45px;
}
</style>

1. Change the current value to the expected value.
2. Finally, click Save to activate.

Uploading a cover image

A publication cover is an optional large background image that can be used with your publication.

In this theme, Publication cover is used only as a background image for the subscription forms that display at the bottom of the homepage and posts.

Step-by-Step

1. To upload a publication cover, go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Brand – expand this settings list and go to the Publication cover position.
3. Click Upload cover to upload your image.
4. Finally, click Save to activate.

Adding navigation

Adding a navigation menu to your publication can be implemented and edited quickly under the 'Navigation' settings menu.

Step-by-Step

1. To add a navigation, go to the Navigation settings in the Ghost Admin.
2. Once here, you can remove any navigation items that you want by using the trash icon to the right of the item. You can add new items by just typing them in. You can change the order by clicking on the icon on the left and dragging it to the spot you want.
3. Once your items are added, click Save to activate new navigation on your site.

Tip: Adding secondary navigation in the footer

There are two types of navigation, primary and secondary. Primary navigation is used in the theme header, secondary in the footer. By default, navigation in the footer is a copy of navigation in the header. Please read the section on Footer navigation for more information.

Formspree

Formspree is a service that hosts forms so that you can gather content from your visitors. Get email notifications of every submission.

Step 1: Add your Formspree endpoint

1. Go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Site-wide – expand this settings list and go to the Contact form endpoint position.
3. Paste your Formspree endpoint, e.g. https://formspree.io/f/xhyplkej
4. Finally, click Save to activate.

Step 2: Add a contact page

1. Create a new page, add a Page title, and open the Page settings panel using the icon in the top right of the screen.
2. At the bottom of the panel you’ll see a dropdown menu titled Template.
3. Use the dropdown to select the Contact template, close the panel.
4. Click Publish.

Tip: Adding page to the navigation

If you want this page to appear in the main navigation of your site, just add it to the Navigation list in your site settings.

Getform

Getform is a form backend platform that lets you handle your forms on your websites. You can set up a form and start collecting submissions to your form within minutes.

Step 1: Add your Getform endpoint

1. Go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Site-wide – expand this settings list and go to the Contact form endpoint position.
3. Paste your Getform endpoint, e.g. https://getform.io/f/3fc0b738-4221-415e-8288-zf62f84aff50
4. Finally, click Save to activate.

Step 2: Add a contact page

1. Create a new page, add a Page title, and open the Page settings panel using the icon in the top right of the screen.
2. At the bottom of the panel you’ll see a dropdown menu titled Template.
3. Use the dropdown to select the Contact template, close the panel.
4. Click Publish.

Tip: Adding page to the navigation

If you want this page to appear in the main navigation of your site, just add it to the Navigation list in your site settings.

Disqus

Disqus is a commenting platform that lets you communicate directly with your readers. The theme integrates with Disqus so you can collect user’s feedback on your articles.

Step-by-Step

1. Go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Post – expand this settings list and go to the Disqus shortname position.
3. Paste your Disqus shortname, e.g. copy only your-site from your-site.disqus.com
4. Finally, click Save to activate.

Members feature

The Members feature allows you to turn any site into a membership business with member signup, paid subscriptions and email newsletters.

The members feature is enabled by default. However, you need to create the following pages to avoid the 404 error.

Step-by-Step

1. Create sign-in and sign-up pages
2. Create an account page

Tip: What to do in case of an 400 error with message e.g. 'Missing template members/signin.hbs for route /signin/'

The error indicates that there was previously used a routes.yaml file with another theme that required it. To solve the problem, reset the routes.yaml file to its default settings.

routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Comments

The native comments feature in Ghost allows you to invite members to join the discussion and participate in a community directly on your website.

Step-by-Step

1. To enable native comments, go to the Membership settings in the Ghost Admin.
2. Change the Commenting level to All members or Paid-members only.
3. Finally, click Save to activate.

Slider

Select which posts or pages you want to appear at the top of your site in the slider section.

Step-by-Step

1. Open the post you would like to add to the slider.
2. Then, go to the Post/Page settings panel using the icon in the top right of the screen.
3. At the bottom of the panel, you’ll see a checkbox titled Feature this post/page.
4. Click on the checkbox, close the panel.

If you have published both, featured posts and pages – pages will always be displayed before posts.

Tip: Changing the limit of displayed posts/pages

1. You’ll need to open the theme’s ../partials/slider.hbs file in your code editor.
2. Change the value of the limit parameter (by default, the slider is set to 10 posts and 5 pages) to the expected value.
3. Save your slider.hbs file in ../partials/ folder.

Tip: How to remove featured posts from the main collection?

1. Go to the Labs settings in the Ghost Admin and scroll down until you see the Routes section.
2. Upload the routes.yaml file with these settings:

routes:

collections:
  /:
    permalink: /{slug}/
    filter: featured:false
    template: index
  /featured/:
    permalink: /featured/{slug}/
    filter: featured:true
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

The most important thing to know when working with .yaml is that it uses indentation to denote structure. That means the only type of nesting which works is 2 spaces. The most common reason for .yaml files not working is when you accidentally use the wrong type or quantity of spacing for indentation.

Dark version

The dark version introduces a new look for your site.

Step-by-Step

1. Go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Site-wide – expand this settings list and go to the Color scheme position.
3. Use the dropdown menu to select the Dark option.
4. Finally, click Save to activate.

Tip: Dark version depending on operating system preferences

Modern operating systems (Windows, macOS, iOS, etc.) allow users to choose their preference for light or dark system themes. The below feature is used to detect if the user has requested the system to use a light or dark color theme.

1. To activate an auto dark version based on user operating system preferences, go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Site-wide – expand this settings list and go to the Color scheme position.
3. Use the dropdown menu to select the Auto option.
4. Finally, click Save to activate.

Social accounts

Enter your Facebook and Twitter account details in the 'General' settings of the Ghost Admin to enable links to your social profiles.

Step-by-Step

1. To add Facebook and Twitter account to your publication, go to the General settings in the Ghost Admin.
2. Then scroll down and at the bottom, you’ll see the option Social accounts.
3. Once adding social accounts, click Save to activate.

Tip: Adding other social accounts to the footer

1. Open ../partials/footer_icons.hbs file in your code editor.
2. Then, uncomment the block – remove the lines which contains {{!-- and --}} for the chosen profile icon.
3. Now replace the # for each href value with your own profile links.
4. Save your footer_icons.hbs file in ../partials/ folder.

Search function

By default, the theme uses a native search option. You can also use the search function specially designed for this theme — to do this, you must set the Content API key.

Step 1: Generating Content API key

1. To generate Content API key, go to the Integrations settings in the Ghost Admin.
2. Click Add custom integration, then give the new integration a name, like 'Search', and click the Create button.
3. Copy your Content API key and click Save.

Step 2: Activate the search function

1. Go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Site-wide – expand this settings list and go to the Content API key for search position.
3. Paste your Content API key.
4. Finally, click Save to activate.

Tags page

To present all tags from your publication in an elegant way, you can add a custom tags page.

Step-by-Step

1. Create a new page, add a Page title, and open the Page settings panel using the icon in the top right of the screen.
2. At the bottom of the panel you’ll see a dropdown menu titled Template.
3. Use the dropdown menu to select the Tags template, close the panel.
4. Finally, click Publish.

Tip: Adding page to the navigation

If you want this page to appear in the main navigation of your site, just add it to the Navigation list in your site settings.

Contact page

If you wish to have a direct way in which your readers can contact you, you can add a contact page based on Formspree or Getform.

Step-by-Step

1. Configure the Formspree or Getform service.
2. Create a new page, add a Page title, and open the Page settings panel using the icon in the top right of the screen.
3. At the bottom of the panel you’ll see a dropdown menu titled Template.
4. Use the dropdown menu to select the Contact template, close the panel.
5. Finally, click Publish.

Tip: Adding page to the navigation

If you want this page to appear in the main navigation of your site, just add it to the Navigation list in your site settings.

Responsive tables

The responsive table will display a horizontal scroll bar if the screen is too small to display the full content. The following description applies to the table added using the markdown card.

By default, the table adapts to the window width. If you have a table that is too wide, you can add a container <div class="responsive-table"> element with around the table, and it will display a horizontal scroll bar when needed.

Step-by-Step

1. To add a responsive table, use the Markdown card.
2. Add a container <div class="responsive-table"> element with around the table (in markdown there always needs to be a blank line between any HTML and markdown).

<div class="responsive-table">

| # | Heading | Heading | Heading | Heading | Heading |
|:--|:--------|:--------|:--------|:--------|:--------|
| 1 | Cell    | Cell    | Cell    | Cell    | Cell    |
| 2 | Cell    | Cell    | Cell    | Cell    | Cell    |
| 3 | Cell    | Cell    | Cell    | Cell    | Cell    |

</div>

Tip: What it takes to generate a table?

To generate a table, you can use the tool Markdown Tables Generator

Create members pages

The members feature allows you to turn any site into a membership business with member signup, paid subscriptions and email newsletters.

The members feature is enabled by default. However, you need to create the following pages to avoid the 404 error.

Step-by-Step

1. Create sign-in and sign-up pages
2. Create an account page

Tip: What to do in case of an 400 error with message e.g. 'Missing template members/signin.hbs for route /signin/'

The error indicates that there was previously used a routes.yaml file with another theme that required it. To solve the problem, reset the routes.yaml file to its default settings.

routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Disable members feature

If you don’t want to use the members feature in Ghost and don’t want to ask visitors to subscribe newsletter, sign up or sign in, you can quickly disable this feature from the settings in Ghost Admin.

Step-by-Step

1. To disable members feature, go to the Membership settings in the Ghost Admin.
2. Change the Subscription access level to Nobody.

This will disable Portal and prevent any visitors from being able to subscribe or sign in to your site. It will also remove the subscription and sign-up or sign-in elements from the theme.

1. Click Save to activate.

Login panel

The login panel is a navigation component that shows 'Sign in / Sign up' buttons when a member is logged out, and 'Account / Sign out' buttons when a member is logged in.

Tip: Replacing 'Sign up' with 'Membership'

1. You can easily replace the 'Sign up' page with 'Membership', for this purpose open ../partials/members/login_panel.hbs file in your code editor and find:

<a class="members-signup" href="{{@site.url}}/signup/">{{t "Sign up"}}</a>

1. Then, replace with:

<a class="members-signup" href="{{@site.url}}/membership/">Membership</a>

1. Save your login_panel.hbs file in ../partials/members/ folder.

Tip: How to remove the login panel?

1. You’ll need to open the theme’s ../partials/menu.hbs file in your code editor.
2. You need to remove {{>members/login_panel}} partial reference.
3. Save your menu.hbs file in ../partials/ folder.

Sign-in and sign-up pages

The sign-in and sign-up pages are allowing your visitors to sign up to your site in order to access members only content.

Step-by-Step

1. Create a new page, add a Page title, and open the Page settings panel using the icon in the top right of the screen.
2. At the bottom of the panel you’ll see a dropdown menu titled Template.
3. Use the dropdown menu to select the Sign In template. Then create another page with the Sign Up template.
4. Finally, click Publish.

1. The Page URL should be /signin/ and /signup/

Account page

The account page shows your members the type of account they’re having and gives them some subscription specific data.

Step-by-Step

1. Create a new page called Account and open the Page settings panel using the icon in the top right of the screen.
2. At the bottom of the panel you’ll see a dropdown menu titled Template.
3. Use the dropdown menu to select the Account template, close the panel.
4. Finally, click Publish.

1. The Page URL should be /account/

Membership page

The membership page is helping your visitors to quickly visualize and compare the different pricing plans you offer.

Step-by-Step

1. Create a new page, add a Page title, and open the Page settings panel using the icon in the top right of the screen.
2. At the bottom of the panel you’ll see a dropdown menu titled Template.
3. Use the dropdown menu to select the Membership template, close the panel.
4. Finally, click Publish.

Tip: How to add premium tier?

1. Go to the Membership settings in the Ghost Admin.
2. At the bottom you’ll see the option Membership tiers.
3. If you have Stripe connected expand Premium position and click +Add tier – add your own tier name, description, monthly and yearly prices and list of benefits.
4. Click Add tier to activate.
5. Making tiers available to visitors – from the Portal settings, you can control which tiers appear on your site.

Tip: How to add description and list of benefits to free tier?

1. Go to the Membership settings in the Ghost Admin.
2. At the bottom you’ll see the option Membership tiers.
3. Expand Free position and add your tier description and list of benefits.
4. Finally, click Save to activate.

Tip: Adding page to the navigation

If you want this page to appear in the main navigation of your site, just add it to the Navigation list in your site settings.

Subscribe page

The subscribe page is allowing your visitors to sign up to your site in order to access members only content and/or receive the premium newsletter. It depend on you how you’re going to use this page.

Step-by-Step

1. Create a new page, add a Page title, and open the Page settings panel using the icon in the top right of the screen.
2. At the bottom of the panel you’ll see a dropdown menu titled Template.
3. Use the dropdown menu to select the Subscribe template, close the panel.
4. Finally, click Publish.

Tip: Adding page to the navigation

If you want this page to appear in the main navigation of your site, just add it to the Navigation list in your site settings.

Subscription form

The subscription form is placed at the bottom of the homepage and posts.

Tip: How to remove the subscription form?

1. You’ll need to open the theme’s default.hbs file in your code editor.
2. You need to remove {{>members/subscribe_form}} partial reference.
3. Save your default.hbs file in root folder.

Accent color

Primary color used in your publication.

Step-by-Step

1. To change the accent color in your publication, go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Brand – expand this settings list and go to the Accent color position.
3. Choose your color.
4. Finally, click Save to activate.

Footer navigation

There are two types of navigation, primary and secondary. Primary navigation is used in the theme header, secondary in the footer.

Step-by-Step

1. To add a secondary navigation, go to the Navigation settings in the Ghost Admin.
2. At the bottom of the page, you’ll see the Secondary navigation section.
3. Once your items are added, click Save to activate new navigation on your site.

Featured label

The label is displayed with the featured post. Can be customized using adequate internal tags. By default, the label displays all information: text 'The story of the month', publish date and icon.

Tip: How to use a small icon?

1. Go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Site-wide – expand this settings list and go to the Featured label position.
3. Use the dropdown menu to select the Label with small icon option.
4. Finally, click Save to activate.

Tip: How to hide the icon?

1. Use the dropdown menu to select the Label without icon option.
2. Finally, click Save to activate.

Tip: How to hide date?

1. Use the dropdown menu to select the Label without date option.
2. Finally, click Save to activate.

Tip: How to hide the 'of the month' text?

1. Use the dropdown menu to select the Label without 'of the month' text option.
2. Finally, click Save to activate.

Tip: How to hide date and 'of the month' text?

1. Use the dropdown menu to select the Label without date and 'of the month' text option.
2. Finally, click Save to activate.

Tip: How to hide all featured labels?

1. Use the dropdown menu to select the Hide label option.
2. Finally, click Save to activate.

Tip: How to hide the label for a specific post?

1. To hide the label for a specific post just add an internal tag #label-post-hide (tags which are prefixed by a # character, are internal tags within Ghost) in Post settings panel to the published post.
2. Click Update, to activate.

1. The tag slug should be hash-label-post-hide

Logo height

Follow below steps to change the size of the logo on your site by adding simple CSS code.

Step-by-Step

1. To change logo size go to the Code injection settings in the Ghost Admin.
2. Then, paste this code to the Site header:

<style>
.header-logo img {
   max-height: 45px;
}
</style>

1. Change the current value of to the expected value.
2. Finally, click Save to activate.

Full-width post in the loop

Posts with featured images are displayed alternately – left side, right side, left side and so on. But you are able to force a post with a featured image to display as full-width.

Step-by-Step

1. To force full-width post with a featured image, just add an internal tag #full-width (tags which are prefixed by a # character, are internal tags within Ghost) in Post settings panel to the published post.
2. Click Update, to activate.

1. The tag slug should be hash-full-width

Tip: How the layout of the posts works?

The odd posts if they have a featured image are placed on the left side, while the even posts take the right side. If the post doesn’t have a featured image – it will take full-width.

Posts per page

By default, the homepage, author’s and tag’s page display a maximum of 8 posts per page, but you are able to change this number.

Step-by-Step

1. You’ll need to open the theme’s package.json file in your code editor and find:

"config": {
    ...
    "posts_per_page": 8
    ...
}

1. Change the value of the 8 to the expected value.

Value must be an even number. Otherwise alternating layout of posts will not be kept.

1. Save your package.json file in root folder.

Theme translation

The theme is fully translatable by enabling a publication language in the settings of the Ghost Admin. Before that, you must prepare your language file.

Step-by-Step

1. Inside the ../locales/ folder, add target language files for each translatable language used on your site. For example es.json for Spanish and pl.json for Polish. A valid language code must be used.
2. Translate the sentences used in theme inside your new language files, for example, in en.json:

{
    "Back": "Back",
    "Newer Posts": "Newer Posts",
    "Older Posts": "Older Posts",
    ...
}

1. And edited to translate into Spanish for es.json:

{
    "Back": "Volver",
    "Newer Posts": "Artículos Siguientes",
    "Older Posts": "Artículos Anteriores",
    ...
}

1. Upload a theme with a new language file.
2. Go to the General settings in the Ghost Admin.
3. At the top of the page, you’ll see the Publication info section.
4. Enter the correct language code into your Publication language settings menu.
5. Finally, click Save to activate.

Tip: Reactivate the translation file

If you edited the active language, you have to restart Ghost to make the changes effective. Alternatively, enter another language code and click Save to activate, then switch back to your language code.