How to Build a Custom Ghost CMS Theme

Ghost CMS is a platform specifically designed for bloggers and writers. Using Ghost, you can quickly get a blog website up and running.

Ghost targets primarily writers and all the features are specifically built for writing.

Ghost's new dashboard gives you a user-friendly interface, and beginners can easily understand the functionality. In addition, Ghost's free tutorials will help you if you have any problems.

Some cool Ghost features:

  • Open-source
  • Membership support
  • Rich text editor (Koenig editor)
  • Newsletters
  • Email subscriber support
  • Login functionality support
  • Integration plugin
  • Analytics dashboard
  • Inbuilt comment support
  • Inbuilt search support
  • Inbuilt search functionality
  • SEO and different types of metadata support social media
  • Custom theme design

You can check out all the code available for this project on GitHub here .

Here's what we'll cover:

  • Self-Hosting vs Hosting with Ghost
  • What Are the Drawbacks of Ghost?

How to Install the Ghost CMS

Understanding the ghost folder structure, understanding the ghost theme folder structure, how to create a new theme with the npm cli tool, how to create a new ghost theme from scratch, how to install ghost-cli globally, how to install ghost locally, how to configure tailwind css, other important commands in the ghost cli.

  • How to Write the Code for Our Custom Ghost Theme

How to add theme configuration in package.json

How to use theme helpers, what is the partials folder, how to create a default page, how to create an index page, how to create a posts page.

  • How to Create Information Pages

How to Create an Author Page

How to create a tags page, how to create an error page, how to enable comments, how to set up search, self-hosting vs hosting with ghost.

Ghost provides two ways to create/host your website:

Self-hosting

  • With the Ghost cloud platform

If you choose to self-host, you'll host your website on any cloud platform like Google cloud , AWS cloud, Azure cloud , Digital Ocean , and so on. These are some of the most used cloud platforms in the market.

Most cloud platforms come with one click to deploy solutions. This means you can deploy your Ghost blog with a single click.

Before deploying your Ghost blog, you should compare all cloud platforms based on pricing before choosing one.  

Self-hosting your Ghost blog is free, and you do not need to pay anything to the Ghost platform. You'll just pay your cloud provider.

Hosting with the Ghost Cloud Platform

If you choose to host with Ghost, they'll help create the blog and host it on the Ghost platform itself. The Ghost team handles all the maintenance and security. You won't have to worry about updating Ghost and any themes you're using – the Ghost staff will handle that for you.

Self-hosting focuses more on developers, while hosting with the Ghost platform targets anyone who doesn't know about computers and programming.

Ghost hosting comes with a paid plan – it's not free. But they give you 14 day free trial period, after which you shift automatically into a paid plan.

What should you choose, paid or self-hosting?

In my experience, hosting with the Ghost platform is the best solution for beginner developers, non-developers, and writers. The Ghost team handles everything for you. You do not worry about traffic, security, or maintenance and do not need to update the Ghost CMS. This lets you focus on writing.

As a developer, I always recommended that you self-host Ghost. I have run my self-hosted Ghost blog with Google Cloud for two years with a Bitnami one-click deployment.

After six months, I'd used up my $200 free credit, and then I started to pay monthly to Google Cloud hosting.

For a non-technical person, I highly recommended using the Ghost (pro) cloud platform and as well any other platform that provides Ghost-based cloud and shares hosting.

I found a list of Ghost-hosting platforms on the internet. Perhaps one of these will solve your hosting issues or questions. If you plan to deploy Ghost with the G oogle Cloud platform , I have an article on that.

What are the Drawbacks of Ghost CMS?

The biggest drawback of Ghost is that web performance can feel slow. If you want good web performance, you'll likely need to use a CDN for media (images, videos, and PDFs) and also for CSS and JavaScript.  

The second biggest drawback is cost. I've been running my blog with Ghost for two years, and I pay 10 to 20 times extra to Google Cloud for hosting as a self-deploy.

My website has 4000 to 5000 active monthly users, and I pay 20 times extra. Because of this, I shifted my website to Hugo.

Now I still have 4000 to 5000 active users on the website, and I pay zero money to Netlify.

The Solution for Developers

The best solution for developers is to use Ghost as a backend and, with the REST API, choose any JavaScript framework like Next.js, Fresh, Astro, and so on.

There are a lot of frameworks that can help you build a static website. In addition, static websites are fast and deploy with zero JavaScript.

In this method, you may not use all Ghost's features, but you can save a lot of money. Still, building the website with a JavaScript framework takes a lot of time just to run the essential version of the website.

My solution only works well for a small team. So if your team has a lot of writers and submits many articles in a single day, I'd recommend sticking with Ghost CMS as a frontend and backend.

Ghost version 5.0 is 20% faster than the old version. Suppose you use Ghost and want to design your own custom theme – then this article is for you. Let's get started.

How you install Ghost CMS changes according to your operating system. We'll discuss installation for all operating systems in this guide. You can install Ghost with npm, yarn, and Docker.

Now let's look at how to install Ghost for:

  • Windows, Linux, and macOS
  • Docker image

How to Install Ghost on Windows, Linux, and macOS

Setting up the Ghost theme development environment in Windows and macOS is a straightforward process. But it's best if you've installed the npm or yarn package manager. If you don't have Node.js, npm, and yarn, yolu'll need to install them – Node.js comes with preinstalled npm and yarn.

To install Ghost CMS globally and locally, follow these basic steps:

How to install ghost-CLI globally

First, you can install ghost-cli globally on your machine using npm or yarn. Here are the commands:

Next, when your ghost-CLI installation is complete, then run the ghost local command in your terminal. It looks like this:

The command output looks like this:

Ghost cms folder structure

Note : you'll need to run the ghost install local command in an empty folder. Otherwise, you'll face an error:

Not empty directory error with ghost-cli

To start the local development server, run the ghost start command in your terminal.

Ghost start command

If you get an error when running ghost start in Ubuntu, run the following command: ghost start --no-setup-linux-user .

The directory is not readable by other users' errors in ghost cms.

How to Set Up Your Environment Using a Docker Image

Docker is also a great way to set up a theme development or production environment for Ghost. The Ghost team provides an official Ghost Docker image on Docker Hub.

To start the setup, you'll need the docker-compose.yml file in your root project folder. Then run the docker-compose up command in your terminal.

In the volume section, you pass your file. In my case, I added a specific file in my Ghost theme folder.

In your custom-ghost-theme folder, you need the index.hbs , post.hbs , and package.json files to start theme development. But, you'll get an error when you activate your theme in the Ghost dashboard without requiring a file.

Here's the GitHub repo if you want to follow along:

ghostthemewithdocker

In Ubuntu (22.04) or any other Linux distros, you'll get the Message: The directory /home/rajdeepsingh/ is not readable by other users on the system error. This means yours is old. So update your ghost-cli then run the ghost start command in your folder.

The Ghost folder structure has three main folders and one file. They are:

  • The config.development.json file contains the configuration for Ghost development.
  • The current folder is a link (symbolic link) that targets the install version.
  • The version folder contains all versions of Ghost cms.
  • The content folder is the main folder containing our database file, settings, theme, images, media, and so on.

Ghost cms folder Structure

The folder structure might change according to the operating system but the content folder is the same in every operating system.

The content folder contains all the important files for Ghost.  They are:

  • The data folder contains an SQLite3 database file. Ghost, by default, uses the SQLite3 database.
  • Files, images, and media folders contain all files which writers upload.
  • The public folder contains all public CSS and JavaScript files – for example, card and member JavaScript and CSS files.
  • Finally, the settings folder contains all the settings, for example, the router.xml file.
  • The theme folder contains all files and folders used to develop the theme.

You can build a new custom theme store in the content/theme folder. To develop a new theme, you'll always need to create a new folder with the theme name and store all files in the theme name folder.

Ghost CMS uses handlebars to build a Ghost theme. There are a number of files but only three files are required:

  • index.hbs in the main file (required) to design the home page of the website.
  • post.hbs the file (required)  is used to read and design the full article.
  • package.json file (required)  is used for Node.js config, and it also uses the theme name, description, version, custom config, and so on.
  • The default.hbs file is used to build the layout of the theme.
  • The assets folder contains all the JavaScript, CSS, fonts, and image files.
  • The partials folder helps divide files into small partials (parts) for better code readability.

Ghost theme folder structure

The easiest way to start a new Ghost theme is with the create-ghost-theme CLI . I built it, and I maintain it. The create-ghost-theme CLI helps you create the following folder structure that we'll discuss next. But currently, it only supports Tailwind CSS .

First, we'll create a new theme with the create-ghost-theme CLI and restart the Ghost CMS local server again.

Folder structure

After creating a new theme with create-ghost-theme CLI , your folder structure looks like this:

create-ghost-theme cli folder structure

Understanding the New Website Layout

After creating the theme with create-ghost-theme CLI, your theme looks like this.

default-hbs

Your website reading page will look like this:

index-hbs

Your new tag page looks like this:

tag-hbs

When you're learning about Ghost theme development, my recommendation is to start creating a new theme from scratch. Then you can use the CLI tool I just showed you. This will be a lot easier for you.

So now, that's what we're going to cover in-depth: how to create a new Ghost CMS theme from scratch.

Requirements:

To create a new theme, you'll need two libraries: the first is ghost-cli and the second is Tailwind CSS.

Here's what we'll go over in the coming sections:

  • How to install Ghost-cli globally
  • How to configure Tailwind CSS
  • How to understand more commands in the Ghost CLI

Finally, we'll write the code

We went over how to do this above, but in case you need a reminder here it is:

