Getting Started

Introduction

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

Getting Started

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 & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right 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.
Activation

Dark version

The dark version introduces a fresh and distinctive appearance for your website, bringing a modern and stylish aesthetic that enhances the visual experience for your visitors.

Step-by-Step
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Color scheme' position.
  3. Use the dropdown menu to select your 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, select the 'Auto' option.
  2. Click 'Save' to activate.
Activation

Featured section

Step-by-Step
  1. Open the post you would like to add to the featured section.
  2. Then, go to the 'Post settings' panel using the icon in the top right of the screen.
  3. At the bottom of the panel, you'll find a switch labeled 'Feature this post.'
  4. Click the switch and close the panel.
  1. To change the color of featured post, go to the 'Tags' settings in the Ghost Admin.
  2. Click on the 'New tag' button and add an internal tag such as #color-ultramarine. Then, under the 'Color' option, set its color to #002cff.

The name of your tag must start with the word 'color' and it must be an internal tag, for example: #color-yellow, #color-green, etc."

If you want the text color to be white, add -white-text at the end of the slug in the 'Slug' field, like in the example hash-color-ultramarine-white-text. If you just use hash-color-ultramarine, the text color will be black.
  1. Click 'Save', then go to the featured post and add your color tag to it.
  2. Finally, click 'Update' to activate.

  1. To change the number of featured posts, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'Featured posts limit' position.
  3. Select how many featured posts you want to display (default is 5).
The most optimal number is the default value of 5. Displaying 10 posts also looks interesting, but remember that in the mobile view, only 4 posts will always be presented, regardless of the number of featured posts set. Overall, the guiding principle here is that the smaller the screen, the fewer posts are presented in the featured section.
  1. Finally, click 'Save' to activate.
  1. Go to the 'Labs' settings in the Ghost Admin, click on 'Beta features' tab and you will find 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}/

This would set an additional /featured/ URL address for all posts that has been marked as featured. This change is required to remove those posts from the main collection.

Activation

Spotlight section

The spotlight section appears automatically if the first post has a primary tag in the current pagination. Otherwise, the section is hidden, and the first two posts fill its place.

Tip: How to disable the spotlight section?
  1. To disable the spotlight section in the feed, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Spotlight section in feed' position.
  3. Use the toggle switch.
  4. Finally, click 'Save' to activate.
Activation

Social accounts

For: Facebook and X
  1. To add Facebook and X account to your publication, go to the 'Social accounts' settings in the Ghost Admin.
  2. Once adding social accounts, click 'Save' to activate.
For: Instagram, YouTube, LinkedIn, Snapchat, Pinterest, Tumblr, TikTok, Reddit, Weibo, Threads, Discord and Mastodon
  1. To add these social accounts to the navigation, go to the 'Navigation' settings in the Ghost Admin.
  2. Click on the 'Secondary' navigation.
  3. Add a service name into the name label, like Instagram, and then set the URL to your social profile.
  4. Drag the item to the end of the navigation list.
  5. Once your items are added, click 'OK' to activate.
  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.
Activation

Recommendations page

Recommend any publication that your audience will find valuable, and find out when others are recommending you.

Recommendations feature is currently in beta, which means there may be unexpected behaviors or errors. Please keep this in mind when using this feature.

Step-by-Step
  1. To enable the recommendations feature, go to the 'Recommendations' settings in the Ghost Admin.
  2. Click the 'Add recommendations' button.
  3. Follow the steps in the configurator.
Add a recommendations 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 menu to select the 'Recommendations' template, close the panel.
  4. Finally, click 'Publish'.
Activation

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'.
Activation

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'.
Activation

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 1: Add your Formspree or Getform endpoint
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Contact form endpoint' position.
  3. Paste your Formspree or Getform 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 menu to select the 'Contact' template, close the panel.
  4. Finally, click 'Publish'.
Tip: How to add custom text and a checkbox to agree to your terms of service on the contact page?
  1. 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 menu titled 'Code injection'.
  3. Click on the 'Code injection' section and paste your text into the 'Page footer' field, like this:
You have read and agreed to the <a href="https://your-site.com/privacy/">Privacy Policy</a>
  1. Finally, click 'Update' to activate.
Customization

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 & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab '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 {
   /* Desktop */
   --height-logo-header: 40px;
   --height-logo-footer: 40px;
   
   /* Mobile */
   --height-logo-mobile-header: 34px;
   --height-logo-mobile-footer: 34px;
}
</style>
  1. Change the current value to the expected value.
  2. Finally, click 'Save' to activate.
Tip: Uploading a 'secondary' logo for dark version
  1. To upload a secondary logo, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right, you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Color scheme' position – set the position to 'Dark' or 'Auto' to display the option with a 'Logo for dark version' below.
  3. Click 'Upload Image' to upload your logo.
  4. Finally, click 'Save' to activate.
