Install the theme
Follow the steps below to upload the theme:
- Log in to your publication admin section at
yoursite.com/ghost/
- Go to Settings > Design (
yoursite.com/ghost/#/settings/design/
) - Click Change theme (
yoursite.com/ghost/#/settings/design/change-theme
) - Click Upload theme and select the
voice.zip
file. - After the upload is complete, under Installed themes click Activate
Routes setup
Caution
For the theme to function properly you must upload the routes.yaml
file.
The file is located inside the voice.zip
Follow the steps below to upload the routes.yaml
file (this is a separate step from theme upload)
- Log in to your publication admin section at
yoursite.com/ghost/
- Go to Settings > Labs (
yoursite.com/ghost/#/settings/labs
) - Under Beta features click on Upload routes file button and select the file from the root directory of the theme.
This is a testing ground for new or experimental features. They may change, break or inexplicably disappear at any time.
more info in the docs
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:
- Site-wide settings
- Homepage settings
- 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:
- featured posts slider (
partials/featured-posts.hbs
) - latest posts
- sidebar with subscribe CTA (
partials/sidebar.hbs
)
Note
Elements like the header and footer are included in all other templates (posts, pages)
Header
The header is defined in the partials/header.hbs
and it renders your publication
logo, primary navigation, the native search button.
Footer
The footer is defined in the partials/footer.hbs
and it renders your site title,
and social links.
Color customization
You can change the main accent color from Settings > Design > Brand. Additionally, under Settings > Design > Site-wide you can change three other colors:
- Background color - site wide background color
- Text color - used for most of the text
- Border color - used for elements which have border, for example the footer
With these options you can easily configure and set a custom color scheme. For specific examples and to play around with the options check out the demo https://voice.brightthemes.com/colors/
Some useful tools for choosing colors and gradients:
Fonts
Note
You can use Ghost custom fonts to set the heading and body fonts for your site. This can be done from Settings > Design > Brand > Typography. The theme comes with some additional fonts you can use, for this you have to set the Theme default option in the Ghost custom font settings.
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 and body font options:
- Abril Fatface
- Cinzel
- Domine
- IBM Plex Sans
- Inter
- Poppins
- PT Serif
- System - loads the system font (no requests to Google Fonts)
Tip
With the System font option, you can avoid requests to the Google servers in case GDPR is a concern.
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.
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 membersPaid-members only
- Only logged-in members with an active subscriptionNobody
- 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:
- Go to Tabler Icons and click on the Icon you want to add, this will copy the code to your clipboard.
- Go into the
partials/icons
directory and create a new file:your-icon.hbs
- Open the new file and paste the copied code from the clipboard.
- 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:
- X(Twitter)
The theme also comes with the following list of social platforms:
- bluesky
- threads
- discord
- github
- telegram
- tiktok
- 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>
Note
If you want to add a social that isn't listed, you have to add the corresponding
icon then modify the partials/social-links.hbs
file, adding the block
similar to the other platforms there.
Social sharing
Social sharing is part of the post layout and the following is included:
- X(Twitter)
- Bluesky
- Copy to clipboard
To add other social sharing options you need to edit the partials/social-share.hbs
file.
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:
-
npm run dev
(vite build --watch & vite
) The dev script will start the development process, watching for changes and building. Thevite.config.js
file contains the main configuration for Vite. -
npm run build
(vite build
) The build script will start the build process. -
npm run test
(gscan . --verbose
) The test will test the theme using gscan the official Ghost test tool. -
npm run zip
The zip script will create a zip file in thedist
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>