Tailwind CSS is a powerful CSS library for designing the front end of a website. And you can easily use it with Ghost.

Install Tailwind CSS in your theme folder like this:

After Tailwind and another package have been successfully installed, then run the following command to configure Tailwind for your theme development:

The tailwindcss init command creates a tailwind.config.js file. Here's what you'll see:

Config your template path in the content section, so Tailwind CSS tracks the CSS classes. Then compile those classes in the production file.

Create a main.css or dev.css and use any other file name to create the file for Tailwind directives. Then paste the following tailwind CSS directives code into the file:

Create the script for Tailwind CSS to check all the classes then create a production-ready CSS file for your theme.

The last step is to link the production-ready CSS file to your theme like this:

The one problem you might face when you enable Tailwind CSS in a Ghost theme is that refreshing your site in the development process is manual. When you change anything related to Tailwind classes, you'll need manually refresh your website again. I haven't found a solution yet, but you can use the live server for that for now.

There are a number of other commands you'll use often when working in the Ghost CLI. Let's go through them now. Here's what we'll discuss:

  • ghost doctor
  • ghost uninstall
  • ghost version
  • ghost restart
  • ghost update
  • ghost --help

How to use the ghost stop command

The ghost stop command stops the currently running instance.

ghost-stop

How to use the ghost ls command

The ghost ls command prints the current installs instance list in your machine.

ghost-ls

How to use the ghost doctor command

The ghost doctor command checks the system's health to see if everything is fine before running the ghost install or ghost update command.

If you face any errors in Ghost, you can also use the ghost doctor command to check the errors.

ghost-doctor

How to use the ghost uninstall command

The ghost uninstall command removes the Ghost instance and related configuration files as well.

How to check the Ghost version

You can use the ghost version command to check your currently installed version of Ghost.

ghost-version

How to use the ghost restart command

The ghost restart command restarts your currently running Ghost instance.

ghost-restart

How to use the ghost update command

The ghost update command updates your old Ghost version to the new version.

ghost-update

How to use the ghost --help command

The ghost --help command prints a help page:

ghost---help

Now we get to start writing the code. Here's what we'll cover in the coming sections:

  • How to add theme configuration in package.json [required]
  • How to use theme helpers
  • What is the partials folder?
  • How to create a default page
  • How to create an index page [required]
  • How to create a posts page [required]
  • How to create informational page
  • How to create a tags page
  • How to set up comments
  • How to enable search

The package.json file is the main file where you add or change the theme name, description, and custom configuration for the theme.

The first step is to create package.json file and add the theme name, description, version, and additional configuration.

The following properties are used by Ghost themes: name , description , version , engines , card_assets , license , author , keywords , screenshots , and config in the package.json file.

The most important properties are name , description , version ,   engines , card_assets , and config . Here's what this looks like in the code:

You can learn more about card_assets and config for the theme. The config section helps add configuration for Ghost. You can also add more custom configuration for Ghost and enable and disable it with the Ghost UI.

To check all configurations, go to Ghost > Settings > Design > and click Site-wide. There you can check all configuration lists provided by the theme developer.

custom config enable and disable in ghost cms

The Ghost team provide lots of helpful functions to add additional functionality to the Ghost theme with handlebars . Some of the functionality by default comes with handlebars and other functionality is built by the Ghost team and maintained by the community.  

The Ghost team uses handlebars to build the entire Ghost CMS and theme. Basically, handlebars.js is a template language that helps you build both static and dynamic websites.

There are lots of Ghost helpers like foreach , get , if , is , match , @config , comments , navigation , post , total_members , total_paid_members , block , asset , ghost_head , ghost_foot , pagination , partials , body_class , block , search and many more.

You can read about all of the helpers on the official docs . You can also copy-paste some of the code so you do not need to remember.

The partials folder is like a component folder where you define all components for your theme. Basically, components are reusable code that you can reuse as often as you need. In the theme structure, we call these partials. All the partials are created with handlebars.js.

partials for ghost theme

I create more than 24 partials for my Ghost theme and you can easily reuse them across websites. You can use partials with the following syntax: {{> your-partials-file-name}} .

First, we need to built a default.hbs file. The default.hbs file helps us build a layout for the website. Here's the code:

Let's see what's going on here:

  • {{meta_title}} provides the title from the website.
  • The @site is a global variable and you can access a title with {{@site.title}} .
  • Include a Ghost {{ghost_head}} in the head tag.
  • Include a Ghost {{ghost_foot}} in the footer tag.
  • Inserted all other templates with the {{{body}}} tag in index.hbs, post.hbs, and so on.
  • All other templates get inserted in index.hbs, post.hbs, and so on.
  • Include dynamic CSS classes with {{body_class}} in the <body> tag
  • Add footer partials in the default {{> footer}} file
  • Add header partials in default {{> header}} file
  • Include assets from the {{asset "build/tailwind.css"}} folder.

Create index.hbs in the ghost theme

The index page is the main page of the website. You can create a similar index page with the following code:

You can access all posts with a for each loop and pass them to the partials with the {{> postCard}} template. The @custom.adsense_enable is a custom config written in the package.json file and used in the theme to check that the website owner has enabled AdSense on-site or not. The custom config enables you to go to Ghost > Settings > Design > and to click on Site-wide and enable Adsense.

Create post.hbs in the ghost theme

The posts page is where readers will read your articles on your site. You can create a posts page with the following code.

The fastestReadingTime block is to pass the reading time to the author partials. The @custom.adsense_enable is a custom config written in the package.json file and used in the theme to check that the website owner has enabled AdSense on-site or not. The custom config enables you to go to Ghost > Settings > Design > and to click to Site-wide and enable Adsense.

How to Create Informational Pages

Create page.hbs in the ghost theme

The page.hbs file helps you create informational pages for your website. For example, you can create an about, contact, privacy policy, or disclaimer page on your site.

Create author.hbs in the ghost theme

Author pages let you describe the author. You can show the author's name, bio, and related articles.

Create tag.hbs in the ghost theme

You can use the tag.hbs file to show articles related to the tag used.

Create error.hbs in the ghost theme

You use the error.hbs file to show when any errors occur on the website. Error pages help your website not break in production. The most common error is a 404 (not found) error.

enable comment in the ghost theme

