Theme Settings

Customize the theme using the Theme Settings located in the Design & Branding section of your Ghost dashboard.

Brand

This section details how to customize your website's branding through the Ghost theme settings' Brand tab. You can modify elements like the site description, accent color, publication icon, logo, and cover image.

To customize brand options, you need to:

  1. Navigate to 'Design & branding' settings in the Ghost Admin.
  2. Locate the "Brand" tab on the right-hand side of the interface.

Site description

This is the default setting for the site description. By default, the site description will be displayed as the homepage hero description.

To change the Site description:

  1. Navigate to the field labeled "Site description" and enter your description.
  2. To apply the modifications you've made, click the "Save" button.
💡 Tips

Accent color

The theme's main color is the accent color, which is typically the color that represents your brand. You should choose an accent color that matches your brand identity and stands out from the rest of the design.

To change the Accent color:

  1. Navigate to the field labeled "Accent color" and select the color you want as the primary color of the site.
  2. To apply the modifications you've made, click the "Save" button.

Publication icon

To create the favicon of the website, Ghost uses the publication icon as the source. The favicon is a small image that appears next to the website title in the browser tab. It should have a square shape (1:1 aspect ratio) and reflect the brand identity (as shown in the logo).

To change the Publication icon:

  1. Navigate to the field labeled "Publication icon" and click on the "Upload icon" button.
  2. Select the icon/image file from the file browser.
  3. Once the icon is uploaded, to apply the modifications you've made, click the "Save" button.

When you upload the Publication logo, it will replace the Site title that shows on the top left corner of the site header.

To change the Publication logo:

  1. Navigate to the field labeled "Publication logo" and click on the "Upload logo" field.
  2. Select the image file from the file browser.
  3. Once the image is uploaded, to apply the modifications you've made, click the "Save" button.
💡 Tips

Publication cover

If the Publication cover image is set, it will show up as the background image of the homepage hero section. Otherwise, the homepage hero background will use the secondary background color.

A Publication cover image affects the appearance of the Hero title and Hero description. When you upload a cover image, the text color becomes White, and the image gets a dark overlay. This ensures that the text stands out regardless of the image color.

To change the Publication cover:

  1. Navigate to the field labeled "Publication cover" and click on the "Upload cover" field.
  2. Select the image file from the file browser.
  3. Once the image is uploaded, to apply the modifications you've made, click the "Save" button.

Heading font & Body font

Starting from Ghost CMS version 5.104.0, native support for custom typography has been added. With theme version 1.4.0, you can leverage this feature to modify the typography of your website, providing even greater control over your brand's presentation.

To change the Heading font & Body font:

  1. Navigate to the field labeled "Heading font" or "Body font" field.
  2. Select the font of your choice
  3. Once done, to apply the modifications you've made, click the "Save" button.

Site wide

This section details how to customize site wide settings through the Ghost theme settings' Site wide tab. You can modify options like the secondary background color, use of tag accent color, and the header behavior.

To customize site wide options, you need to:

  1. Navigate to 'Design & branding' settings in the Ghost Admin.
  2. Locate the "Site wide" tab on the right-hand side of the interface.

Enable dark mode

The theme includes an integrated color scheme switcher, providing you with the flexibility to activate or deactivate the color theme selector for your website as desired.

To enable/disable the dark mode option, you need to:

  1. Navigate to the field labeled "Enable dark mode" and toggle on or off the setting.
  2. To apply the modifications you've made, click the "Save" button.

Note: The theme automatically detects the preferred color scheme from the user's browser settings and switches to the corresponding color theme during their initial visit.

Enabling dark mode provides an additional option to upload a logo specifically designed for the dark color scheme.

Important: Ensure you upload a version of your logo that is clearly visible on a dark background, typically one that is light-colored.

To upload a logo for the dark mode, you need to:

  1. Navigate to the field labeled "Dark mode logo" and click on "Upload image" button.
  2. Select the logo image from the dialog box.
  3. To apply the modifications you've made, click the "Save" button.

Secondary background color

