Miyus

• Getting started
• Theme Settings
• Brand
• Site wide
• Homepage
• Post
• Advanced Options
• Navigation
• Translation
• Contact page
• Authors page
• Code injections
• Google fonts
• Rounded edges
• Maintainance
• Update theme
• Changelog

Getting started

Welcome!

This documentation serves as a guide to using the new theme. We'll assume you're familiar with Ghost basics.

✨ New to Ghost?

If you're unfamiliar with Ghost, the official Ghost Help Center offers a wealth of resources and guides to get you started: Ghost Help Center.

---

Uploading the theme

This section details the process for uploading a theme within the Ghost Admin interface. Uploading allows you to integrate a new theme with your publication and subsequently activate it for use.

Steps

1. Navigate to Theme Selection:
   Within the Ghost Admin panel, locate the "Design & branding" settings. Click on "Change theme" displayed in the bottom right corner.

2. Upload Theme File:
   In the top right corner, identify the "Upload theme" button and click it.

3. Activate Theme (Optional):
   Upon successful upload, an "Activate" button will be available. Clicking this activates the uploaded theme for your publication.

Theme Settings

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.

Advanced Options

Navigation

Primary Navigation

The "Primary Navigation" option lets you customize the main menu that appears in your website's header.

To customize Primary navigation, you need to:

1. Navigate to 'Navigation' settings in the Ghost Admin.
2. Locate the "Primary" tab on the left-hand side of the interface.
3. Add the menu items for your main pages.
4. To apply the modifications you've made, click the "OK" button.
   

By default, this theme supports a drop-down menu in the header navigation that can display a second level of items.

You can easily create a sub-menu under any main menu item in the header navigation of this theme. This feature is built-in and does not require any additional configuration.

Preview:

---

Secondary Navigation

The secondary navigation option lets you customize the footer navigation menu.

To customize Primary navigation, you need to:

1. Navigate to 'Navigation' settings in the Ghost Admin.
2. Locate the "Secondary" tab on the left-hand side of the interface.
3. Add the menu items for your main pages.
4. To apply the modifications you've made, click the "OK" button.

Preview:

Translation

Theme Translation

The theme is fully compatible with the native translation option in Ghost CMS. This means that text in a theme is translated based on the language set in Ghost Admin.

The theme is currently available in following languages:

• en - English (Default)
• de - German

We are happy to offer free translation services for any language that is not listed above. 
Please reach out to us if you need our assistance with your language preference.

---

Portal Translation

Portal is an independent feature that is not part of the theme. However, you can change the language of your membership pages to match your publication.

To turn on Portal translation option:

1. Navigate to 'Labs' settings in the Ghost Admin.
2. Switch the "Portal translation" option under the "Beta features" tab on.

You can find more information about this option in our comprehensive guide.

Contact page

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.

Add the contact page

1. Create a new page, add a page title, add an excerpt, and open the 'Page settings' panel using the icon in the top right of the screen.
2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
3. Use the dropdown menu to select the 'Contact' template, close the panel.
4. Finally, click 'Publish'.

Easy: Standard Contact Form

To simplify setup, we've pre-built a contact form into the contact page, featuring fields for Name, Email Address, and Message. You can enable this quickly and easily, even without any coding knowledge.

Create a form on Formspree.io

1. Go to formspree.io and sign up for an account.
2. Once signed in, create a new form and obtain the endpoint URL for the form.

Add your Formspree endpoint

1. Navigate to 'Design & branding' settings in the Ghost Admin.
2. Locate the "Site wide" tab on the right-hand side of the interface.
3. Navigate to the field labeled "Contact form endpoint" and toggle on or off the setting.
4. Paste your Formspree endpoint. e.g: https://formspree.io/f/xeqylqgk
5. To apply the modifications you've made, click the "Save" button.

---

Advanced: Custom Contact Form

If you prefer to use a custom contact form instead of the one included with the theme, you can do so without editing the theme files.

Important: This step is not required if you have set up the standard contact form.