Ghost 5 officially supports the commenting system (it's built-in) and you can just enable comments on the theme by copying and pasting the code – you never need any configuration. Ghost itself handles all the configurations. Here's the code:

enable the search bar in the ghost theme

Ghost 5 comes with the official support of search functionality . You do not need any other configuration. Just paste the following code into your theme and the search functionally will start working on your site.

Building a theme with Ghost is a relatively straightforward process compared to WordPress. The Ghost team has created well-defined documentation that you can easily follow as a beginner with examples.

They also provide many ready-made components, like search functionality, amp page, comments, and so on.

You can create your Ghost theme by copy-pasting the code. For beginner developers, it might seem a bit complicated, but you'll get the hang of it with some time and work.

The Ghost team has created a well-defined folder structure for theme development. It is the easiest way to manage the theme development process. You can also use npm packages to enhance the development process and add more functionality to the theme. In my theme, I use tailwind CSS and the Gulp package to speed up the development process.

JavaScript || React.js || Next.js || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Author || https://ko-fi.com/officialrajdeepsingh

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

ghost change theme

Customizing a Ghost Theme

Ghost-based sites can be customized to look any way you want by modifying the theme. Anything that can be done with HTML, CSS or JS can be done via a Ghost theme.  You get the look and feel you want without having to heavily optimize the site afterwards.

This article will describe the process of customizing an existing theme.  We won’t get into creating a theme from scratch. Although it’s certainly possible to create a brand new Ghost theme, it’s far more common to only tweak or edit a few aspects of an existing theme than to dive into full-on Ghost theme development.

Before you begin, ensure you really need to maintain a Ghost custom theme. Many aspect the your site look and feel can be customized from the admin page of your site without modifying your theme. Many available Ghost themes also allow further customization through options like editing CSS variables by specifying brand and background colors, fonts, etc using ‘Code Injection’ on the Ghost admin page. See the documentation that came with your theme for available options.

Benefits of Customizing a Ghost Theme

Turn your ghost blog into a full website.

By using the Mindspun theme, you’ll be able to customize your blog into the look and feel of a full website. The theme enables you to manipulate and customize how every element will appear.

Design Control

Ghost themes allow you to control any HTML, CSS, or JavaScript on a page. This gives you complete control over the design of your site. Customize your site’s layout, post structure, and even when you publish. A Mindspun theme empowers you to create a unique website.

Easy to Install and Set Up

Mindspun themes take only a few minutes to install and set up. You won’t need for plug-ins or third-party apps to be up and running quickly.

Core Elements of a Ghost Theme

A Mindspun theme has several core elements that will allow for customization. Because you will be determining the layout and design, you’ll want to understand each element’s function. Below are some of the standard elements of an existing theme.

Posts: These are your blog articles. Posts are also referred to as “Stories” in the user admin. You’ll want to choose fonts and colors that are easy to read for this element.

Pages: Similar to posts, pages are static webpages that are excluded from the blog post feed. You can link to your pages in your menu, header, or footer. Your pages should have a similar layout to your posts.

Authors : Authors are objects associated with posts and pages. These tend to be the editors and administrators that write your content. You can assign authors to posts and pages. You can also customize how much information is shown about your author (bio, picture, name, etc.).

Tags: Similar to authors, Tags are descriptive words or categories you can are relevant to your posts and pages. By assigning tags, your users will easily be able to search your posts by tag searches. You can assign several tags to each post. The first tag is considered the primary. Customizing your theme, you can create special features and privileges for primary tags.

Navigation: Navigation is your menu links and breadcrumb links to help your users navigate your website. You can customize where and how your navigation links will appear to the user. Be sure to choose easy to read fonts, colors, and font sizes. Check out our navigation tips when customizing your site.

Blog Attributes : The blog attributes are the post title, description, logos, social icons. You can customize the look and layout of your blog attributes to reflect your website’s personality.

Email Signup: This is a form to allow your users to subscribe to an email newsletter or website promotions. You can customize where and how your signup is displayed.

There are several setup steps required to get going. Don’t let this deter you, even if you haven’t done much web development.  Once everything set up, it’s easy to make incremental changes.  If you’ve done some web development, this process should be familiar.

Install NodeJS

You are need at least a supported version of NodeJS and, unless there is a definitive reason why not, use the recommended version. Currently 12.x (Node v12 Erbium LTS) .

NodeJS is free to download and available here , but a far better approach is to use the Node Version Manager (nvm) available here .  Javascript projects – which is what Ghost is – and the associated tools are notoriously finicky about requiring specific versions of tools.  If you do end up working with other JS projects,  you’ll find yourself changing Node versions often and nvm really helps.

If you do go with nvm then switch to the recommended version of Node with the following command.

Now that NodeJS is installed, you can use the associated package manager npm to install everything else you need.

Install the Ghost CLI & a Local Version of Ghost

Installing a local version of Ghost saves a lot of development time later on. It’s possible to build your theme and upload it to your site each time, but this process is painful to say the least.  A far better approach is to install Ghost locally and then link to your new theme using content\themes\<name> .

Install the Ghost CLI globally.

Then install ghost.

Ghost is now running at http://localhost:2368/ghost/ .

The ghost site runs in the background with the logs going to the content\logs directory.   To run Ghost in the foreground and print the logs to the terminal, first stop the site:

and then start the development server:

When you want to stop the development server, just type Ctrl-C.

Start With a Base Theme

You can start with any theme you have.  Each theme can be downloaded from the Ghost admin panel under the Settings > Design.  You can download one from the marketplace or – more likely – download a theme that is already installed.

Regardless of which method you choose, a theme comes as .zip file.  When a theme is installed that .zip file is unzipped into content\themes underneath the ghost directory you installed.

We’re going to start with the default theme “caspar” and create a modified theme named “clyde”.  From the ghost directory you installed:

The new theme is now available underneath installed themes on the Settings > Design page.

Click ‘Activate’ and you’re using your own custom theme! (albeit with no changes yet)

Pro Tip : If you want to maintain your custom theme in source control, you can check in the contents of the theme zip file and then create a symbolic link from content\themes to the directory in your repo.
Extra Credit: If you really want to start from the ground up, try our ‘barebones’ theme on github .

Install Theme Dependencies

Themes have dependencies of their own – other NodeJS packages that are used with building that theme.  Install these using npm too.  From the theme directory, run:

Example Customizations

The sky’s the limit here. You really control the entire Ghost UI through theme customizations.  Here are a couple of simple examples to get you started.

Change the Theme Name

Ghost disambiguates the theme by appending “(clyde)” to the name, but the name is still “casper”.  Let’s change it to just “clyde”.

Open the file package.json from your theme directory in a text editor.

Here you can set the name along with various other meta data about the theme. Once you’ve made your changes, save the file, restart Ghost and reload your admin page.  You’ll now see “clyde” as the name.

Most changes don’t require you to restart Ghost.  Only changes to the theme meta data require a restart as the package.json file is only read once at startup. Fortunately, meta data changes are relatively rare, usually just when you bump the version number.

Change the Footer Background Color

We’re going to change the page footer to use a Royal Blue background which is hex #2127BD.

Note: This example – unlike the previous one – is specific to the Casper theme.

The footer style is in the last section of the screen.css.

The background color uses a CSS variable which is define in global.css.   For simplicity, we’ll just use the hex value directly.  Replace the background attribute with the hex value.

Run the dev script via npm which runs the build process and also watches for subsequent file changes and automatically builds those too.

Go back to your browser, reload the page of one of your posts and scroll to the bottom.  You’ll see a newly-royal-blue footer.

Add a Call To Action to Every Page

As a final example, we’ll add a call to action to every page in the site.  The previous examples changed the meta data and style of the theme but didn’t change the underlying html.  This example will modify the page structure, by adding a simple <div> element right above the footer.

As you’ve probably noticed from your theme directory, pages are built using Handlebars (.hbs) template files.   Each type of page – post, author, tag, etc – has, or can have, its own template.   Each of these page templates also uses a layout template for things that are common to every page type.  The enclosing <html> tag, common head tags and site navigation are all part of the default layout template named default.hbs.

Add the following <div> right below the {{{body}}} variable and directly above the <footer> tag.

Of course, if you were making this change in practice, you wouldn’t use inline styles. You’d put the style in the CSS as in the previous example.  Using inline styles here just simplifies the example.

If you haven’t already done so, run the npm dev script to build the code.  The build will convert the Handlebars template files in HTML.

Reload any page on your site and you’ll see your new – overly direct – CTA.

This post showed you how to customize a Ghost theme that’s suitable for any site. We installed all the tools necessary for building, installing and debugging a Ghost theme. Finally, we provided three examples of modifications, changing the theme meta data, style and page structure. Now you’re well on your way to making a site that reflects your vision. Happy theming!

ghost change theme

  • Performance
  • Documentation
  • Case Studies
  • Privacy Policy
  • Terms and Conditions

How To Change Ghost Theme and Adjust Settings in Ghost CMS

image

Enamul Haque 5 minutes read

image

On this page

Are you ready to take your Ghost blog to the next level? One of the most exciting things about Ghost is its unmatched flexibility and customization capabilities. Whether you're a seasoned designer or a passionate blogger just starting, you can personalize your site to perfectly reflect your unique voice and brand.

In this blog, we'll delve into the world of ghost theme changes and setting adjustments in Ghost CMS. We'll walk you through the step-by-step process, from browsing and installing a stunning ghost theme to fine-tuning the details that make your site truly yours.

You will learn from this Blog:

  • Introduction
  • How to Change Ghost Theme
  • How to adjust settings
  • Additional customization tips

Changing Ghost Theme: Revamping the Visual Appeal

Theme plays a crucial role in shaping the overall look and feel of your Ghost blog website. They determine the arrangement of elements, color schemes, typography, and other visual aspects. Ghost offers a variety of themes, both free and premium themes , catering to diverse styles and preferences.

1. To change the theme for your Ghost blog:

Step 1: Access the Ghost Admin: Log in to your Ghost blog's admin panel using your credentials.

Step 2: Navigate to Dashboard Settings: Click on the gear icon in the bottom left corner to open the Settings menu.

Navigate to Dashboard Settings

Step 3: Access Design & Branding Section: Select "Design & Branding" from the site options and click on the customize on the right corner. Click on the "Change theme" in the bottom right corner.

Ghost: Access Design & Branding Section

Step 4: I nstall your theme.

You can install your theme in two ways:

  • Install from Ghost Marketplace: After clicking on the change theme you will see the "Themes" section, you can browse the Ghost Marketplace themes. Select the theme you want to use from the list of available themes. Once you've chosen your preferred theme, click on the "Install" button.

Install a ghost theme from the Ghost Marketplace

  • Install from other marketplaces: You can upload a theme file (.zip) that you have downloaded. To upload a theme click on the "Upload theme" button in the top right corner. Once you have found a theme that you like, click on " Install theme ".

Install a ghost theme from local computer

Step 6: Once the theme has been installed, click on "Activate" to make it the default theme for your blog.

2. To adjust settings in your Ghost blog

  • Log in to your Ghost Admin dashboard.
  • Click on the " Settings " tab.
  • Select the setting you want to adjust from the left-hand menu.
  • Make the desired changes to the setting.
  • Click on the " Save " button.

There are many different settings that you can adjust to customize your Ghost blog. Some of the most common settings include:

General settings: These settings include the title and description of your blog, the URL of your blog, and the language of your blog.

ghost General settings

Site title and description: These settings are used to define the title and description of your blog, which will be displayed in search engine results and other places.

Ghost CMS webSite title and description

Design settings: These settings include the theme of your blog, the logo of your blog, and the font for your blog.

Logo and cover image: These settings allow you to upload a logo and cover image for your blog.

ghost Logo and cover image settings

Navigation menu: This setting allows you to create a custom navigation menu for your blog.

ghost Navigation settings

Social media links: This setting allows you to add links to your social media profiles.

ghost Social media links settings

Code injection settings: These settings allow you to inject custom code into your blog, such as Google Analytics code or Facebook Pixel code.

ghost Code injection settings

Additional Customization Tips: Unleashing Your Creativity

In addition to changing the theme and adjusting settings, you can also customize your Ghost blog by editing the theme files directly. This is a more advanced option, and it is not recommended for beginners. However, if you are comfortable with HTML, CSS, and JavaScript, you can use this method to make more drastic changes to the look and feel of your blog.

  • Custom Theme Development: For experienced developers, Ghost offers the ability to create custom themes, providing complete control over the blog's design and functionality.
  • Theme integrations: Explore a wide range of theme integrations or plugins that extend the capabilities of your chosen theme, adding new features and enhancing the blog's functionality.
  • Code Injection: Utilize code injection techniques to implement custom CSS or JavaScript code, making precise modifications to the blog's appearance and behavior.
  • Preview your changes: Before you activate a new theme or save your settings changes, be sure to preview your changes to make sure you are happy with the way your blog looks and behaves.
  • Back up your theme files: Before you make any changes to your theme files, be sure to back them up in case you need to revert to the original theme.

By mastering the art of changing themes and adjusting settings, you can transform your Ghost blog into a visually appealing and functionally exceptional online space that teflects your brand and resonates with your audience. Embrace the power of customization and let your creativity shine through your blog. I hope this blog post has helped you learn how to change themes and adjust settings in Ghost.

Do you have any questions about how to change themes and adjust settings in Ghost? We have answers to some frequently asked questions on the topic.

What are custom settings in Ghost themes?

Custom settings are a powerful feature that allows theme developers to expose specific configuration options to site owners directly through the Ghost Admin interface. This enables users to easily customize aspects of the theme without needing to edit code.

How do I manage navigation menus in Ghost CMS?

To manage navigation menus, go to the "Navigation" section in the Ghost Admin Dashboard. Under "Navigation," you can add, remove, or rearrange menu items to structure your site's navigation according to your preferences.

What should I do if I make a mistake while editing my theme?

If you make a mistake while editing your theme, you can always revert back to the default settings. You can also try deleting the theme file and uploading it again.

You may also like it!

  • Importance of Image Optimization: How to Optimize Images for Your Ghost Blog Website
  • What is Code Injection in Ghost CMS and how to use it?
  • How to Set Up Disqus Comments on Ghost Website
  • How to Customize Portal settings in Ghost CMS

Share this :-

  • copy to clipboard

Ryan Feigenbaum

Create a Ghost Theme

A guide to setting up a dev environment for creating a custom Ghost theme with my ghost-theme-starter. Easily and quickly compile and minify CSS and JS assets, start a live reload server, and zip up your theme files.

by Ryan Feigenbaum

Share this post

In this guide, I'll show you how I set up my dev environment for creating a custom Ghost theme. The key part of this environment is Rollup , which I use to compile, bundle, and minify my JavaScript and CSS files.

My Rollup config–in addition to some other goodies like a script to start a LiveReload server and one to zip theme files–are available as a template on GitHub. The template includes the basic Handlebars files needed for a Ghost theme, Rollup, PostCSS, basic JS and CSS, along with some explanatory comments. The template builds off of the official Ghost theme Starter .

Below, I walk through the template and show how to use it.

ghost change theme

Prerequisites

This guide assumes you have a local version of Ghost installed . If you don't, the official documentation should help you get set up. You'll need some basic familiarity with the command line and a code editor like VS Code .

If you've never built a Ghost theme before, you'll want to read through the docs to understand how the template layer works. You can also look at my custom themes, Smart and Mel , or the default Ghost theme, Casper , to see real-world examples.

If you're brand new to building Ghost themes and would like more articles walking you through the basics– let me know .

Get the Template

Go to my ghost-theme-starter and click Use the template . (You can also just clone the repo directly.) This will create a copy of the template in your GitHub account. You can then clone the repo to your local machine.

Go to the directory where you installed the theme starter and install dependencies with npm install . Then, create a symlink from the theme starter to your Ghost's themes folder ( content/themes ). The symlink allows you to work on your theme in a folder that's independent of your Ghost install, yet still links to it directly. This way you can reinstall Ghost without having to worry about your theme files or upload a production version of the theme to your local install without worrying about overwriting your local development copy.

Run ghost restart so Ghost recognizes your new theme. Activate your theme and you're off to the races.

Make It Pretty

Styles live in src/css , and files are organized into a 7-1 architecture . While the 7-1 architecture was originally made popular with SASS, it's used here with several plain CSS files split across seven categories with one main app.css file. I find that CSS has evolved enough with custom properties and PostCSS that SASS is now unnecessary and sometimes more of a burden than a convenience.

Use the command npm run dev to watch for changes in src/css , compile your CSS, and provide a sourcemap, so when you inspect your styles in the dev console, you'll see the exact file and line of code responsible for breaking your design.

In production, initiated with npm run zip , stylelint will lint your CSS, automatically ordering properties according to a recess logic. CSS will be autoprefixed and polyfilled with postcss-preset-env (like a Babel for CSS). One example of this polyfill is automatically writing fallbacks for custom properties. Finally, the CSS is minified and optimized with cssnano . It's just up to you to ship those styles 🛳️.

ghost change theme

Put It to Work

Every KB counts

For JS, the story's the same. Rollup compiles your JS files in src/js . What's different here is that there are two different output bundles: app.js and post.js . App.js is loaded globally on every page, whereas post.js is only loaded on posts and pages. The thinking here is that you likely have scripts that are only needed on posts and pages (like responsive embeds) that aren't needed on index pages, so you can reduce your homepage's bundle size by excluding this code from the app's main JS file.

Babel is also active to help compatibility across browsers along with a handful of other Rollup plugins to make it easier to work with next-gen JS and third-party libraries.

Reload It Like It's Hot

Rollup has a built-in ability to watch your files and compile them when you save edits. The problem is those changes won't show up in your browser without a hard refresh.

The theme starter template uses a custom implementation of LiveReload to automatically refresh your browser whenever you make changes to your CSS or JS. This makes it easy to see your changes in real-time, without having to lift a finger.

This reloading is limited to JS and CSS changes and not to Handlebars files. If you make a change to a template file, you're stuck having to reload the browser. (It may be possible to tell LiveReload to watch for changes to .hbs files, too, but I haven't got it to work yet.) You also need to restart your Ghost instance if you add a new template file altogether.

