Ghost ThemesSupport

Edit theme

This theme uses a modern development stack to compile and optimize styles and scripts. For advanced customization, you should be comfortable using the command line, a code editor (such as Visual Studio Code or Cursor), and have a compatible version of Node.js installed.

Stack overview

This theme is built using the following tools:

  • Gulp – Task runner used for automating build steps (same as Ghost’s official themes).

  • Tailwind CSS – Utility-first CSS framework used for styling.

  • BrowserSync – Provides live reload and multi-device testing.

  • gscan – Ghost’s theme validator.

You can use npm or yarn to install and manage dependencies.

Available commands

Inside the theme folder, run:

npm install     # Install all dependencies  
npm run dev     # Start development mode with live reload  
npm run test    # Run gscan to check for compatibility issues  
npm run zip     # Build a .zip file of the theme

Development mode

When running "npm run dev", two preview URLs will be available:

  • http://localhost:3000 – Local preview.

  • http://<your-ip>:3000 – Multi-device preview on the same network.

These URLs proxy your local Ghost site, which must be running in the background.

Use your Ghost Admin URL (e.g., http://localhost:2368/ghost) to access the dashboard.

Custom theming

This theme uses a variable-based system defined in assets/css/ekto.css. It controls:

  • Color palettes

  • Fonts

  • Dark mode behavior

By centralizing these values, it becomes easier to:

  • Adjust or create new color schemes

  • Maintain consistent styling across light and dark modes

  • Extend the theme with new design variations

This approach keeps the code clean, flexible, and maintainable.

Custom utilities

The theme includes Tailwind-based utilities defined in assets/css/utilities.css, used throughout the layout for visual consistency.

These utilities include:

  • Layout containers

  • Wrappers, spacers, and grid helpers

  • Heading presets

  • Button styles

This setup makes building new features faster and more consistent.

Custom cards

This theme uses custom Tailwind styles assets/css/lib/cards.css and local JavaScript assets/js/lib/cards.js to enhance Ghost cards. This improves appearance, maintains consistency, and removes the need for external scripts.

Custom CSS

If you want to add your own CSS without modifying core theme files, you can create a separate stylesheet and include it in the build.

Step-by-step:

1

Inside assets/css/, create a new CSS file (for example: custom.css).

2

Add your custom styles inside this file.

/* Example */
.custom-button {
    background-color: #000;
    color: #fff;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border-radius: 0.5rem;
}
3

At the end of assets/css/tailwind.css, import your new file:

/* Example */
@import "./custom.css";

This ensures your styles are included in the final build and optimized together with the rest of the theme.

Simple edits (no build required)

For small adjustments such as:

You do not need to install dependencies or run Ghost locally. These edits can be made directly in the theme files.

PreviousRecommendationsNextTranslate

Last updated