📰Site-wide Settings

These settings are configurable and are provided by the theme. Any change in these settings will affect the look of the website.

Typography:

The Google Font to use across the website. This theme comes with a default selection of 5 Google fonts:

1. Inter

2. Cabin

3. Lora

4. Manrope

5. Inconsolata

You need to edit the theme code if you want to use a different Google font.

Open theme code in your favourite editor and look for 'package.json' in the root folder. Add the additional font options you would like to add in the 'Typography' dropdown.

For example, if you would like to add the 'Poppins' font, your edited code would look like this.

Please note that we added an additional option for the Poppins font on line number 9 in the below code snippet.

"typography": {
  "type": "select",
  "options": [
    "Inter",
    "Cabin",
    "Lora",
    "Manrope",
    "Inconsolata",
    "Poppins"
  ],
  "default": "Inter"
}

The above change will add the option for 'Poppins' font in the Admin settings, but it will not work yet.

We need to include the font-specific files from Google fonts in 'default.hbs'

Open default.hbs file and duplicate the highlighted code in the above image. Get the font details like URL and font-family for 'Poppins' font from Google Fonts website and replace them in the duplicated code. Please see the code below for 'Poppins' font.

{{!-- Poppins --}}
{{#match @custom.typography "Poppins"}}
    <link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,600;0,800;1,100;1,300;1,400;1,600;1,800&display=swap" 
        as="style" onload="this.onload=null;this.rel='stylesheet'" crossorigin>
    <noscript>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,600;0,800;1,100;1,300;1,400;1,600;1,800&display=swap" rel="stylesheet">
    </noscript>
    <style>
    body {
        --font-sans: 'Poppins';
    }
    </style>
{{/match}}

Show all topics in header dropdown:

This setting will control the 'All Topics' option under 'Topics' in the navigation menu. It will add the 'All Topics' menu item in the dropdown if enabled.

The 'Topics' menu will be automatically generated based on your tags. The icon will be the tag's feature image. If no feature image is present, then the icon would be changed to a circle with the tag's accent color. By default, it pulls the top 10 tags based on the count of posts.

To control the number of tags shown under 'Topics' menu, you need to edit the theme code. Open the theme code in your favorite editor and look for 'header.hbs' file in 'partials' folder.

We are using the get helper to get all tags. Change the 'limit' parameter from 10 to the number of tags you would like to show in 'Topics' menu.

All topics thumbnail:

This is the image thumbnail displayed on the left side of 'All Topics' link.

Show primary navigation in footer:

If enabled, this will show the Primary navigation links in Footer. Primary navigation is the main navigation that you can set from Ghost admin settings

Open Settings > Navigation

Primary navigation menu links will be displayed at the top of your website. The first two links for 'Home' and 'Topics' will be added automatically by the theme. So you need not have to include 'Home' navigation link. If it is added by default, then you can delete it.

If you enable 'Show primary navigation in footer' setting, then the Primary navigation links will be displayed in footer along with the Secondary navigation links, as shown in below image.

Open external links in new tab:

If enabled, all external links will be opened in a new tab. Any link not pointing to your website domain is an external link. Preferably keep this enabled, so people do not easily navigate away from your website which will reduce the engagement rate.