Zip, Zip, and Away

The final piece of this puzzle is a custom script for zipping your files up into a file that is suitable to upload to Ghost. If you add new template files, you'll need to adjust zip.js to include them.

It's also possible, instead of zipping your files and uploading yourself, to just use Ghost's Github action , which will automatically deploy your theme whenever you push a change to your repo's main remote branch.

The ghost-theme-starter will set you up with a great working environment to build your next Ghost theme. Try it out and let me know what you think.

Read this next

Add a table of contents to your website.

Ever on a long article and wished you could jump around easily? Or even return to a section quickly? Want to provide this experience to your readers? I'll show you how you can quickly and easily add a table of contents to your website with a few lines of JavaScript.

When Worlds Collide: Philosophy & Code

In my former life, I investigated the code of life — in my present, I bring code to life. I talk about this transition with RedMonk's Kate Holterhoff on her show, The Docs Are In

Make Sharing Seamless with This Customizable Share Button

Simplify the sharing process with this all-in-one share button, a custom web component that makes it easy for you and your readers to send content all over the internet.

Create a music player with the YouTube iframe API

Discover how to enhance your website with a personalized music player using the YouTube iframe API. This guide showcases how to fetch the latest YouTube Music playlists, craft a bespoke UI, and provide real-time track updates.

Build and Deploy with GitHub Actions

Let the machines take the wheel with GitHub Actions. Push an update to your Ghost theme and then see it automatically built and deployed, anywhere and everywhere.

Custom Pagination in Ghost

Page by page: The complete code for building a beautiful custom pagination element in Ghost.

How to Change a Ghost Theme Font Using Google Fonts

In this new tutorial, I will show you how to change a Ghost theme’s font using a Google Fonts font with CSS. The following is an example of using the Encode Sans font to change the body and the logo font. You can use the same way to change the font of any element.

In your Ghost admin, using the Code Injection Site Header section, embed the font code from Google Fonts and then assign the font to the body with CSS. Depending on how the theme is developed, this will change the overall theme font.

Code Inection Site Header section code to Change a Font in Ghost Theme

Change the Font of a Specific Element

If you want to change the font of a specific element, you can use the browser development tools to get the element’s class name. You can use Google Chrome DevTools in the Chrome browser.

Open the DevTools by right-clicking an element on the page, and choosing Inspect ; the Elements panel will open. Also, you can press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)

Google Chrome Dev Tools Inspect

Then, you can get the element CSS selector class, in our case, the logo class .c-logo__link , and you can assign the new font to it as follows.

If you want to set the font size for an element, you can use the CSS font-size property to do that. For example, to set the font family and font size for the previous example, you can do something like the following.

Latest Ghost Themes

Hakone — The Ghost Theme that Showcases Your Content

CSS changes don't seem to be updating

I’m currently working on customizing the base Casper theme (v 2.10.3).

Any changes I make to .hbs files update live in the browser, but any changes I make to the CSS files aren’t upadating, even if I stop and start ghost. Is there something I’m missing that needs to be done to build the CSS files?

:wave:

Hey @DavidDarnes , you’re totally right, I missed that. Thanks!

:sparkles:

We’ve recently added a tutorial on how to use Gulp with Ghost themes. Gulp is the tool we use to help with compiling our CSS and JavaScript in themes such as Casper. The following tutorial explains how you can use it when editing Ghost themes and how to use it yourself from scratch:

This link seems to be dead. Can you point out to the correct link if the tutorial still exists?

You only need to run npm install once to download the necessary dependencies in each theme. After that, just run npm run zip whenever you’re making stylistic changes and want to upload a new version of your theme. All that’s left to do now is to upload the zip file in Ghost Admin. Refresh your site and voilà – your changes are active!

So do I understand correctly that there is no real-time way to see the changes you make to your css file in your local environment at your http://localhost:2368/ ? In fact, I can not even gulp and see the changes locally. I actually have to create a zip file and upload it from the portal (again running locally) for each small change I make?

This does not make any sense if this is really how local development or small code editing works. I must be missing something here.