To customize the appearance of your site, you can choose a different background color for the header, footer and hero sections of the home, author, tag, post and page layouts.

  1. Navigate to the field labeled "Secondary background color" and select the color you want for the secondary background.
  2. To apply the modifications you've made, click the "Save" button.
💡 Tips

Use tag accent color

If you turn on the Use tag accent color option, the tag color (if it exists) will take the place of the secondary background color. The primary tag's color will be used when there are more than one tags.

  1. Navigate to the field labeled "Use tag accent color" and toggle on or off the setting.
  2. To apply the modifications you've made, click the "Save" button.

Fixed header

When you scroll down the page, the Fixed header option will keep the header in place at the top of the screen.

  1. Navigate to the field labeled "Fixed header" and toggle on or off the setting.
  2. To apply the modifications you've made, click the "Save" button.

Contact form endpoint

If you want your readers to contact you directly, you can add a contact page to your website. This theme includes built-in Formspree.io integration for easy setup.

Homepage

This section details how to customize the home page of your website through the Ghost theme settings' Homepage tab. You can enable or disable sections like the Hero and featured links, along with other dynamic elements.

To customize homepage related options, you need to:

  1. Navigate to 'Design & branding' settings in the Ghost Admin.
  2. Locate the "Homepage" tab on the right-hand side of the interface.

Hero Section

The hero section includes a title and a little description at the top of the homepage. 

Hero Title
  1. Navigate to the field labeled "Hero title" and enter your own hero title.
  2. To apply the modifications you've made, click the "Save" button.
Hero Description
  1. Navigate to the field labeled "Hero description" and enter your own hero description.
  2. To apply the modifications you've made, click the "Save" button.
Hero Subscribe Form

You can show/hide the newsletter signup form on the homepage hero section.

This form is only visible to non-members.

  1. Navigate to the field labeled "Hero subscribe form" and toggle on or off the setting.
  2. To apply the modifications you've made, click the "Save" button.
💡 Tips

In the absence of custom hero title and description being set, the theme will utilize the following defaults:


Right below the hero section, you have the option to showcase some links to your pages or tags that you want to emphasize with the Featured Links feature.

  1. Create the pages or tags that you want to link to and obtain their slugs.
  2. After you have the slugs, you can enter them as a string separated by commas.
  3. To apply the modifications you've made, click the "Save" button.

Example:

ghostcave-miyus-ghost-theme-homepage-related-links.png

Preview:

ghostcave-miyus-ghost-theme-homepage-related-links-preview.png

💡 Tips

Editor's Picks

The Editor's Picks section showcases the featured posts on the homepage, below the Featured Links section. This section does not require any configuration.

To display a post on the Editor's Picks section, simply mark it as Featured.

ghostcave-miyus-ghost-theme-homepage-editors-picks.png

If there are no featured posts, the section will not appear on the homepage.


Homepage Sections

You can use tags to create dynamic sections on the homepage. These sections will show the most recent 3 posts from each tag and provide a link to the corresponding tag page. This will make navigation easier for the user.

Preview:

ghostcave-miyus-ghost-theme-homepage-tag-sections.png

Follow these steps to create a section for a specific tag on your homepage:

Once you have the tag slug(s):

  1. In the Ghost Admin, go to the 'Design & branding' settings.
  2. On the right-hand side of the screen, click on the "Homepage" tab.
  3. In the field labeled "Home page section tag slugs", type the tag slugs.
  4. To save your changes, click on the "Save" button.

Example:

ghostcave-miyus-ghost-theme-homepage-tag-sections-option.png

💡 Tips

Post

This section details how to customize the post layout of your website through the Ghost theme settings' Post tab. You can enable or disable widgets and customize the related options.

To customize Post related options, you need to:

  1. Navigate to 'Design & branding' settings in the Ghost Admin.
  2. Locate the "Post" tab on the right-hand side of the interface.

Show related posts

By default, the related posts widget appears at the end of each post. It shows 3 posts that have the same tags as the current post. You can turn this widget on or off with the "Show related posts" option.

  1. Navigate to the field labeled "Show related posts" and toggle on or off the setting.
  2. To apply the modifications you've made, click the "Save" button.

ghostcave-miyus-ghost-theme-post-related-posts.png