Enable the custom contact form

1. Navigate to the contact page you have created
2. Open the 'Page settings' panel using the icon in the top right of the screen.
3. In the tags field, add the internal tag #custom_contact_form

Add the custom contact form

1. Go to your Formspree account and copy the form content from the "HTML" section.
   
   
2. Navigate back to the Ghost dashboard and open the Contact page.
3. Create an HTML card and paste the copied HTML code from Formspree.
4. Customize the form with your custom fields.
5. To apply the modifications you've made, click the "Update" button.

Example Custom Form Code

<form action="https://formspree.io/f/xeqylqgr" method="POST">
  <label>
    Your email:
    <input type="email" name="email">
  </label>
  <label>
    Department:
    <select name="department">
      <option disabled>Select a department</option>
      <option value="Sales">Sales</option>
      <option value="Billing">Billing</option>
      <option value="Customer Support">Customer Support</option>
    </select>
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>

As long as you adhere to the format described above, the form submission will be processed through an AJAX request by default, preventing redirection to formspree.io after submission.

Authors page

The Miyus theme includes a predefined Authors page template, which features a comprehensive list of your blog's authors.

Add the authors page

1. Create a new page
   • Add a page title
   • Feature image (optional)
2. Open the 'Page settings' panel using the icon in the top right of the screen.
   • Add an excerpt (optional)
3. At the bottom of the panel, you’ll see a dropdown menu titled 'Template'.
4. Use the dropdown menu to select the 'Authors' template, close the panel.
5. Finally, click 'Publish'.

Code injections

Google fonts

Now you can use native Custom fonts option of Ghost.

---

The theme offers the flexibility to incorporate Google Fonts or other font libraries. You can choose to set two different fonts for titles and body text or use the same font for both throughout your site.

Obtain the embed code

1. Visit fonts.google.com & and choose your preferred font.
2. Click the "Get embed code" button to obtain the embed code for the selected font.

---

Configure the font with Ghost

To configure the font:

1. Navigate to 'Code injections' settings in the Ghost Admin.
2. Locate the "Site header" tab on the left-hand side of the interface.
3. Copy and paste the "Embed code in the <head> of your html" code from Google fonts.
4. Copy and paste the following code underneath the embed code.
   
5. Change the "Font Name Here" value accordingly with "CSS class for a variable style" from Google fonts.

<style>
  :root{
    --body-font:"Font Name Here", sans-serif;
  }
</style>

Optional: Set a different Title font

Alternatively, you can specify a distinct font for titles and another for remaining text.

1. Select your preferred font on Google fonts.
2. Copy and paste the new "Embed code in the <head> of your html" code from Google fonts in to the "Site header" section in Ghost.

   Important: When selecting multiple fonts, Google Fonts regenerates the embed code for the header. Ensure that you copy and paste the latest version of the embed code.

3. Add the --title-font variable along with your new title font name as follows.

<style>
  :root{
    --body-font:"Font Name Here", sans-serif;
    --title-font: "Font Name Here", serif;
  }
</style>

Rounded edges

The theme is designed with rounded edges for most elements by default. However, you can disable or adjust the roundness of these elements using Ghost code injections option.

To disable/modify rounded edges:

1. Navigate to 'Code injections' settings in the Ghost Admin.
2. Locate the "Site header" tab on the left-hand side of the interface.
3. Paste the following code at the very beginning of the "Site Header" section.
4. Adjust the value as needed.

<style>
  :root{
    --global-border-radius: 1.5rem;
  }
</style>

Note: To disable rounded edges, use the value 0. e.g. : --global-border-radius: 0;

Maintainance

Update theme

To keep your site running smoothly and securely, we recommend that you always use the most recent theme version. The latest update includes compatibility with the newest Ghost version, as well as performance enhancements and bug fixes.

Any custom code in your theme will be erased if you update it to the latest versions. 

Important: Use the same file name of your current theme to preserve your custom settings. 

To update the theme:

