Pulse 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 pulse.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 by the home.hbs file and it has several sections based on your theme settings:

• hero
• featured episodes
• about the show
• latest episodes
• reviews
• about the hosts

Hero

The hero section is fully customizable from Settings > Design > Homepage, with several options to adjust the look and feel:

1. Hero headline – the title for the hero section

   This field lets you set the main headline for your homepage. You can include HTML elements like links or use formatting to emphasize key text. Example from the demo:

   A weekly podcast <span>inspiring</span> creators to turn <em>passion</em> into a <em>thriving business</em>
   

2. Hero subheading – the subheading for the hero section

   The subheading field also supports HTML elements, allowing you to enhance the message with formatted text, links, or other HTML features.

3. Hero action – the main action for the hero section

   Choose an action type for the hero section based on your objectives:

   • Podcast links – display links to various podcast platforms
   • CTA – show a call-to-action button
   • Subscribe – display a subscribe form for capturing emails
   • None – no action is shown

   By default, the Podcast links option is selected to help guide visitors to podcast platforms.

4. Hero style – the layout and style of the hero section

   Adjust the visual layout of the hero section with the following styles:

   • Image on right & under header
   • No image & centered
   • Image on right
   • Image on left
   • Image below & centered
   • Hidden

   The default setting is Image on right & under header, offering a dynamic and modern presentation for your homepage.

Featured episodes

The featured episodes slider is enabled by default but it can be disabled from Settings > Design & Branding > Homepage. Clicking the Featured episodes slider toggle button.

The featured episodes section is implemented in the partials/home/featured-episodes.hbs file. The slider function is using the Glidejs library.

By default, all featured posts are fetched and rendered within the slider. Navigating through the list of posts is possible either using the arrows in the top right corner, or the bullet navigation below the slider.

About the show

To enable the about the show section on the homepage:

1. Navigate to Pages in your Ghost admin.
2. Create the page with the slug home-about.
3. Add the content, and upload a feature image & publish the page.

Latest episodes

The latest episodes section is implemented in the partials/home/latest-episodes.hbs file.

There are two dedicated custom settings to change how this section is rendered:

1. Podcast Card Style: This setting allows you to change the layout of the episode cards, providing three different styles to choose from:

   • vertical: This option arranges the episode artwork and details in a stacked format, with the image on top and the episode details below.
   • horizontal (default): Displays the artwork and episode information side by side, which provides a balanced and clean look.
   • bg-image: This layout uses the episode artwork as the background of the card, creating a bold and visually impactful design.

2. Styled Episode Number: This setting enables special styling for episode numbers included in the title. If the episode title follows the format EP X:, the episode number will receive custom styling to make it stand out within the card. This can be useful for giving a distinct visual hierarchy to episode numbers, making it easier for users to browse episodes.

Reviews

To enable the reviews section on the homepage:

1. Navigate to Pages in your Ghost admin.
2. Create the page with the slug home-reviews.
3. Add the content & publish the page.

For the individual reviews, the theme used the Product card available in the Ghost Editor. Alternatively, you can use external tools like Senja or Testimonial.to and instead of product cards add their embed code.

About the hosts

To enable the "about the hosts" section on the homepage:

1. Navigate to Pages in your Ghost admin.
2. Create the page with the slug home-hosts.
3. In page settings add the authors you want to highlight & publish the page.

Episodes page

The theme comes with one custom collection: /episodes/, which lists all your posts. To active it you must upload the routes.yaml file.

Setting meta data

Here are the exact steps:

1. Change the routes file and add the data property:

     /episodes/: 
       template: episodes
       controller: channel
       data: page.episodes
   

2. Create a new page in your admin and make sure the page URL is episodes
3. Re-upload the routes.yaml

Podcast popup

The popup is defined in the partials/podcast-popup.hbs and it includes the podcast links and a Ghost native subscribe form.

From designs perspective the podcast popup is similar to the native Ghost Portal. It's triggered in the same way too, by adding the href #/podcast to any anchor tag from any page on the site.

Podcast links

The podcast links are integrated in a couple of places:

• the hero section (depending on which hero action is activated)
• the footer
• the podcast popup

