Ghost CMS Newsletter Customization Guide

Last Updated: May 14, 2025

This guide provides comprehensive information on customizing Ghost CMS newsletters, from standard settings to advanced techniques like adding colored boxes and creating reusable content structures.

1. Standard Newsletter Design Customization (Built-in Settings)

Ghost offers a range of built-in options to tailor the look and feel of your newsletters. These settings are typically found under Settings → Email newsletter → Newsletters → Edit (for a specific newsletter) → Design.

Key customizable elements include:

2. Advanced Design Customizations

For elements like colored boxes around text or more unique styling beyond the standard settings, you'll need to utilize HTML and potentially CSS.

2.1. Using HTML Cards

The Ghost editor includes an "HTML card" which allows you to insert custom HTML directly into your post content. This HTML will also be rendered in your email newsletters.

How to add an HTML Card: In the Ghost editor, type /html on a new line and press Enter, or click the + button and select the HTML card.

Creating a Colored Box with HTML:

You can create a colored box using a <div> element with inline CSS styles or by assigning a class that you define elsewhere.

Example 1: Inline Styles (Recommended for Email Compatibility)

<div style="background-color: #f0f8ff; border: 1px solid #add8e6; padding: 15px; margin-bottom: 20px;">
  <p>This is your text inside a light blue colored box with a light blue border.</p>
</div>

Example 2: Using a Class (Requires Separate CSS Definition)

<div class="custom-colored-box">
  <p>This is your text inside a colored box.</p>
</div>

If you use a class, you'll need to define its style using CSS (see section 2.2).

2.2. Using Code Injection for CSS

Ghost's "Code Injection" feature (Settings → Code Injection) allows you to add custom CSS to your site. Styles added here can target classes you've used in your HTML cards.

For email-specific styling, it's generally better to:

CSS Definition for the Class Example:

If you used class="custom-colored-box", you could add the following CSS in Code Injection (Site Header) or within <style> tags in an HTML card:

<style>
.custom-colored-box {
  background-color: #f0f8ff; /* Light Alice Blue */
  border: 1px solid #add8e6; /* Light Blue */
  padding: 15px;
  margin-bottom: 20px;
}

.custom-colored-box p {
  margin: 0; /* Adjust paragraph margins within the box if needed */
  color: #333; /* Text color */
}
</style>
Important Note on Email CSS Compatibility: Email clients (like Outlook, Gmail, Apple Mail) have varying and often limited support for modern CSS. Complex CSS might not render as expected across all platforms.

2.3. Theme Customization (Advanced Users)

3. Creating "Templates" (Reusable Content Structures with Snippets)

While Ghost doesn't have a traditional feature to create and switch between entirely different HTML email design templates in the same way as dedicated email marketing platforms (beyond the single customizable template you configure per newsletter), it offers a powerful feature called Snippets for creating reusable content structures.

Snippets allow you to save blocks of content, including text, images, HTML cards (like your colored boxes), and other elements, and then quickly insert them into new posts.

How to Create and Use Snippets for Newsletter Structure:

  1. Create a Dummy Post: Start a new, unpublished post in the Ghost editor. This will serve as the basis for your snippet.
  2. Build Your Desired Structure: Add all the common sections and elements you want in your reusable template. This can include:
    • Placeholder text (e.g., "Lorem Ipsum," "[Insert Introduction Here]," "[Add Image Caption]").
    • Image placeholders (you can insert an image card and then press ESC before actually selecting an image).
    • HTML cards with your custom designs (e.g., pre-styled colored boxes).
    • Call-to-action buttons or links.
    • Dividers or other structural elements.
  3. Select All Content: Once your structure is complete, place your cursor at the very end of the post content (on a new, empty line). Press CTRL+A (Windows/Linux) or CMD+A (Mac) to select all the content within the editor.
  4. Save as Snippet: A black formatting toolbar will appear above the first selected element. On the far right of this toolbar, click the icon that looks like a piece of paper with a folded corner (this is the "Create snippet" icon).
  5. Name Your Snippet: A dialog will appear prompting you to enter a name for your snippet. Choose a descriptive name that will help you identify it later (e.g., "Weekly Newsletter Intro Section," "Product Update Box Template").
  6. Create Snippet: Click the "Create" button to save the snippet.
  7. Use Your Snippet in New Posts:
    • When you create a new post for your newsletter, click the + button in the editor (or type / on a new line) to open the card menu.
    • Scroll down through the card menu until you find the "Snippets" section. Your saved snippets will be listed by the names you gave them.
    • Click on the desired snippet to insert its entire structure into your new post.
  8. Edit and Customize: After inserting the snippet, you can then edit the placeholder content and customize it with the specific information for that particular newsletter edition.

Limitations of Snippets:

4. Summary and Best Practices

By combining Ghost's built-in features with strategic use of HTML, CSS (especially inline styles), and snippets, you can create engaging and uniquely styled newsletters for your audience.