1. Download the latest version of the theme that is compatible with your Ghost version.
2. Navigate to 'Design & branding' settings in the Ghost Admin.
3. In the top right corner, identify the "Upload theme" button and click it.
4. Upon successful upload, an "Activate" button will be available. Clicking this activates the uploaded theme for your publication.

Changelog

New releases, improvements, fixes and notable changes.

v1.4.0 - February 3, 2025

• ✨ Native support for custom typography has been added
• 💄 Update dark mode font color and image brightness adjustments
• 🐛 Update margin-top for post comments section
• 🐛 Adjust mobile header logo max height
• 🐛 Move excerpt styles to page template

  
  
• 🐛 Add responsive font size for excerpt in hero section

Files modified

assets/css/vars.css
assets/css/color-scheme.css
assets/css/ghost/comments.css
assets/css/ghost/header.css
assets/css/ghost/page.css
assets/css/ghost/hero.css
package.json

---

v1.3.2 - June 11, 2024

• 🐛 Resolved color issue with the author card title in the authors page template.
• 🐛 Addressed the page hero title color problem when a cover image is present.
• 🎨 Minor code restructurings & improvements
• 🔥 Removed unused CSS variables
  

Files modified

assets/built/index.css
custom-authors.hbs
assets/css/ghost/authors.css
assets/css/ghost/hero.css
package.json

---

v1.3.1 - June 10, 2024

• ✨ A lightbox has been added for the gallery images.
• 💄 Adjusted dark mode colors for an enhanced user experience.
• 💄Modified font sizes for improved readability.
• 💄Restructured mobile menu placement for better navigation.
• 💄Eliminated unnecessary CSS variables to streamline code.
• 💄Implemented additional minor UI optimizations for overall improvement.

Files modified

assets/built/index.css
assets/built/index.js

assets/css/color-scheme.css
assets/css/index.css
assets/css/vars.css
assets/css/components/global.css
assets/css/ghost/content.css
assets/css/ghost/header.css
assets/css/ghost/page.css

assets/js/index.js
+assets/js/lightense.js

package.json

---

v1.3.0 - June 09, 2024

• ✨ Dark mode option added
• 🔥 Removed unused member views & code segments
  
• ⚡️ WebP image support added for certain elements
• 🐛 Compatibility issues with older Safari versions fixed
• 💄 Minor UI optimizations
  

Files modified

assets/built/index.css
assets/built/index.js

+ assets/css/color-scheme.css
assets/css/components/buttons.css
assets/css/components/forms.css
assets/css/components/global.css
assets/css/ghost/author.css
assets/css/ghost/contact.css
assets/css/ghost/content.css
assets/css/ghost/featured.css
assets/css/ghost/footer.css
assets/css/ghost/header.css
assets/css/ghost/hero.css
- assets/css/ghost/members.css
assets/css/ghost/pagination.css
assets/css/ghost/post.css
assets/css/vars.css

assets/js/index.js
+ assets/js/color-scheme.js

partials/author-card.hbs
partials/header.hbs
partials/hero.hbs
+ partials/icons/theme-toggle.hbs
- members/account.hbs
- members/signin.hbs
- members/signup.hbs
default.hbs
post.hbs

package.json

---

v1.2.1 - June 03, 2024

• 🐛 Author card background repeat issue has been fixed
  

Files modified

assets/built/index.css
assets/built/index.css.map
assets/css/ghost/authors.css
package.json

---

v1.2.0 - June 03, 2024

• ✨ Authors page template added with list of authors
• 💄 Other minor UI/UX improvements
• 🐛 Hero section image background position centered
• 🐛 Post template author avatar related issue fixed

Files modified

assets/built/index.css
assets/built/index.css.map
assets/css/ghost/authors.css
assets/css/components/global.css
assets/css/ghost/hero.css
assets/css/index.css
assets/css/ghost/post.css
partials/author-card.hbs
partials/icons/avatar.hbs
partials/icons/location.hbs
package.json