The theme comes with icons for the following list of podcast platforms:

• Apple Podcasts
• Spotify
• Google Podcasts
• Overcast
• Castbox
• Podcast Addict
• Pocket Casts
• Stitcher
• Podbean
• iHeartRadio
• Player FM
• Podcast Republic
• Castro
• RadioPublic

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

<script>
  podcasts.spotify = 'https://brightthemes.com' /* withe link to your podcast on spotify */
  podcasts.apple = 'https://brightthemes.com' /* withe link to your podcast on Apple Podcasts */
</script>

Once the link is set the link will appear in all places where the podcast links are used.

Header

The header is defined in the partials/header.hbs and it renders your publication logo, primary navigation, an action on the right side that you can control from custom settings with the following options:

• cta - you have additional settings to define the text and link
• listen (default) - _will point to the podcast popup (#/podcast)
• signin-signup
• subscribe

Additionally there is one more setting to enable or disable the search button, which by default is off.

Footer

The footer is defined in the partials/footer.hbs and it renders your publication logo, site description, a subscribe form, secondary navigation, social links, podcast links and finally copyright.

CTA section

To enable the "CTA" section above the footer:

1. Navigate to Pages in your Ghost admin.
2. Create the page with the slug cta.
3. Add the content & publish the page.

Color customization

You can change the main accent color from Settings > Design > Brand. The most important CSS configurations of the theme are defined as custom CSS properties, so you can easily overwrite them from Code Injection to change background colors, text colors, and more.

The theme comes with several color schemes, the default one can be set in the admin using the Default color scheme in Settings > Design > Site-Wide.

The included color schemes:

• system
• light
• dark

The default option is system which will be either the dark or light theme, depending on the user's preference.

It's possible to change the color schemes by changing the properties. This can be done by adding the following in Code Injection and adjusting the values.

To change the light theme:

<style>
  :root {
    --color-typography: hsl(0 0% 15%);
    --color-typography-tone: hsl(0 0% 30%);
    --color-typography-content: hsl(0 0% 20%);
    --color-typography-reverse: hsl(0 0% 95%);
    --color-background: hsl(0 0% 100%);
    --color-background-tone: hsl(0 0% 97%);
    --color-background-opac: hsla(0 0% 100% / 75%);
    --color-background-reverse: hsl(0 0% 12%);
    --color-border: hsl(0 0% 90%);
    --color-border-reverse: hsl(0 0% 20%);
  }
</style>

To change the dark theme:

<style>
  html[data-color-scheme="dark"]:root {
    --color-typography: hsl(0 0% 90%);
    --color-typography-tone: hsl(0 0% 70%);
    --color-typography-content: hsl(0 0% 80%);
    --color-typography-reverse: hsl(0 0% 15%);
    --color-background: hsl(0 0% 10%);
    --color-background-tone: hsl(0 0% 12%);
    --color-background-opac: hsla(0 0% 0% / 50%);
    --color-background-reverse: hsl(0 0% 98%);
    --color-border: hsl(0 0% 18%);
    --color-border-reverse: hsl(0 0% 92%);
  }
</style>

Some useful tools for choosing colors and gradients:

• Fuel HSL color picker
• Gradients | Components AI
• CSS Gradient Generator

Fonts

You can set the font family from the Admin section, going to Settings > Design > Site-wide. There are two options, one for the headings and another for the rest of the elements:

Headings font options:

• System - loads the system font (no requests to Google Fonts)
• Bricolage Grotesque
• Inter
• Instrument Sans
• Instrument Serif
• Noto Serif Display
• Sometype Mono
• Syne
• Urbanist

Body font options:

• System - loads the system font (no requests to Google Fonts)
• Bricolage Grotesque
• Inter
• Instrument Sans
• Instrument Serif
• Noto Serif Display
• Sometype Mono
• Syne
• Urbanist

If you still want to use Google fonts and want to self-host the font files check out this guide for self-hosting Google Fonts.

Dropdown menus

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

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:

• 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)
• 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: 28px;
  --logo-w-mobile: auto;
  --logo-h-desktop: 32px;
  --logo-w-desktop: auto;
}
</style>