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>
:root {
   --max-height-logo: 35px;
}
</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.

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 upload routes.yaml file avoid the 404 error.

Step-by-Step

1. Unzip the theme archive on your computer and locate the file called routes.yaml.
2. Go to the Labs settings in the Ghost Admin and scroll down until you see the Routes section.
3. Upload the routes.yaml from this theme.
4. Create an account page

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.

Pinned section

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

Step-by-Step

1. Open the post you would like to add to the pinned section.
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.

Order of pinned posts

To allow setting the order, posts and pages are sorted with the date of the update. The post last marked as featured will be set first in pinned section. If you have published both, featured posts and pages – pages will always be displayed before posts.

Possible layouts of pinned section

The theme supports pinned posts for up to eight posts and two pages and one 'hero' post at a time, all of which are responsively optimised and organised to look their best.

Tip: How to set pinned 'hero' post?

1. To set pinned 'hero' post, just add an internal tag #pinned-hero (tags which are prefixed by a # character, are internal tags within Ghost) in Post settings panel to the published post. You can only have one pinned 'hero' post.

This will also align the pinned section to the posts section.

1. The tag slug should be hash-pinned-hero

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:
  /signup/: members/signup
  /signin/: members/signin

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.

Color label

The color label, is an optional graphic element on the left side of your site in post view.

Step-by-Step

1. To activate the Color label of your site, 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 Color label on the left side position.
3. Use the switch to activate the 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.

Authors page

To present all authors from your publication in an elegant way, you can add a custom authors 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 Authors 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.

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 upload routes.yaml file avoid the 404 error.

Step-by-Step

1. Unzip the theme archive on your computer and locate the file called routes.yaml.
2. Go to the Labs settings in the Ghost Admin and scroll down until you see the Routes section.
3. Upload the routes.yaml from this theme.
4. Create an account page

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/header.hbs file in your code editor.
2. You need to remove {{>members/login_panel}} partial reference.
3. Save your header.hbs file in ../partials/ folder.

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: How to add your own color to pricing cards?

1. To add your own color, go to the Code injection settings in the Ghost Admin.
2. Then, paste this code to the Site header:

<style>
.free-tier {
   --color-bg-membership-card-free: #a7fb93;
}
.paid-tier-1 {
   --color-bg-membership-card-paid: #fed672;
}
.paid-tier-2 {
   --color-bg-membership-card-paid: #eebeff;
}
</style>

1. Change the value of the hexadecimal color to your own color.
2. 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.

Newsletter page

The newsletter 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 Newsletter 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.

Layouts

The theme has four possible layouts.

See also related section: Pinned section.

Step-by-Step

1. To change the layout of your site, go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Homepage – expand this settings list and go to the Layout position.
3. Use the dropdown menu to select one of the options: Big posts, Big posts & Grid, Grid & Big posts or Grid.
4. Finally, click Save to activate.

Layout 1 – this is the default option Big posts
Layout 2 – this is the option Big posts & Grid
Layout 3 – this is the option Grid & Big posts
Layout 4 – this is the option Grid

Tip: How to set two large posts in a grid layout?

Two posts take up half the space of space in the first row in grid layout.  This applies to the homepage, author and tag page when the option Big posts & Grid, Grid & Big posts or Grid is active.

1. To set two large posts, go to the Design settings in the Ghost Admin.
2. On the left you’ll see the option Homepage – expand this settings list and go to the Two large posts in a grid layout position.
3. Use the switch to activate the option.
4. Finally, click Save to activate.

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.

Tip: How to change the text color on elements with dark Accent color?

By default, the text color is dark on elements with Accent color. If your Accent color is dark, you can change text to white.

1. To activate a white text, 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 White text when accent color is dark position.
3. Use the switch to activate the option.
4. Finally, click Save to activate.

Colors of post-cards

We have added an easy way to add the color of post-cards. You can choose a color from the color palette.

Step-by-Step

1. To add the color, just add an adequate internal tag in Post settings panel to the published post.
2. For example, add an internal tag #color-amber (tags which are prefixed by a # character, are internal tags within Ghost).
3. Click Update, to activate.

1. The tag slug should be hash-colorname, for example hash-color-amber

Available light colors

Light colors means that the texts will be black.

Available dark colors

Dark colors means that the texts will be white.

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>
:root {
   --max-height-logo: 35px;
}
</style>

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

Post-cards size

We have added an easy way to change the post-cards size of the posts on your blog in home view.

Step-by-Step

1. To change the post-card size, just add an internal tag #large (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-large

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.
2. Save your package.json file in root folder.

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.

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.