Theme Settings

• Brand
• Site wide
• Homepage
• Post

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

• On Ghost, the site description is being used (unless no custom meta description specified in the Meta data section in the settings) to generate the meta description tag which is really important for SEO.
• If you want to keep the Site description intact but still want to customize the homepage hero description, head over to the Hero section settings.

---

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.

---

Publication logo

The Publication logo is the image that appears on the top left corner of the header throughout the theme. It represents your brand identity and should match your brand logo.

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

• A horizontal logo suits this theme best.
  
• Your logo image should have a minimum height of 32 pixels.
  
• A transparent background for the logo image is recommended to ensure a consistent and attractive appearance across the theme.
  

---

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.

Dark mode logo

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

• Try to use a light shade of your brand color to maximize the visibility

  You can generate the color shades on this website.

• The secondary background color will be replaced with the tag accent color (where tag accent color is available), if the Use tag accent color option (explained below) is enabled.
• In dark mode, the secondary background color will automatically adjust to a suitable dark shade.

---

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.

• Please refer to this guide for setting up a fully functional contact page.

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:

• Hero Title: The site title of your publication will be displayed.
• Hero Description: The site description of your publication will be displayed.
  

---

Featured Links

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:

Preview:

💡 Tips

• To have a public tag page, you need to assign at least one post to each tag that you are using. (If a tag has no posts, you will see a 404-error page)
• The Featured Links section will be disabled if the 'Featured links' field is blank.

---

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.

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:

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

• In your Ghost dashboard, go to the Tags section and find the slug of the tag you want to use for the section.

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:

💡 Tips

• To change the background color of the tag sections, go to your tag page and set the Tag color option.
  
• To display the section background with the same color as the tag, you need to activate the Use tag accent color option. You can find this option under Settings -> Design & branding -> Site wide.
  

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.