Gazet Documentation

Install the theme

Follow the steps below to upload the theme:

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Design ( yoursite.com/ghost/#/settings/design/ )
3. Click Change theme ( yoursite.com/ghost/#/settings/design/change-theme )
4. Click Upload theme and select the gazet.zip file.
5. After the upload is complete, under Installed themes click Activate

Routes setup

Follow the steps below to upload the routes.yaml file (this is a separate step from theme upload)

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Labs ( yoursite.com/ghost/#/settings/labs )
3. Under Beta features click on Upload routes file button and select the file from the root directory of the theme.

Custom settings

The theme comes with custom design settings, which are accessible from the Ghost Admin panel. To view and edit these settings go to Settings > Design & Branding ( yoursite.com/ghost/#/settings/design/)

Custom settings are defined in the package.json file. These settings are placed under three categories:

1. Site-wide settings
2. Homepage settings
3. Post settings

Here's a preview of the available settings:

Homepage

The homepage is defined in the home.hbs file and it has several sections based on the theme design settings:

• Hero
• Actions
• Members-only
• Topic sections
• Podcasts
• Writers & newsletters
• Events
• Latest posts
• Sponsored

Hero

The hero section is a flexible, configurable component that displays featured or latest posts at the top of the homepage. It supports both dynamic and fixed layouts based on the number of posts or your design settings (1-6 posts).

Configuration options:

1. Hero posts filter: Selects the type of posts to display.

   • featured — Shows only featured posts
   • latest - Shows the most recent posts

2. Hero posts layout: Determines how the posts are displayed.

   • dynamic - Automatically adapts layout based on number of posts (1-6)
   • 1-post - Fixed layout for exactly 1 post
   • 2-posts - Displays two posts.
   • 3-posts - Displays three posts.
   • 4-posts - Displays four posts.
   • 5-posts - Displays five posts.
   • 6-posts - Displays six posts.

gazet/
├── home.hbs                         # Main homepage template
└── partials/
    ├── sections/
        ├── hero.hbs                 # Main hero section logic
        ├── 1-post.hbs               # Single post layout
        ├── 2-posts.hbs              # Two posts layout
        ├── 3-posts.hbs              # Three posts layout
        ├── 4-posts.hbs              # Four posts layout
        ├── 5-posts.hbs              # Five posts layout
        └── 6-posts.hbs              # Six posts layout

Actions

To active the actions section:

1. Create a new page with the slug actions
2. For each action you want to add, add a product card with title, description, image and a button with a link.

Members-only

The members-only section displays a curated selection of membership-restricted posts in a horizontal slider format. The section can be controlled through the Members posts filter setting in Settings > Design > Theme, with the following options:

• all-members (default) — Shows all membership-restricted posts
• free-members-only — Shows posts available to free members only
• paid-members-only — Shows posts available to paid members only
• none — Hides the members-only section completely

Topic sections

To active the topic sections:

1. Create a new page with the slug topics
2. For each tag you add to this page a topic section will be created.

To control the layout of the topic sections you can set the Topic section layout setting in Settings > Design > Theme, with the following options:

• grid-with-5-posts — Displays 5 posts in a grid layout
• grid-with-8-posts — Displays 8 posts in a grid layout
• description-and-5-posts — Displays a description and 5 posts in a grid layout
• column-with-5-posts — Displays 5 posts in a column layout, with up to 3 columns

Podcasts

The podcasts section displays posts tagged podcast or #podcast in a grid layout. Enable it in Settings > Design > Theme with the Show podcasts setting. The section shows up to 4 podcast episodes ordered by featured posts first, then by published date (most recent first). There's a link to the podcasts page in the section heading.

Writers & newsletters

To active the writers section:

1. Create a new page with the slug writers
2. Enable it in Settings > Design > Theme with the Show writers setting.

Up to 4 authors will be displayed with their latest posts (2 posts per author when newsletters are enabled, 3 posts when disabled).

When Show newsletters is enabled, a newsletters sidebar appears alongside the writers. Your newsletters will be displayed in a list with name, description and a link to the newsletters page.

Events

The events section displays posts tagged event or #event in a grid layout. Enable it in Settings > Design > Theme with the Show events setting. The section shows up to 4 events ordered by featured posts first, then by published date (most recent first). There's a link to the events page in the section heading.

Latest posts

The latest posts section displays a list of recent posts when the hero section is set to "featured" mode. The section includes a link that directs to the /latest/ page.

A sidebar with a subscription form is displayed alongside the latest posts.

Sponsored

The sponsored section displays partner content at the bottom of posts and pages. It automatically fetches posts tagged with sponsored or #sponsored and displays them in a responsive grid layout (up to 4 posts). It's displayed on the homepage and on post pages.

Post templates

The theme comes with 5 custom post templates, these templates can be selected from the Post Settings menu:

• custom-post-with-fullwidth-image.hbs — a post template with a full width image
• custom-post-with-no-image.hbs — a post template with no image
• custom-post-with-regular-image.hbs — a post template with a regular image
• custom-post-with-sidebar.hbs — a post template with a sidebar
• custom-post-with-wide-image.hbs — a post template with a wide image

Additionally, the theme comes with 2 custom post templates for events and podcast episodes:

• custom-post-event.hbs — a post template for events
• custom-post-podcast-episode.hbs — a post template for podcast episodes

Event post

Event posts support special metadata attributes that are defined in the Code Injection > Footer of the post. Add the following JSON structure to display event information:

<script id="event" type="application/json">
{
  "date": "December 15, 2025",
  "location": "San Francisco, CA",
  "registration": "https://example.com/register",
  "registration_deadline": "2025-12-10"
}
</script>

Available attributes:

• date - Event date(s) in a readable format (supports date ranges)
• location - Event location or venue
• registration - URL for event registration
• registration_deadline - Registration deadline date (optional, used to show/hide registration button)

The theme will automatically display these attributes with appropriate icons and styling on event post pages and event cards.

Podcast episode post

Podcast episode posts support special metadata attribute like episode number that is defined in the Code Injection > Footer of the post. Add the following JSON structure to display podcast episode information:

<script id="podcast" type="application/json">
{
  "episodeNumber": "42"
}
</script>

Available attributes:

• episodeNumber - The episode number (displayed as "Episode 42" or "EP 42")

The theme will automatically display the episode number with appropriate styling on podcast episode pages and podcast cards.

Custom pages

The theme comes with a couple of custom pages with predefined URL/slug:

• page-events.hbs — events page
• page-featured.hbs — featured page
• page-podcasts.hbs — podcasts page
• page-newsletters.hbs — newsletters page

Custom templates

The theme comes with a couple of custom page templates, these templates can be selected from the Page Settings menu, under Template:

• custom-template-blank.hbs — a template to create pages without header and footer
• custom-template-membership.hbs — membership page
• custom-template-signin.hbs — sign in page
• custom-template-signup.hbs — sign up page
• custom-template-topic-cards.hbs — Tags page
• custom-topic-sections.hbs — Topic sections page - combine multiple topics into a single page, just add tags to this page and the theme will automatically create a topic section for each tag.
• custom-template-writers.hbs — writers page

Color customization

You can change the main accent color (brand color) from Settings > Design > Brand. In addition, you can change the following colors, from Settings > Design > Theme:

• Background color — Set the main background color
• Text color — Set the main text color
• Border color — Set the border color

Fonts

By default the theme comes with the Newsreader font for body and headings. You can change the fonts from Settings > Design > Brand > Typography, with several options for both body and headings.

If you want to use a custom font, you can check out this guide on how to add custom fonts.

Dropdown menus

gazet comes with a custom feature to create dropdown menus easily for your header navigation. All you have to do is add the minus sign (-) in front of the items in Settings > Navigation

Items having the - sign will be added as subitems to the previous navigation item. For example from the demo:

• - Membership, - Sign up and - Sign in will belong to the Members item

Ghost config

Some configurations in Ghost themes can be defined in the package.json file, including Posts per page, Image sizes, and Custom settings.

Posts per page

The posts_per_page defines the number of posts that appear in your collections until it's paginated. For example, the value of posts_per_page is used on the home page, tag, and author templates.

You can change it in the package.json file:

"config": {
  "posts_per_page": 12
}

Image sizes

Ghost can handle responsive image sizes, and this is defined in the package.json file, under the image_sizes property. You can change the default configuration by editing this file before uploading the theme.

"image_sizes": {
  "xxs": {
    "width": 30
  },
  "xs": {
    "width": 100
  },
  "s": {
    "width": 320
  },
  "m": {
    "width": 640
  },
  "l": {
    "width": 960
  },
  "xl": {
    "width": 1280
  },
  "xxl": {
    "width": 2000
  }
}

The sizes defined will be used to generate copies of images at the specified sizes when uploading images in your Ghost Admin.

Ad banners

The theme comes with 3 pre defined ad slots that you can activate by creating pages with the following slugs:

• banner-header - shows below the header for non-paid-members and visitors
• banner-footer - shows above the footer for non-paid-members and visitors
• banner-sidebar - shows in sidebar areas for non-paid-members and visitors

The ad banners are defined in the partials/banners folder:

gazet/
└── partials/
    ├── banners/
        ├── header.hbs               # Header banner
        ├── footer.hbs               # Footer banner
        └── sidebar.hbs              # Sidebar banner

Header

The header is defined in the partials/header.hbs and it renders your publication logo and a log in/subscribeCTA on the right. There's a second navigation line with your primary navigation, and search button.

You can change the position of the logo in the header from Settings > Design > Theme, with the following options:

• left — The logo is on the left side of the header
• center — The logo is in the center of the header

Footer

The footer is defined in the partials/footer.hbs and it renders your publication logo,secondary navigation, social links, and finally copyright.

Comments

The theme uses the native Ghost comment feature. The Native Comment System requires at least Ghost v5.9.0, you have to enable it from Settings > Membership > Access > Commenting.

Here are the options you can choose from:

• All members - Logged-in members
• Paid-members only - Only logged-in members with an active subscription
• Nobody - Disable commenting completely

Icons

The icons used in the theme are from Tabler Icons, the library consists of 5000+ icons. Only the icons used in the theme are included in the partials/icons directory in separate .hbs files.

Here are the steps to add new icons:

1. Go to Tabler Icons and click on the Icon you want to add, this will copy the code to your clipboard.
2. Go into the partials/icons directory and create a new file: your-icon.hbs
3. Open the new file and paste the copied code from the clipboard.
4. Save the file.

For using the icons inside the theme files, there is a special partial file partials/icon.hbs which accepts name and size as parameters.

Let's see an example and try to add a new icon. Assuming we want to add the icon camera and by clicking on the icon on the website, we get this code:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-camera" width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="#2c3e50" fill="none" strokeLinecap="round" strokeLinejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
  <circle cx="12" cy="13" r="3" />
</svg>

The next step is to create a new file: partials/icons/camera.hbs and paste the copied code in the file. The new file must be of .hbs type, so we can use it into the theme files:

{{>icon name="camera"}}

Social links

Social links are shown in the footer by default. The basic social links that Ghost comes with can be edited from Settings > General settings > Social accounts:

• Facebook
• X(Twitter)

The theme also comes with the following list of social platforms:

• bluesky
• threads
• linkedin
• discord
• github
• instagram
• pinterest
• reddit
• telegram
• tiktok
• whatsapp
• youtube

To activate any of these platforms, add the following in your Admin Settings > Code Injection > Site footer. For example to activate GitHub:

<script>
  socials.github = 'https://github.com/brightthemes'
</script>

Social sharing

Social sharing is part of the post layout and the following is included:

• X(Twitter)
• Bluesky
• Facebook
• Linkedin
• Email
• Copy to clipboard

To add other social sharing options you need to edit the partials/social-share.hbs file.

Translations

By default, everything is in English (en.json), additionally, the theme comes with translations in:

• 🇩🇪 German (de.json)
• 🇪🇸 Spanish (es.json)
• 🇫🇷 French (fr.json)
• 🇮🇹 Italian (it.json)
• 🇳🇱 Dutch (nl.json)
• 🇵🇹 Portuguese (pt.json)

If you want to edit the translation in a specific language, you have to edit the corresponding translation file. The files are stored in the locales directory (inside the theme zip).

|__ locales
|   |__ de.json
|   |__ en.json
|   |__ es.json
|   |__ fr.json

If the language file for your language doesn't exist, you have to create it (make sure to use the correct language code) The best way is to copy the content en.json file in your new language file, then change the translations.

Theme development

If you want to make more advanced changes to the theme, or you want to implement your own components, you can take advantage of the developer-friendly setup of the theme.

All the assets are combined and minified for better speed and performance. To customize the theme make sure you have Node.js installed.

The theme is built with TailwindCSS and Alpine.js. The development environment is based on Vite, the tasks can ran with npm scripts.

This guide is assuming that you have installed Ghost locally. Add the theme directory inside Ghost's content/themes/ directory then move to the theme directory in your command line. Run the npm install command to install all the dependencies.

After that is done, you have access to run the npm scripts:

1. npm run dev (vite build --watch & vite) The dev script will start the development process, watching for changes and building. The vite.config.js file contains the main configuration for Vite.

2. npm run build (vite build) The build script will start the build process.

3. npm run test (gscan . --verbose) The test will test the theme using gscan the official Ghost test tool.

4. npm run zip The zip script will create a zip file in the dist directory.

Code Snippets

Frequently asked questions and useful snippets you can use to make some quick changes to your site.

How to change the logo size?

Go to the Admin, Settings > Code Injection and in the Site Header add, changing the values as needed:

<style>
:root {
  --logo-h-mobile: 40px;
  --logo-w-mobile: auto;
  --logo-h-desktop: 64px;
  --logo-w-desktop: auto;
}
</style>