Customizing Your GhostCMS Theme

Erkan Doğan

— 1 min read
Customizing Your GhostCMS Theme
Photo by Tandem X Visuals / Unsplash

Introduction

One of the most powerful features of GhostCMS is its ability to customize themes. Whether you want to change the look and feel of your site or add custom functionality, GhostCMS provides a flexible and robust theming system.

Understanding Themes

GhostCMS themes are built using Handlebars templates and CSS. The theme files are located in the content/themes directory of your Ghost installation. The default theme is called casper.

Key Files

  • default.hbs: The main layout file that defines the structure of your site.
  • post.hbs: The template for individual blog posts.
  • index.hbs: The template for the home page.
  • page.hbs: The template for static pages.
  • styles/: Directory for CSS files.

Customizing the Theme

To customize your theme, you can follow these steps:

  1. Activate the Theme: Log in to the Ghost admin panel, go to Settings > Design, and select your new theme from the dropdown.

Edit Theme Files: Open the theme files in a code editor and make the desired changes. For example, to change the background color, you can edit the styles/screen.css file.

body {
  background-color: #f0f0f0;
}

Create a New Theme: Copy the default casper theme to a new directory in the content/themes directory.

cp -r content/themes/casper content/themes/my-theme

Advanced Customization

For more advanced customization, you can:

  • Add Custom JavaScript: Create a scripts directory in your theme and add custom JavaScript files.
  • Use Custom Partials: Create custom Handlebars partials to reuse code across multiple templates.
  • Override Default Templates: Create custom templates for specific pages or post types.

Conclusion

Customizing your GhostCMS theme allows you to create a unique and personalized website. With its flexible theming system, you can easily make changes to the look and functionality of your site.

Read more