📰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.

Post card style:

Select the layout of post card displayed site wide. This layout will be used in Archive, Tags, Authors, Blog and all other pages where articles are loaded.

Post card in List layout. Single post card in one row. Feature image is not displayed.

Post card in grid layout. Three post cards based on available device width.

Pagination Style:

Theme has two available pagination styles:

1. Infinite load: This will add a load more button at the bottom of post cards.

   
2. Paginated Pages: This will add Next and Previous button links.

   

Corner radius:

This will change the corner radius of all elements across the website. You can change it to any radius. Default radius set is 25px. If you make it 0px, then all elements will have sharp corners, as shown below.

Primary font (and Secondary font):

The Google Font to use across the website's heading elements. This theme comes with a default selection of 50 Google fonts:

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 'Primary font' 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 'fonts.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.primary_font "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-primary: 'Poppins';
    }
    </style>
{{/match}}