Customization

Navigation

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 'OK' to activate new navigation on your site.
Tip: How to add a dropdown menu with 'dots' to the navigation in the header?
  1. Add a new item to the 'Primary' navigation.
  2. Add an item name, it can be, for example, 'dots', and then set the URL to ###
  3. Drag the item to the desired position. It is recommended to place it as the 4th item because a larger number of elements before the dots may not display properly on smaller screens.
  4. Once your item are added, click 'OK' to activate.

By default, all items in the 'Secondary' navigation will be displayed in a single column named 'Links'. To divide items into columns, follow the instructions below:

  1. Add a new item to the 'Secondary' navigation.
  2. Add an item name, which will serve as the column name, and then set the URL to ###
  3. Drag the item to the desired position. If you set an item in the first position, it will replace the default name 'Links'.
  4. Once your item are added, click 'OK' to activate.
Customization

About section

Add an 'about' text that will appear next to the featured section.

Step-by-Step
  1. To add the about text, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'About text' position.
  3. Enter your own about text.

If you want your text in bold, use the <b> ... </b> or <strong> ... </strong> tag, like this:

Your own <strong>about text</strong>
  1. Finally, click 'Save' to activate.
Tip: How to add background gradient/color to about section?
  1. To add your own background color or gradient, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'About background color' position.
  3. Choose your color or gradient:
  • Color it can be written as hex e.g.  #ffd5eb, rgb or rgba (if you don’t set a color, the body color will be used – if you want to use a light background color that varies between light and dark versions, you can enter the variable color: var(--color-two) in the color field).

  • The gradient color can be generated on this website. To the 'About background color' field, copy your gradient code like this one:
radial-gradient(circle, rgba(255,168,240,1) 30%, rgba(193,192,254,1) 100%)
  1. Finally, click 'Save' to activate.
Tip: How to add cover image to about section?
  1. To add the cover image, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'About cover' position.
  3. Click 'Upload image' to upload your image.
  4. Finally, click 'Save' to activate.
Tip: How to change the opacity of the cover image?
  1. To change the opacity, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'About cover opacity' position.
  3. Specify the cover's opacity – the lower the number, the greater the transparency – You can use percentage or numeric notation, e.g., 80% where 0% is full transparency or 0.8 to 0.
  4. Finally, click 'Save' to activate.
Tip: How to change the text color?
  1. To change the text color, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'About text color' position.
  3. Use the dropdown menu to select your option.
  4. Finally, click 'Save' to activate.
Customization

Publication cover

In this theme, 'Publication cover' is used to display a cover in the 'Join the Club' widget visible below the bottom of the page.

Step-by-Step
  1. To upload a publication cover, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab '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.
Customization

Accent color

Primary color used in your publication.

Step-by-Step
  1. To change the accent color in your publication, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Brand' – expand this settings list and go to the 'Accent color' position.
  3. Choose your color.
  4. Finally, click 'Save' to activate.
Customization

Fonts

You can easily select fonts from several prepared presets. The fonts are sourced from the Google Fonts library. Use the 'System fonts' option to exclusively utilize local fonts.

Step-by-Step
  1. To change fonts, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Fonts' position.
  3. Use the dropdown menu to select your option.
  4. Finally, click 'Save' to activate.
Customization

Hero title

Add and customize your own title on the homepage directly below the header on homepage.

Tip: How to add your own hero title?
  1. To add your own hero title, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'Hero title' position.
  3. Enter your own hero title.

If you want your text in bold, use the <b> ... </b> or <strong> ... </strong> tag, like this:

Your own <strong>hero text</strong>
  1. Finally, click 'Save' to activate.
Customization

Hide author

Decide whether you want to display the author in the feed and on the post page.

In the case where the author is hidden, they will be replaced by the date in the post feed. However, on the post page, the date is always visible.
Step-by-Step
  1. To hide the author, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Show author' position.
  3. Use the toggle switch.
  4. Finally, click 'Save' to activate.
Customization

Feed options

There are several specific settings for the post channel, such as image format or the visibility of certain sections.

Images orientation in the feed
  1. To change images orintation, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Feed images orintation' position.
  3. Use the dropdown menu to select your option.
  4. Finally, click 'Save' to activate.
Post excerpt in the feed

You can hide the excerpt for posts in the feed (but for posts without images, the description is always visible regardless of this setting).

  1. To hide the excerpt for posts in the feed, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Show excerpt in feed' position.
  3. Use the toggle switch.
  4. Finally, click 'Save' to activate.

Use if you don’t want to display the featured style post in the feed.

  1. To disable the style of featured posts in the feed, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Featured style in feed' position.
  3. Use the toggle switch.
  4. Finally, click 'Save' to activate.
Spotlight section in the feed

