Miyus

This is the official end-user documentation for the Miyus Ghost theme.

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

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

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

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.
Theme Settings

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.

Theme Settings

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
Theme Settings

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

Advanced Options

The theme offers advanced customization options and enables advanced functionalities through other features. Explore all available customization options in this section.

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.

miyus-ghost-theme-multi-level-navigation.png

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:

miyus-ghost-theme-multi-level-navigation-preview.png


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.

ghostcave-miyus-ghost-theme-secondary-navigation-option.png

Preview:

ghostcave-miyus-ghost-theme-secondary-navigation-preview.png

Advanced Options

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.

ghostcave-miyus-ghost-theme-translate-ready.png

The theme is currently available in following languages:

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.

Advanced Options

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'.

Create-a-Contact-Page-ghostcave-miyus.jpg

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.

Formspree-contact-form-endpoint-url-ghostcave-miyus.jpg

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

Enable-Custom-Contact-Form-Ghostcave-Miyus.jpg

Add the custom contact form

  1. Go to your Formspree account and copy the form content from the "HTML" section.
    Obtain-the-contact-form-formspree-ghostcave-miyus.jpg
  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.

Add-and-customize-the-contact-form-ghostcave-miyus.jpg

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.

Advanced Options

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

The theme facilitates a growing list of customizations via the code injections option of Ghost. Explore all available customization options in this section.

Code injections

Google fonts

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.

Get-Google-fonts-embed-code-ghostcave-miyus.jpg


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>

configure-google-fonts-with-Ghost-code-injections-ghostcave-miyus.jpg

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>

configure-google-fonts-with-Ghost-code-injections-fot-title-ghostcave-miyus.jpg

Code injections

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

Follow these essential steps and best practices when updating and maintaining the theme.

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.

Maintainance

Changelog

New releases, improvements, fixes and notable changes.

v1.3.2 - June 11, 2024

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

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

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

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

v1.2.0 - June 03, 2024

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