You can absolutely see changes live. Run ‘gulp’ (not ‘gulp zip’) within the theme folder and it’ll live update. (You’ll still need to reload the page in the browser.

I do it all the time on my local dev install. Works great.

Thank you for your swift response. I will do that. Appreciated!

:slight_smile:

Thanks for the heads up, the URL must have changed since I posted it. Updated now

I have gulp running in my theme and can’t see any change on browser reload. only the structural changes within *.hbs, but csswatcher doesn’t seem to work at all. it only works when I run

sass sass/app.scss ../assets/css/app.css sass sass/post.scss ../assets/css/post.css

Post the gulpfile? Sounds like it isn’t set up quite right for how you’re developing

I never used Gulp before. but it is running without error. I thought paths could be a problem but when I change them gulp throws errors.

Bildschirmfoto 2023-02-09 um 13.05.33

Does this match where the css file you’re editing lives?

it did not. good eyey - thank you! but unfort. this did not change anything. still does not work. :-/

I now go with npm run watch.

Related Topics

Curie Documentation

Curie theme documentation, covering theme installation, routes setup, custom settings, theme development and more. Last update: Sep 5, 2023

Curie v 1.1.0 for Ghost 5 .x

Compatible Ghost version: v5.9 or any newer version.

Starting with theme version v1.0.3 you need Ghost v5.54.1 or later.

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 and then click Upload theme and s elect the curie.zip file.
  • After the upload is complete click Activate

Routes Setup

For the theme to function properly you must upload the  routes.yaml file.

Follow the steps below to upload the routes.yaml file (The file is located inside the zip)

  • Go to Settings > Labs .
  • Click on Upload routes YAML button and select the file from the root directory of the theme.

Ghost routes.yaml

The routing file defines the following custom pages and collection:

  • / - the homepage and main collection
  • /membership/ - the custom membership page
  • /account/ - the custom account page
  • /signup/ - the custom sign up page
  • /signin/ - the custom sign in page

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 ( 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
  • Color scheme - set the default color scheme (system, light, dark)
  • Font family - select from a predefined list of font families or use system fonts
  • Styled header nav items - set the number of styled header nav item(none, last item, last two items)
  • Use portal links - set your signin, signup, and membership links to use the portal or custom pages
  • Dark theme logo - upload the site logo for the dark version of the theme
  • Hero headline - set the hero headline
  • Hero description - set the hero description
  • Hero button text - set the hero button text
  • Hero button link - set the hero button link
  • Hero image style - set the hero image style (hidden, background, side, bottom)
  • Filter tag slugs - set the tags for the category filter
  • Post feed style - set the preferred post feed style(timeline, grid, list, full-articles)
  • Post card image aspect ratio - set the post card image aspect ratio( 16/9 , 4/3 , 1/1 , 3/4 , auto , hidden )

The homepage is defined in the index.hbs file and includes a hero section and a post feed (besides the default header and footer elements)

The hero section is completely customizable from Settings > Design > Homepage , with the following options:

Hero headline

  • the hero section title
  • the title can highlight specific words by using <span> elements, for example:

Hero description

  • the hero section description
  • here you can also use HTML elements like links, bold text, etc:

Hero button text

  • the hero section button text
  • if you leave this option empty there will be no button

Hero button link

  • the hero section button link
  • you can set a custom link to go with your button text
  • the default option is subscribe-form , with this option you get the Ghost subscribe form for collections email addresses

Hero image style

  • the hero section image style
  • the image can be hidden or displayed on the right side, below the title and description or in the background

Category select

Add the tag slugs you want to appear in the dropdown (separated by commas and no spaces, no comma after the last item)

Do NOT use the tag names, but the tag slugs.

You can find the slug of a tag in your Admin > Tags, opening a specific tag and check the Slug field.

Example from the demo:

The post feed displays the articles ordered by the published date. The layout and design of the post feed can be set from Settings > Design > Homepage > Post feed style with the following options:

  • timeline-with-content - articles as a timeline including the post content. Demo ->
  • timeline - articles as a timeline but without the content. Demo ->
  • list - articles as a list. Demo ->
  • grid - articles as a grid. Demo 1 -> & Demo 2 ->
  • full-articles - articles displayed one after the other with the content. Demo ->

The post card markup is defined in partials/post-card.hbs and partials/post-card-timeline-content.hbs . The post card image aspect ratio can be changed from Settings > Design > Homepage > Post card image aspect ratio with the following option:

  • 16/9 aspect ratio
  • 4/3 aspect ratio
  • 1/1 aspect ratio
  • 3/4 aspect ratio
  • auto - the uploaded image aspect ratio will be respected
  • hidden - image will not be displayed

Styled nav items

By default, the header will display all the navigation elements you define in Settings > Navigation > Primary Navigation . With the styled nav items you can add different styles to a number of header items.

From Settings > Design > Site-wide > Styled header nav items you can set the following options:

Last nav item

Navigation dropdown

Curie 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

Curie dropdown menu setup

Search button

To add the search button in the header section, you just have to add an entry under Settings > Navigation ( /ghost/#/settings/navigation ):

  • The label can be: "Search 🔎"
  • And the link must be: #/search

For more details check the official Ghost manual

Announcement

While this feature was implemented, Ghost has released its own announcement bar feature, but this one can still be used alongside the native feature.

To create the announcement bar that comes with the theme, follow the steps below:

  • Go to Admin > Pages and create a new page
  • Add the internal tag #announce to the page (must start with # and the slug has to be hash-announce )
  • The title and excerpt of the page will be displayed next
  • Set the Canonical URL to the URL where the announcement should point ( Page settings > Meta data > Canonical URL )
  • (optional) Add a public tag which will be displayed at the start of the announcement bar

Curie announcement setup

The theme announcement, when set up, will be displayed on every page, and regardless of member status.

To create the CTA section above the footer, follow the steps below:

  • Add the internal tag #cta to the page (must start with # and the slug has to be hash-cta )
  • Set the title and excerpt of the page which will be used as the title and description of the CTA
  • Set the Meta description from Page settings > Meta data > Meta description for the CTA button
  • Set the Canonical URL to the URL where the CTA button should point ( Page settings > Meta data > Canonical URL )
  • (Optional) Upload a feature image.

Curie CTA setup

The CTA section, when set up, will be displayed on every page, and regardless of member status.

Custom Pages

As explained in the routes setup , the theme comes with a couple of custom pages, to activate these pages, there are some actions you have to take.

Uploading the routes.yaml file is a key requirement for these custom pages.

By default, that is the only requirement, but if you want even more control over the pages then you should activate the data property ( remove the # symbol in front of the data property in the routes.yaml file ) and create the page with the correct slug.

To create a Page:

  • Go to Pages ( yoursite.com/ghost/#/pages/ )
  • Click New page and set the Title and Page URL
  • Finally, click Publish

The data property can be used to make templates dynamic that otherwise would be static.

Defined by the membership.hbs template, renders all tiers with price and benefits.

The membership tier names, prices, and benefits can all be changed in the Admin, by going to Settings > Membership ( /ghost/#/settings/members ). Edit existing tiers or add new ones under the Membership Tiers section.

If you want to control the meta properties for this page, you have to activate the data property, by removing the # symbol in the routes.yaml file.

If you activated the data property, you also have to create the page with the membership slug.

Defined by the signup.hbs template.

If you activated the data property, you also have to create the page with the signup slug. Additionally, the feature image of this page will appear on the side.

Defined by the signin.hbs template.

If you activated the data property, you also have to create the page with the signin slug. Additionally, the feature image of this page will appear on the side.

Defined by the account.hbs template.

If you activated the data property, you also have to create the page with the account slug.

Custom templates

The default post layout is defined by the post.hbs template and the default page layout is defined by the page.hbs template.

The theme comes with several custom templates , which can be selected for individual posts from the Post Settings menu.

Custom templates:

  • custom-with-narrow-image.hbs - simple template with a narrow feature image
  • custom-with-wide-image.hbs - simple template with a wide feature image
  • custom-with-toc.hbs - a template that includes a table of contents on the left side

If you want to edit the templates these are in the root directory of the theme.

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 light and dark color schemes (and system), the default one can be set in the admin using the Default color scheme in Settings > Design > Site-Wide .

The included color schemes:

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:

To change the dark theme:

Some useful tools for choosing colors and gradients:

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

You can even define your color schemes, but that would require changing the theme files. Steps to define new color schemes:

  • Change the package.json file, adding a new option under the color_scheme property.
  • Add the new color scheme to the dropdown editing the partials/color-scheme-dropdown.hbs
  • Add the CSS, either in code injection (using the previous code blocks as a template) or in the CSS files.

For example, here's a purple accent color configuration:

Similar configuration for the dark theme:

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.

By default, this is set to 8 , and you can change it in the package.json file:

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.

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

The theme also comes with the lazysizes library for lazyloading images, to improve performance.

When it comes to aspect ratios, the post card images can have different format, based on your design settings, the default value being 16/9 .

The aspect ratio in the post layouts differs based on the template used and device size.

Syntax Highlighting

The theme comes with prism.js integration by default, to activate syntax highlighting just add the internal tag #syntax-highlight to your post.

Why is this necessary? In short, for performance. To avoid loading the library when it's not necessary. If you don't add the tag, the library will not load at all.

If you are someone who shares code regularly and wants to have the plugin on all your posts, without having to add the tag, you can do so by changing the partials/syntax-highlight.hbs file. Simply remove the condition checking for the tag.

Additionally, in this partial file, it's defined which version of the prism library is loaded as well as the components, languages, and theme. So you can easily customize it, add new languages, or a different code highlighting the theme without having to go into theme development.

Table of Contents

The Table of contents is generated using the TocBot library and this is integrated into the theme by default. There is a custom template that includes the ToC functionality.

You can set the Toc template for each Post individually from the Post Settings > Template.

If you want to make changes to the ToC layout or the TocBot library configuration, you can edit the partials/toc.hbs file.

Curie comes with the native comment feature that Ghost offers. The Native Comment System requires at least Ghost v5.9.0, you have to enable it from Settings > Membership > Commenting .

By default, native comments are not active, so you have to select either All members or Paid-members only

Google Fonts

You can set the font family from the Admin section, going to Settings > Design > Site-wide and under Font family select one of the options.

The theme comes with the following options:

  • System font - loads the system font (no requests to Google Fonts)
  • Figtree - Figtree for headings and body font
  • Outfit - Outfit for both headings and body font
  • Manrope - Manrope for headings and body font
  • Space Grotesk - Space Grotesk for headings and body font
  • Inter - Inter for headings and body font
  • Hepta Slab - Hepta Slab for headings and body font
  • Podkova - Podkova for headings and body font
  • Fira Code - Fira Code for headings and body font

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 .

The icons used in the theme are from Tabler Icons , the library consists of 4000+ icons. Not all icons from the library are included to save on the file size, but the most common icons are included in the partials/icons directory.

Inside the partials/icons directory, you can find all included icons, 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:

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:

Social links

Social links are shown in the footer and by default, the theme comes with:

  • Facebook (Settings > General > Social accounts)
  • Twitter (Settings > General > Social accounts)

To add other links you need to edit the partials/social-links.hbs file. There are several other links in there already, you just have to uncomment the relevant parts and add your link in the href attribute.

Social sharing

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

  • 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 )

For a translation to apply, you have to set the language in Settings > General > Publication language .

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

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 develop your components, the theme comes with a developer-friendly setup. You can take advantage of the Gulp tasks that are set up for compiling Javascript and PostCSS .

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

Follow the official guide for installing Ghost locally . After you have installed Ghost and put the theme directory inside the content/themes/ directory, run the following commands in the theme directory:

This will install all the dependencies for the theme

This will compile PostCSS and javascript and will watch for changes. So when you edit a .hbs , .css or .js file the change will trigger the gulp watch task and this will compile the assets whenever you change a file.

If you want to compile just CSS:

If you want to compile just JS:

Code Snippets

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

How to hide the primary navigation from the footer?

Go to the Admin, Settings > Code Injections and in the Site Header add:

How to hide color scheme dropdown?

How to hide "published with" part from the footer, how to hide the hero section on the homepage.

Don't hesitate to reach out if you need help or have any suggestions.

Contact - Feedback

Get the best managed Ghost CMS hosting and focus on bringing value to your audience.

Ghost Machine: Behind the Comic Industry's Biggest Shake-Up in Years

Why some of the biggest names in the industry are making the jump to creator-owned comics..

Jesse Schedeen Avatar

30 years ago, an upstart publisher named Image Comics made history when a group of top-selling Marvel artists opted to make the jump to creator-owned comics. It was a game-changing moment for the industry, proving there was real opportunity outside the familiar, corporate-controlled world of Marvel and DC and paving the way for modern best-sellers like The Walking Dead and Saga. And now Image is behind another major creative shake-up, as former DC Chief Creative Officer Geoff Johns and a murderer's row of creative talent spearhead a new publisher called Ghost Machine.

What is Ghost Machine, and why is it one of the most significant developments in the industry since the original formation of Image? To learn more, IGN spoke to Johns and many of the other creators behind this new venture. Read on to learn more about this ambitious undertaking.

Ghost Machine #1 Cover Art Gallery

Click through to see all the covers for Ghost Machine #1.

What Is Ghost Machine?

Ghost Machine is perhaps best compared to Robert Kirkman and David Alpert’s Skybound Entertainment. More than just an imprint of Image Comics, it’s a full-fledged publishing company centered around creator-owned comics. Ghost Machine’s founders include some of the biggest names in the industry, including Johns, Jason Fabok, Gary Frank, Bryan Hitch, Lamont Magee Francis Manapul, Brad Meltzer, Peter Snejbjerg, Peter Tomasi and Maytal Zchut. These creators will be exclusive to Ghost Machine going forward, meaning fans won’t be seeing more work from the likes of Hitch, Frank and Fabok in the Marvel or DC Universes for the foreseeable future.

The creation of Ghost Machine brings to mind the initial formation of Image Comics in 1992. At the time, artists like Todd McFarlane, Rob Liefeld and Jim Lee were breaking industry sales records on books like Spider-Man and X-Men, but they opted to leave the safe harbor of Marvel Comics to focus on spearheading their own publishing company. Image Comics quickly thrived and weathered the storm caused by the industry crash of the mid-’90s, and has now become the home for a new generation of creators looking to make a living telling their own stories.

“We had done so much stuff at DC and enjoyed all of it, had a lot of fun and we're really proud of the work we did there and it was fantastic, but we just felt like we wanted to do something new and creator-owned,” Johns tells IGN. “[Publisher] Eric Stephenson at Image had been asking me for a long time if I'd be interested in doing something over there, and I always was inspired by Image. I grew up with Image, like Spawn and Savage Dragon and all those books and the excitement of that. Image really held a special place in my heart, and I know all the other creators felt the same.”

Johns and Frank initially tested the creator-owned waters with 2021’s Geiger, a limited series set in a post-apocalyptic US. At the time, Geiger was published under Johns’ Mad Ghost Productions banner. After the initial success of Geiger, Johns and Frank began meeting with other creators and brainstorming a much larger creator-owned venture. That’s how Ghost Machine was born.

“The conversation started probably about two years ago, and then the last year or year and a half is when we really got serious about building it and everybody came on board and we spent a lot of time going through every aspect of what the business would look like, how it would work,” Johns says. “We've all got a lot of experience in all types of businesses, publishing and media and games and merchandise. We've all touched these different businesses and so bringing all that experience together and that passion together and working with people to build a business plan that made a lot of sense and also was an evolution of other creator-owned initiatives. It was really the first of its kind.”

“Especially as an artist, I feel like a lot of comic books is every man for themselves in a way,” Fabok says. “And one of the things that I know that Gary could probably attest to with working with Geoff is Geoff is all about collaboration. Coming together, each person has their strengths and so let's play to those strengths. Let's work as a team. And one of the things that's really great about Ghost Machine and what we've accomplished here with building this group of people that are working on these books is we found that true.”

“You want collaboration with the people you respect and trust, but also with creative freedom,” adds Johns. “You need control. You need business control too. You can't have true creative control without business control, which is something that I think we learned over the course of our careers, and why Ghost Machine exists. It’s because it's something as simple as we want to be able to say when the books are coming out because we're ready. We want to be able to say how many pages a story is. We want to be able to pick the highest paper quality and cardstock covers and - it's more expensive? Well, we're okay with that. We want the best quality for these books.”

Ghost Machine features several interconnected comic book series, but the company isn’t built around a single shared universe akin to Marvel or DC. Rather, the initial lineup of books is divided into four distinct universes - the Unnamed Universe, the Rook: Exodus Universe, the Family Odysseys Universe and the Hyde Street Universe. These four universes are introduced in the pages of the introductory special Ghost Machine #1, which is in stores now. As the founders explain, there was initial talk of focusing on one shared universe, but it ultimately made more sense not to pigeonhole the books.

“There's little opportunities to play and have fun with the fact that we're creating this universe and these characters and put them all together and have them interact. And maybe people would speculate if this took place in this universe,” Fabok says. “But I think in the end, we discussed from the beginning that we wanted to tell the best stories possible. And so if that story could fit in with let's say the Unnamed Universe, then let's do it. That would be great, but maybe it doesn't fit in with anything, so why shoehorn it in? Let's just make it its own thing and go with it. We've done that with our books at DC. Three Jokers is in continuity, but it takes place out of continuity at the same time. So we could just tell the story that we wanted to tell.”

“When we were creating these books, it was like, okay, well the story of Redcoat and Geiger, they do interact and intersect in the terms of this historical timeline that is The Unnamed, these mythical American-based heroes like Paul Bunyan and John Henry and where you've just never heard their legends and their myths told, and that's what this is sprung from,” Johns says. “Whereas Rook is totally different, it's not just about continuity, but it's about tone. Rook is a sci-fi, sprawling sci-fi nature versus technology story about this guy that's reconciling his own self in life in this big world. And then you've got Family Odysseys with Rocketfellers and Hornsby and Halo that's very family-based sci-fi… And then Hyde Street is horror. So everything's really based on tone, and that's why we set out with Ghost Machine #1 to have these four separate sections, four separate universes, to allow the books and the characters to just be what they can be to the best they can be. And again, all that said, we're part of the same company, so we can do whatever we want ultimately with these characters and their interactions.”

Ghost Machine April 2024 Launch Titles

Click through to see the titles included in Ghost Machine's initial April 2024 lineup.

Geiger and Redcoat: The Unnamed Universe

The Unnamed Universe is the only one out of these four that was established prior to the announcement of Ghost Machine. 2021’s Geiger introduces a near-future version of the US ravaged by nuclear war. In this Mad Max-esque landscape, a wandering hero named Tariq Geiger (known to most as “The Glowing Man”) is all that remains to defend the innocent from scavengers, Las Vegas’ warlords and the ruthless remnants of the US government. Despite this being a continuing story, Johns reassures readers that the new volume will be readily accessible to newcomers.

“Obviously, there's only been a handful of Geiger issues beforehand, so it's going to be new reader-friendly no matter what, but you meet the Glowing Man, the legendary, mythic, Glowing Man as he's on a trek to do what he does,” Johns says. “He's not looking for trouble, but when trouble finds him, he has no problem taking care of it. He's a man caught between a life of peace and a life of violence. And I think that's his internal struggle - in a world that's so toxic, does he have to be toxic back? That's really where the book starts and there's a character that he interacts with that leads him on a new quest by the end of the first issue, which we won't spoil, but we tease a little bit in Ghost Machine #1.”

ghost change theme

As Frank explains, as much as Geiger is steeped in post-apocalyptic sci-fi elements, the series actually leans heaviest on another popular American genre - the Western.

“When we started the first series, we were touching on the things which were going to influence it. And we kept coming back to Westerns,” Frank says. “We talked a lot about True Grit, Rooster Cogburn and everything, that figure that was very much where the story was. So the Western influence is very strong. Although it's ostensibly a sci-fi thing and it’s set in the future, we are always coming back to that. That's like a visual touchstone, but everything's peppered with remnants of technology. So it's the old West, but with just the fossilized remains of civilization under the surface.”

Geiger is still a new story starring a protagonist who’s only begun to reveal his layers. And for Johns, that’s what makes this project so exciting - the freedom to paint on a broad, blank canvas.

“I love, obviously, Batman and Green Lantern and all the characters that we've all worked on forever, but there's so much to them, so many versions, so much history, so much everything,” Johns says. “And there's a lot of it. You know Batman's going to fight the Joker and the best you can do - Jay and I - hope to tackle something new through that with the Red Hood and Barbara and Bruce and scars and trauma and all that. You hope to tackle something new emotionally. This is new on every single level, and I think that that's made it feel so different for me. It's not straight superheroes, it's just stories and characters. And it's coming from a very personal place for each one of us, because all these ideas started with a conversation just about life. And then we do the fun stuff we always do is we take that initial spark and we make it into something visually spectacular and hopefully emotionally very engaging and intriguing and surprising and shocking and all the things great stories do.”

The Unnamed Universe is built around a group of characters called the Unnamed - mythical figures from throughout US history whose deeds become legend. That lineup includes both familiar American folk heroes like Johnny Appleseed, Davy Crockett and Annie Oakley as well as original creations like Geiger and the robotic soldier Junkyard Joe. Ghost Machine #1 introduces another member of the latter category, the immortal mercenary Redcoat. Redcoat is a collaboration between Johns and Hitch, and Johns reveals that the character Simon Pure is very directly influenced by Hitch himself.

“The actual character, Simon Pure, his personality is a hundred percent from Bryan, just talking to Bryan Hitch and Gary and Jay will, when they see Simon, they'll hear Bryan's voice in him so much. We all know Bryan so well at this point. And it really developed from just a point of it's both sincere about how crazy life is and also the ridiculous of how crazy life is. But it came from a conversation he had about just - will I ever learn from my mistakes? And we started talking about just how long would it take for someone to actually learn to change? And if you live 300 years, would you change?”

ghost change theme

“History has been a subject of interest for me for a very long time,” Hitch says. “It’s not just the fascinations of places, people and worlds we don’t live in anymore (my own childhood in the 70’s feels like a period drama now) but how we use that to build amazing, rich and immersive worlds to drop characters into for adventures. Film and TV have been doing that for a long time. I was as hooked by the works of Conan-Doyle and Burroughs as I was Siegel and Shuster. Periods of history, past, alternative or imagined, speculative futures are always a terrific playground anyway. Dropping an Englishman into all that alternative American magical mythology is just rife with great opportunity.”

That said, Hitch assures readers that Redcoat is anything but a dry, grounded account of American history.

“We’re not making an historical documentary here anymore than Spielberg was with Indy or the Pirates of the Caribbean movie was. It’s character-led, action-adventure all the way and I can bring all my long-practiced world-building and rich detail to try and build something fresh and exciting.”

The final pillar of the Unnamed Universe is First Ghost, a supernatural thriller written by Meltzer and set in a present-day, pre-apocalypse White House. Johns promises that the series has an important part to play in fleshing out the scope of the Unnamed Universe.

“I can only say that Brad and I have been working on that for a long time, and we can't really say much more about it except that the president we introduced in Ghost Machine #1 does factor in heavily to the mythology of the Unnamed.”

The Rook: Exodus Universe

Rook: Exodus serves as the long-awaited reunion between Johns and Fabok following their DC collaborations like Justice League: The Darkseid War and Batman: Three Jokers. The series is set on an alien world in the far future where a group of characters called Wardens wear helmets that allow them to control animal life. The main character, Rook, controls birds, and he faces a choice between finding a way off of his dying planet or staying and fighting to save it.

“I was so blown away by Geiger and I loved that series, and it really got me excited about the possibilities of what could be accomplished with brand-new books and brand-new characters,” Fabok says. “Geoff and I really started to talk about that and we were really getting excited about things like the original Image Comics launch with Spawn and Savage Dragon and Wildcats and all the Extreme Studio stuff and just how exciting that time period was.”

Fabok continues, “I was barely even reading comics at that time, but seeing the excitement of that through Wizard Magazine and all this stuff, as I was growing older, I really yearned for, I wanted to be a part of something like that. And so as we were talking about ideas, Rook was one of these characters that I had been drawing for years and years and years, and I pitched something to Geoff and he said, ‘Well, let me go and think about this.’ And he came back the next day and had just this whole universe laid out and this great hook with these helmets and these characters, and you really know when you've landed on something when you're just brainstorming and just everything you're throwing out just sounds so awesome. And you're like, ‘Write that down. Write that character down.’”

ghost change theme

If Geiger is particularly inspired by classic Westerns like True Grit, then Rook: Exodus shares an equally unexpected influence - ‘80s cartoons. Fabok points specifically to He-Man and the Masters of the Universe as a major source of inspiration for the series.

“Rook feels, in our minds, it feels like a Saturday morning cartoon from the ‘80s in a lot of ways,” Fabok says. “You've got people with helmets that look like animals. It's a little on the nose, it's a little, if you went too far one way, it could be really cheesy. So there's got to be a balance, but at the same time, you got to embrace some of that stuff too.”

Fabok continues, “We're both big He-Man fans, and He-Man just wore it on the sleeve. It was a guy literally called Fist-O, who has a giant fist, right? It's Ram-Man and Mer-Man, and it's right there in your face. And so originally I wanted the designs to be way more subtle, but then after a while it's like, okay, if the character is a giant bear, let's make a guy with a bear helmet. Let's make the guy look like a giant bear mixed with a warrior viking mixed with a little bit of sci-fi, and create a visual language out of that.”

Johns adds, “It does have the fun of maybe an ‘80s cartoon, but it also has, I think, the emotional weight of comics and storytelling today and the individual personal inspiration of our connection with animals and what that is. And then it's wrapped up in a gorgeous, insane, both very organic world and very technology-based world, which was by design. We really wanted a world to have a lot of trees and a lot of forests and it had cities and it had vehicles and it has tech, but there's a lot of unexplored territory, lush territory throughout Exodus that's important to have. We wanted it to feel like it was on our planet as much as we could.”

The Family Odysseys Universe

The third Ghost Machine universe is a significant departure from the first two. Family Odysseys is much more all-ages in tone than the bleak worlds of Geiger and Rook: Exodus. This universe will initially consist of two books - The Rocketfeller Family (written by Tomasi and drawn by Manapul) and Hornsby and Halo (written by Tomasi and drawn by Snejbjerg).

“I often seek variety in the type of books I work on and the Rocketfellers came out of a desire to tell stories about family,” says Manapul. “So, when Pete and I started talking about what kinda book we'd like to collaborate on (knowing Pete's back catalogue) creating something like The Rocketfellers came naturally. I also think the audience for these types of stories have been underserved, we're hoping to change all that.”

ghost change theme

Manapul continues, “The Rocketfellers are inspired by people much closer to Pete and I, and are plucked from the non-fictional world of our lives. I love the way my kids approach the world with such wonder and that was something I wanted to capture in our book. Pete and I are also crafting the story to work on multiple levels so they can be enjoyed by both the parents and their kids. Even if you don't have kids I think you'll enjoy the adventures we have in store for this time-displaced family.”

“I think just Pete has done such great work on Superman and Super Sons and Batman and Robin - that family dynamic, father and son, he really loves it,” Johns says. “And Francis' art obviously is gorgeous, but Pete's diving into the Rocketfellers and Hornsby and Halo, and they explore families, they explore the family dynamics, and again, there's a little nostalgia, a little throwback to Hanna-Barbera and Pixar, but yet firmly rooted in modern-day storytelling and sensibilities. Even the Rocketfeller stories, I love that it was all about the time people spend on screens individually as opposed to a family. I love the ending of that story, that ending where he says, ‘At least we're all watching the same screen.’ I love that story. So it's such a great story and it's told so efficiently, but to me, and it only could be told with the Rocketfellers, but yet it's entirely relatable to everybody that has anyone in their life and hangs out.”

The Hyde Street Universe

The fourth Ghost Machine universe may just be the darkest of the bunch. Hyde Street is a full-blown horror universe that centers around the titular supernatural street. As Reis teases, “There are endless possibilities with Hyde Street. In every city in the world, there is its own version of Hyde Street with its stories and universe interconnected . Anything can and will happen on Hyde Street... even in the Hyde Street of your town.”

ghost change theme

Hyde Street marks a return to horror for Reis, who made his debut working on horror comics and famously collaborated with Johns on 2009’s “DC meets zombies” crossover Blackest Night. For Reis, Hyde Street offers a welcome opportunity to return to his roots as an artist.

“With Blackest Night, I had to restrain myself because it was also about a superhero story, so it was important to maintain a balance between the two genres,” Reis says. “Today, I am an artist with more experience and Hyde Street is something that is liberating and challenging. It's a blend of horror, suspense, and fantasy. It's like The Twilight Zone with Blackest Night, but without worrying about the superhero. I'm really excited.”

Readers can get a taste of all four universes in the pages of Ghost Machine #1, which is in stores now. Geiger #1, Redcoat #1 and Rook: Exodus #1 will all debut in April, with more Ghost Machine series to follow over the course of 2024.

In other comic book news, IDW has revealed the star-studded creative lineup behind the TMNT relaunch , and Skybound has revealed a dramatically different origin story for Cobra Commander . And be sure to check out IGN's most anticipated comics of 2024 .

Jesse is a mild-mannered staff writer for IGN. Allow him to lend a machete to your intellectual thicket by following @jschedeen on Twitter .

In This Article

Geiger [2024 - Current]

IGN Recommends

Florida Joker Ditches GTA 6 Lawsuit Threat, Asks Rockstar to Let Him Voice the Character Instead

Will A Stronger Xbox Rise From the Ashes?

Halo Season 2 Episodes 1-4 Review

IMAGES

  1. 20+ Best Free Ghost Themes 2020

    ghost change theme

  2. 33 Best Free Ghost Themes With Simplicity In Mind 2020

    ghost change theme

  3. 20+ Best Free Ghost Themes 2022

    ghost change theme

  4. Ghost Theme Development

    ghost change theme

  5. 20+ Best Free Ghost Themes 2022

    ghost change theme

  6. 20 Best Free Ghost Themes With Simplicity In Mind 2023

    ghost change theme

VIDEO

  1. We need to change theme

  2. POV:-GHOST VS SINGLE BOY 🤣 ll ghost prank #ghost #funny #shorts

  3. GHOST SONG pt2

  4. Ghost // Original Special Music

  5. The New Musical Ghost

  6. To Be a Ghost

COMMENTS

  1. How To Change Themes and Adjust Settings in Ghost

    Open your web browser and navigate to the general settings page: <pre> <span class="highlight">your_domain_name</span>/ghost/settings/general </pre> Scroll down to the bottom and you will see a "Theme" area. Change the theme to "N-Coded": Click the "Save" button in the upper right corner. Navigate to your blog to see the new theme:

  2. Installing a theme

    Official Ghost themes Your new Ghost publication will be installed with one of our free official themes. Changing a theme can be done directly from within the Ghost admin. To install a new official theme, head to the Settings → Site → Design and branding area, and click Customize.

  3. Download and upload a Ghost theme

    Click Installed. (If you haven't installed the theme you want to download, do that first.) Click the overflow menu ( ...) and then Download. A copy of the theme will be downloaded to your computer 🥳 Upload a theme in Ghost Admin ⚠️ Making changes to CSS and JS files likely requires rebuilding those assets before uploading the theme.

  4. Custom settings are the ultimate power-up for themes

    The following guide will walk you through everything you need to know to make the most of custom settings in your Ghost theme. An overview of custom settings Use custom settings to create different possibilities for your theme — possibilities that users can configure right from Ghost Admin.

  5. ️ Build with Ghost: First steps for creating a custom theme

    🏗️ Build with Ghost: First steps for creating a custom theme Tutorials → Newsletter • 5 min read 🏗️ Build with Ghost: First steps for creating a custom theme Unleash your creativity with Issue #5. Learn to install Node and Ghost for custom themes, stay ahead with 2023's graphic design trends, and explore top tools with Liz Rowe.

  6. Customizing your Ghost site even further

    Some of the most common things publishers do when they customize their theme include: Creating a custom homepage, to include custom marketing copy and styles, or edit the default index of posts that appear on the home page. Create custom post templates that can be reused on multiple posts or pages.

  7. How to use custom settings in Ghost themes

    Custom theme settings are a powerful tool that allows theme developers to configure custom settings that appear in Ghost Admin — making it easy for site owners to make stylistic choices without needing to edit theme files. Overview

  8. How to Build a Custom Ghost CMS Theme

    January 4, 2023 / #Projects How to Build a Custom Ghost CMS Theme Rajdeep Singh Ghost CMS is a platform specifically designed for bloggers and writers. Using Ghost, you can quickly get a blog website up and running. Ghost targets primarily writers and all the features are specifically built for writing.

  9. How to customize a ghost theme from a ghost CMS dashboard

    Open a new tab in your web browser and type the address of your Ghost website with the prefix /ghost (for example, www.yourwebsite.com/ghost ). Your login information will need to be entered. To access the dashboard, type your username and password. You may begin modifying your Ghost theme as soon as you log in!

  10. How to Customize Your Ghost Theme Using Code Editor

    Step 4: Open the Theme Folder in the Code Editor. To start customizing your Ghost theme, open the theme files in the code editor. Before opening the theme folder make a backup copy before proceeding with any modifications. You can use any code editor that you prefer, such as Visual Studio Code or Sublime Text.

  11. Customizing a Ghost Theme

    Ghost themes allow you to control any HTML, CSS, or JavaScript on a page. This gives you complete control over the design of your site. Customize your site's layout, post structure, and even when you publish. A Mindspun theme empowers you to create a unique website. Easy to Install and Set Up

  12. How To Change Ghost Theme and Adjust Settings in Ghost CMS

    1. To change the theme for your Ghost blog: Step 1: Access the Ghost Admin: Log in to your Ghost blog's admin panel using your credentials. Step 2: Navigate to Dashboard Settings: Click on the gear icon in the bottom left corner to open the Settings menu. Navigate to Dashboard Settings

  13. How to Install a Ghost Theme

    For an offline or self-hosted Ghost blog. Extract your theme zip file. Transfer the uncompressed theme folder into your blog's content/theme folder. Restart Ghost via command line. Go to Settings > General in your blog's admin panel and select your new theme. Save your settings and refresh your site.

  14. How to build a custom homepage for your Ghost theme

    Begin by opening your theme in a code editor. In the root folder, create a new file called home.hbs. Ghost recognizes home.hbs as a special file and will automatically use it as your custom homepage. Every Ghost theme has a file called default.hbs.

  15. First Five Things to Modify in Ghost's Default Theme Casper

    To do this, you need to open up a terminal window and edit a file: sudo vim /var/www/your-ghost-dir/content/themes/casper/default.hbs Look for the section near the bottom where it says Ghost. You can do a search if you like, saying /Ghost.

  16. How to customize Ghost theme files

    About Press Copyright Contact us Creators Advertise Developers Terms Privacy Policy & Safety How YouTube works Test new features NFL Sunday Ticket Press Copyright ...

  17. How to Set Up a Dev Environment for Creating a Custom Ghost Theme

    A guide to setting up a dev environment for creating a custom Ghost theme with my ghost-theme-starter. Easily and quickly compile and minify CSS and JS assets, start a live reload server, and zip up your theme files. ... If you make a change to a template file, you're stuck having to reload the browser. (It may be possible to tell LiveReload to ...

  18. How do I modify or create a theme from scratch?

    Yes, any theme developed from the Starter theme would be covered by the same license basically. And I think you're exactly right that the developers of custom themes being sold aren't using the Starter theme. (They probably have their own version of a Ghost theme 'skeleton'.) I think the license is a little unfortunate. The Starter ...

  19. Ghost CMS + GatsbyJS: How to change theme?

    I have a local dev instance of Ghost and Gatsby JS working well. I followed this starter: GitHub - TryGhost/gatsby-starter-ghost: A starter template to build lightning fast websites with Ghost & Gatsby. In Ghost if I make a content change (eg - new page/page edit/blog edit) all content changes are published correctly through to GatsbyJS. If I change the Theme within Ghost however the theme ...

  20. How to Change a Ghost Theme Font Using Google Fonts

    30 May 2020 In this new tutorial, I will show you how to change a Ghost theme's font using a Google Fonts font with CSS. The following is an example of using the Encode Sans font to change the body and the logo font. You can use the same way to change the font of any element.

  21. Best practices for how to update slightly customized theme most

    After that, anytime you push to your Ghost repo, your theme will be updated automatically! One thing I just started doing is running npm version patch before pushing to GitHub. This will update the patch version of your theme from 1.0.0 to 1.0.1, e.g. It makes it easier to see in Ghost Admin that your theme was indeed updated.

  22. CSS changes don't seem to be updating

    macreddin September 20, 2019, 3:13pm 1 I'm currently working on customizing the base Casper theme (v 2.10.3). Any changes I make to .hbs files update live in the browser, but any changes I make to the CSS files aren't upadating, even if I stop and start ghost. Is there something I'm missing that needs to be done to build the CSS files? Thanks!

  23. Curie Theme Documentation

    Click Change theme and then click Upload theme and select the curie.zip file. After the upload is complete click Activate; Routes Setup. ... Some configurations in Ghost themes can be defined in the package.json file, including Posts per page, Image sizes, and Custom settings.

  24. Build with Ghost: Email is changing in a big way

    Modern CSS is incredible, and these 5 CSS snippets have the power to change how you style your next theme. Building a portfolio? Check out 60 of the best designs from 2023. ... 💻 Build with Ghost: Themes made easy. 5 min read. 📖 4 ways to build a read-next section in Ghost. 4 min read. 🐛 How to debug your Ghost theme once and for all.

  25. Ghost Machine: Behind the Comic Industry's Biggest Shake-Up in Years

    Ghost Machine's founders include some of the biggest names in the industry, including Johns, Jason Fabok, Gary Frank, Bryan Hitch, Lamont Magee Francis Manapul, Brad Meltzer, Peter Snejbjerg ...