Use if you don’t want to display the spotlight section in the feed.

  1. To disable the spotlight section in the feed, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Spotlight section in feed' position.
  3. Use the toggle switch.
  4. Finally, click 'Save' to activate.
Customization

Post header layouts

The default post header layout features the title text on the left side and an image on the right. However, the theme includes a collection of post header layouts, allowing you to move the image to a new line and choose to center the text or select the image format.

Step-by-Step
  1. Open the 'Post' or '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 template, for example: 'Template (Row) Text 'Center' + Image' – this means that the text will be centered, and the image will be displayed on the right side.
  4. Close the panel and click 'Update'.
Tip: How to choose the default template?
  1. To change the default template, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Post' – expand this settings list and go to the 'Default template' position.
  3. Use the dropdown menu to select your option.
  4. Finally, click 'Save' to activate.
Customization

Footer copyright

Customize your own text in the footer by replacing the default value 'Published with Ghost and (...)'.

Step-by-Step
  1. To change footer copyright text, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Footer copyright' position.
  3. Enter your own copyright text.
  4. Finally, click 'Save' to activate.
Members

Custom pages

Step-by-Step
  1. First, configure your custom Signup & Signin and Membership pages.
  2. Then, go to the 'Design & branding' settings in the Ghost Admin.
  3. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Use portal' position.
  4. Set the toggle switch to the 'off' – at this point, you will see additional option: 'Join button url slug' – add your slug for 'Join' button, for example /signup/ (if the value is empty, Portal will be used).
  5. Finally, click 'Save' to activate.
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}/

Default settings for routes.yaml file

Members

Signup & Signin pages

The 'Signup' and 'Signin' 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. Provide the appropriate 'Page URL' as /signin/ for the 'Signin' page and /signup/ for the 'Signup' page.
  3. At the bottom of the panel, you’ll see a dropdown menu titled 'Template'.
  4. Use the dropdown menu to select the 'Signin' for the signin page and 'Signup' for the signup page.
  5. Finally, click 'Publish'.
Members

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 'Tiers' settings in the Ghost Admin.
  2. Click on the 'Connect with Stripe' and configure your Stripe account.
  3. If you have Stripe connected, click '+Add tier' – add your own tier name, description, monthly and yearly prices and list of benefits.
  4. Click 'Save & close'.
  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 'Tiers' settings in the Ghost Admin.
  2. Click 'Free' position and add your tier description and list of benefits.
  3. Finally, click 'Save & close' to activate.
Tip: How to add position to FAQ?

You can add FAQ items in your page content using the 'Toggle card' in the Ghost editor.

The page content on the 'Membership' page only serves to add FAQ items, it is not designed for other types of content.

Members

'Join the Club' widget

The 'Join the Club' widget appears automatically at the bottom of your site when you have added a free plan to your publication.

Step-by-Step
  1. Go to the 'Tiers' settings in the Ghost Admin.
  2. Click on the 'Free' option and configure your description and list of benefits.
  3. Finally, click 'Save & close' to activate.
Tip: How to add the background cover?
  1. To add a background cover, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab '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.
Members

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 'Access' settings in the Ghost Admin.
  2. Change the 'Commenting' level to 'All members' or 'Paid-members only'.
  3. Finally, click 'Save' to activate.
Advanced

Editing a theme

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 & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right corner.
  2. Use the 'Installed' tab 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 & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right 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.
Advanced

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, 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 & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right 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 & branding' 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.
Advanced

Theme translation

Translations are used both when you want to add a new language and when you want to edit current phrases used in the theme.

Editing current phrases used in the theme (Requires theme editing)
  1. You’ll need to open the theme’s ../locales/en.json file in your code editor.
  2. Change the sentences used in the theme following the pattern:
{
    "Old translate": "New translate",
    ...
}
  1. After making your changes, save your file, compress the theme into a zip format, and upload it to Ghost.
Translation to another language (Requires theme editing)
  1. Inside the ../locales/ folder, add target language file for example es.json for Spanish and pl.json for Polish (a valid language code must be used).
  2. Based on the translation from the en.json file, add translations for your language in your code editor. For example, for Spanish, use in the es.json file:
{
    "Back": "Volver",
    "Newer Posts": "Artículos Siguientes",
    "Older Posts": "Artículos Anteriores",
    ...
}
  1. After making your changes, save your file, compress the theme into a zip format, and upload it to Ghost.
  2. Then, go to the 'Publication Language' settings in the Ghost Admin.
  3. Enter the correct language code into the 'Site language' field.
  4. Finally, click 'Save' to activate.
Advanced

Posts per page

The number of posts provided will depend on the 'post per page' setting which you can configure in your package.json file.

Step-by-Step (Requires theme editing)
  1. You’ll need to open the theme’s package.json file in your code editor and find:
"config": {
    ...
    "posts_per_page": <value>
    ...
}
  1. Change the current value to the expected value.
  2. Save your package.json file in root folder.