Fumio Documentation

Install the theme

Follow the steps below to upload the theme:

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Design ( yoursite.com/ghost/#/settings/design/ )
3. Click Change theme ( yoursite.com/ghost/#/settings/design/change-theme )
4. Click Upload theme and select the fumio.zip file.
5. After the upload is complete, under Installed themes click Activate

Routes setup

Follow the steps below to upload the routes.yaml file (this is a separate step from theme upload)

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Labs ( yoursite.com/ghost/#/settings/labs )
3. Under Beta features click on Upload routes file button and select the file from the root directory of the theme.

Portal Links

By default, the theme comes with custom /signup/, /signin/ and /account/ pages, however, if you prefer the Portal feature instead, you can change the links in the theme files to point to Portal instead.

You will have to change the following files:

1. header.hbs

• change the 'Subscribe' button link, by adding data-portal="signup" after the href="/signup/"

2. content-cta.hbs

• change the 'Sign in' link after 'Already have an account?' by adding data-portal="signin" after the href="/signin/"

3. menu.hbs

• change the 'Sign in' link after 'Already have an account?' by adding data-portal="signin" after the href="/signin/"

4. member-menu.hbs

• change the 'Account' link by adding data-portal="account" after the href="/account/"
• change the 'Sign up' link by adding data-portal="signup" after the href="/signup/"
• change the 'Sign in' link by adding data-portal="signin" after the href="/signin/"

Custom settings

The theme comes with custom design settings, which are accessible from the Ghost Admin panel. To view and edit these settings go to Settings > Design & Branding ( yoursite.com/ghost/#/settings/design/)

Custom settings are defined in the package.json file. These settings are placed under three categories:

1. Site-wide settings
2. Homepage settings
3. Post settings

Here's a preview of the available settings:

Homepage

The homepage layout is defined in the home.hbs file and can contain the following sections:

• hero
• projects
• services
• clients
• testimonials
• team(authors)
• faq
• blog
• categories(tags)

Hero

The hero section can be customized in the Ghost Admin. You can change the headline, description, and CTA. By default, the CTA is the subscription form.

If you change it to the primary-cta option, you should also have a page with the tag #primary-cta. This page will be the link the CTA will point to and it can be any page (ex. Contact, About).

For example, on the second homepage demo, this is set up to the Contact page. The CTA in this case is a button linking to the Contact page, the button text is the title of the page. The contact page has the #primary-cta tag.

Projects

The projects section will be populated by posts having the internal tag #project. You can customize this section from the Admin, you have the possibility to change the layout, the maximum number of projects, and whether you want colors on the project cards or not.

If you enable the Project card color option, the color of the card will come from the first public tag assigned to the post. To change the color of a tag, in the Admin go to Tags, click on one of the tags, and there you have the color option.

Services

The services section is based on tags assigned to a specific page. This can be any page (recommended is /services/), which has the internal tag #home-services. When you add this tag to one of your pages, it will enable the services section to appear on the homepage.

The section title will be the page title, and to add services you just have to add new tags to this page, every tag you add will appear on a separate card, the data displayed on a card will come from the tag itself:

• image - is the tag feature image
• title - is the tag name
• description - is the tag description
• background-color - is the tag color with some opacity

The order of the tags in the page settings is the order in which the cards are rendered, so you can control that.

For example, on the demo, we have a page called Services (/services/) with the internal tag #home-services (for the section to appear on the homepage) and with the following tags: Visual Identity, Strategy & Design, App Development, Motion Design.

Clients

The clients section is based on tags assigned to a specific page. This can be any page (recommended is /clients/), which has the internal tag #home-clients. When you add this tag to one of your pages, it will enable the clients section to appear on the homepage.

The section title will be the page title, and to add new logos you just have to add new tags to this page. Every tag with an image will be rendered and added to this section.

The recommendation is to use SVG files and the color of the logo ideally should be black, because that way it will work on both light and dark themes. (on the dark theme there is a CSS filter to invert the colors, so there is enough contrast).

If you prefer not to apply the filter, you can add the following in Code Injection:

<style>
  @media (prefers-color-scheme: dark) {
    html:not([data-color-scheme='light']) .client-logos img {
      filter: initial;
    }
  }
</style>

Testimonials

The testimonials section is based on tags assigned to a specific page. This can be any page (recommended is /testimonials/), which has the internal tag #home-testimonials. When you add this tag, it will enable the testimonials section to appear on the homepage.

The section title will be the page title, and to add new testimonials you just have to add new tags to this page.

The tag data will be used for the testimonial content:

• quote - is the tag description
• author image - is the tag feature image
• author name - is the tag meta title
• author role/bio - is the tag meta description

By default, the homepage will show up to 4 testimonials, but you can change the limit in the home.hbs file.

Team/Authors

The team section is based on the Ghost authors. All the data that appears in an author card can be changed in the Admin by going to Settings > Staff and editing an author profile.

FAQ

The FAQ section is rendered from the content of a specific page. This can be any page (recommended is /faq/), which has the internal tag #home-faq. When you add this tag to one of your pages, it will enable the faq section and the content of the page will appear.

The section title will be the page title and for the content, the recommendation is to use Toggle cards, which is a Ghost feature to create collapsible content, ideal for an FAQ section.

Blog

The blog section is populated with posts that do not have the #project tag (as explained in the routes setup). By default, 3 posts are shown with a link to view all blog posts ( [/blog/](https://fumio.brightthemes.com/blog/) ).

If you want to increase this limit, edit the limit="3" in the home.hbs template under the Blog section.

Categories/Tags

The categories/tags section is populated with the most popular tags, with a limit of 6 by default. This means the 6 tags that are assigned to the most will appear here. There will be a link to the /tags/ page as well, where all tags will be displayed.

You have a couple of things you can change here, you can increase/decrease the limit to show more or fewer tags. You can change the order from the post count to tag name for example, or you could filter for specific tags instead.

Custom Pages

As explained in the routes setup, the theme comes with a couple of custom pages, which need some actions from your side to be activated.

By default, these custom routes require a page with the same slug to exist, this is because this way you can control all the meta properties for that specific route.\

Follow the steps below to create a Page:

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Pages ( yoursite.com/ghost/#/pages/ )
3. Click New page and set the Title and Page URL
4. Finally, click Publish

Projects

The Projects route requires a page with the slug /projects/ to work, follow the steps described in custom pages to create a new page.

The template used is projects.hbs. There you can make changes if you want to customize it.

The layout set for the homepage (Project feed layout) will be used on this page as well.

Blog

The Blog route requires a page with the slug /blog/ to work, follow the steps described in custom pages to create a new page.

The template used is blog.hbs. There you can make changes if you want to customize it.

Posts that do not have the internal tag #project will appear on this page.

Signup

The Signup route requires a page with the slug /signup/ to work, follow the steps described in custom pages to create a new page.

The template used is members/signup.hbs. There you can make changes if you want to customize it.

To add an image to your signup page, add a feature image to this page in the Admin, additionally, the fig caption you add will appear over the image.

Signin

The Signin route requires a page with the slug /signin/ to work, follow the steps described in custom pages to create a new page.

The template used is members/signin.hbs. There you can make changes if you want to customize it.

To add an image to your signing page, add a feature image to this page in the Admin, additionally, the fig caption you add will appear over the image.

Account

The Account route requires a page with the slug /account/ to work, follow the steps described in custom pages to create a new page.

The template used is members/account.hbs. There you can make changes if you want to customize it.

Membership

The Membership route requires a page with the slug /membership/ to work, follow the steps described in custom pages to create a new page.

The template used by default is members/membership-tiers.hbs. This template is implemented specifically for membership tiers, if you don't have tiers, you can switch to a simpler template by changing the routes.yaml from:

/membership/:
  template: members/membership-tiers

To:

/membership/:
  template: members/membership

After you save the change, upload the routes file again. (In this case, the template file used is: members/membership.hbs)

Membership icons

The membership tier icons are based on the tier number, meaning that the first tier displayed will have the icon named tier-1, the second tier will display tier-2 and so on.

To change this icon, you have to edit the icon sprite used by the theme, this file is: /assets/icons/icons-sprite.svg. You can edit this file with any text editor (we use VS Code). For more about the icon library used, check out the Icons section.

Membership colors

By default, the membership tier cards use the primary color, but you can change the color of each tier by adding a line of CSS in Code Injection.

The membership tiers are set up to use custom CSS properties as an accent color, so the first tier will use --color-tier-1, the second tier will use --color-tier-2 and so on.

To change the colors, add the following in Code Injection:

<style>
  :root {
    --color-tier-2: #ff4500;
    --color-tier-3: #ff1493;
  }
</style>

Search

If you prefer the custom search, then you need some configuration to make it work. The custom search is based on the fuse.js library. , follow the steps below to activate it:

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Integrations ( yoursite.com/ghost/#/settings/integrations/ )
3. Click Add custom integration, set the Name, and click Create
4. Copy the Content API Key and go to Settings > Designs > Site-Wide
5. Paste the Content API Key into the Search key field and click Save

The Search route requires a page with the slug /search/ to work, follow the steps described in custom pages to create a new page.

The template used is search.hbs. There you can make changes if you want to customize it.

By default, the search is looking at the post title, excerpt, and tags. You can potentially enable search in content as well, but keep in mind, that if you have a lot of posts this can affect the performance. To enable search in the content you have to edit the setup in partials/theme-settings.hbs:

  searchInContent: false,

Another possibility (to avoid editing the theme file) is to add the following in Code Injection:

<script>
  themeSettings.searchInContent = true;
</script>

Authors

The Authors route requires a page with the slug /authors/ to work, follow the steps described in custom pages to create a new page.

The template used is author.hbs. There you can make changes if you want to customize it.

Tags

The Tags route requires a page with the slug /tags/ to work, follow the steps described in custom pages to create a new page.

The template used is tags.hbs. There you can make changes if you want to customize it.

Custom templates

Besides the default post (post.hbs) & page (page.hbs) templates, the theme comes with several custom templates, which can be selected for both posts and pages, in the Post Settings menu.

Custom templates:

• custom-with-background-image.hbs - template with feature image in the background
• custom-with-full-width-background-image.hbs - template with feature image being a full-width background
• custom-with-image-on-side.hbs - template with feature image being on the side (on desktop)
• custom-with-sidebar.hbs - template with sidebar beside the post content (on desktop), sidebar template is partials/sidebar.hbs
• custom-with-table-of-contents-and-sidebar.hbs - template with table of contents on the left and sidebar on the right side of the post content
• custom-with-wide-image.hbs - template with a wider image format (compared to the default template)

Color customization

The themes' basic CSS values are defined as custom CSS properties, so you can easily overwrite them from Code Injection to change background colors, text colors, site width, and more.

To change these properties add the following in Code Injection:

<style>
  :root {
    --global-theme-notifications: none; /* flex/none */
    --global-hero-title-color: var(
      --color-primary
    ); /* you can also add gradients for the hero title color */
    --global-max-width: 1280px; /* site max width */
    --global-content-width: 680px; /* post content width */
    --global-radius: 8px; /* default radius */
    --global-radius-rounded: 30px; /* radius for rounded elements */
    --global-header-height: 80px;
    --global-progress-bar: visible; /* progress bar in posts: visible/hidden */
    --color-text: hsl(0, 0%, 10%);
    --color-text-acc: hsl(0, 0%, 30%);
    --color-bg: hsl(0, 100%, 100%);
    --color-bg-body: hsl(0, 100%, 100%);
    --color-bg-acc: hsl(0, 0%, 97%);
    --color-border: hsl(0, 0%, 92%);
  }
</style>

If you want to change the dark theme colors:

<style>
  @media (prefers-color-scheme: dark) {
    html:not([data-color-scheme='light']) {
      --global-hero-title-color: var(--color-primary);
      --color-text: hsl(0, 0%, 90%);
      --color-text-acc: hsl(0, 0%, 70%);
      --color-bg: hsl(0, 0%, 12%);
      --color-bg-body: hsl(0, 0%, 12%);
      --color-bg-acc: hsl(0, 0%, 10%);
      --color-border: hsl(0, 0%, 20%);
    }
  }
</style>

Some useful tools for choosing colors and gradients:

• Fuel HSL color picker
• Gradients | Components AI
• CSS Gradient Generator

Here are a couple of examples, how you can define your own theme in a couple of lines of css (for both light and dark theme)

Purple theme:

<style>
  :root {
    --color-primary: hsl(255, 100%, 65%);
    --color-text: hsl(255, 100%, 15%);
    --color-text-acc: hsl(255, 100%, 30%);
    --color-bg: hsl(255, 100%, 96%);
    --color-bg-body: hsl(255, 100%, 98%);
    --color-bg-acc: hsl(255, 100%, 94%);
    --color-border: hsl(255, 100%, 90%);
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-color-scheme='light']) {
      --color-primary: hsl(255, 100%, 65%);
      --color-text: hsl(255, 100%, 95%);
      --color-text-acc: hsl(255, 100%, 90%);
      --color-bg: hsl(255, 100%, 14%);
      --color-bg-body: hsl(255, 100%, 10%);
      --color-bg-acc: hsl(255, 100%, 12%);
      --color-border: hsl(255, 100%, 20%);
    }
  }
</style>

Red theme:

<style>
  :root {
    --color-primary: hsl(350, 100%, 65%);
    --color-text: hsl(350, 100%, 15%);
    --color-text-acc: hsl(350, 100%, 30%);
    --color-bg: hsl(350, 100%, 96%);
    --color-bg-body: hsl(350, 100%, 98%);
    --color-bg-acc: hsl(350, 100%, 94%);
    --color-border: hsl(350, 100%, 90%);
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-color-scheme='light']) {
      --color-primary: hsl(350, 100%, 65%);
      --color-text: hsl(350, 100%, 95%);
      --color-text-acc: hsl(350, 100%, 90%);
      --color-bg: hsl(350, 100%, 14%);
      --color-bg-body: hsl(350, 100%, 10%);
      --color-bg-acc: hsl(350, 100%, 12%);
      --color-border: hsl(350, 100%, 20%);
    }
  }
</style>

Yellow theme:

<style>
  :root {
    --color-primary: hsl(43, 100%, 65%);
    --color-text: hsl(43, 100%, 15%);
    --color-text-acc: hsl(43, 100%, 30%);
    --color-bg: hsl(43, 100%, 96%);
    --color-bg-body: hsl(43, 100%, 98%);
    --color-bg-acc: hsl(43, 100%, 94%);
    --color-border: hsl(43, 100%, 90%);
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-color-scheme='light']) {
      --color-primary: hsl(43, 100%, 65%);
      --color-text: hsl(43, 100%, 95%);
      --color-text-acc: hsl(43, 100%, 90%);
      --color-bg: hsl(43, 100%, 14%);
      --color-bg-body: hsl(43, 100%, 10%);
      --color-bg-acc: hsl(43, 100%, 12%);
      --color-border: hsl(43, 100%, 20%);
    }
  }
</style>

Secondary CTA

The section right above the footer, which acts as a CTA is a customizable section. On the demo, this section is a CTA pointing to the Contact page.

For this section to appear you have to assign the internal tag #secondary-cta to the page where the link will point to. The headline will be the page excerpt and the button text will be the page title.

Syntax Highlighting

The theme comes with prism.js integration by default, to activate syntax highlighting just add the internal tag #syntax-highlight to your post.

Why is this necessary? In short, for performance. To avoid loading the library when it's not necessary. If you don't add the tag, the library will not load at all.

If you are someone who shares code regularly and wants to have the plugin on all your posts, without having to add the tag, you can do so by changing the partials/syntax-highlight.hbs file. Simply remove the condition checking for the tag.

Additionally, in this partial file, it's defined which version of the prism library is loaded as well as the components, languages, and the theme. So you can easily customize it, add new languages, or a different code highlighting the theme without having to go into theme development.

Table of Contents

Table of contents are generated using the TocBot library and this is integrated into the theme by default. You can use the ToC functionality in two ways:

1. Using the With Table Of Contents And Sidebar template.
2. Using the internal tag #toc.

With the first option, you get a fixed Table of Contents on the left side next to the post content and also a sidebar on the right. (You can select this template for any post in the Post Settings menu in the Admin).

With the second option, you get a floating ToC on the top-right part of the website, with this option you can add a Table of Contents to any template you are using.

If you want to make changes to the ToC layout or the TocBot library configuration, you can edit the partials/toc.hbs file.

Fonts

You can set the font family from the Admin section, going to Settings > Design > Site-wide and under Font family select one of the options.

The theme comes with the following options:

• System font - the default value, loads the system font (no requests to Google Fonts)
• Urbanist & Inter - Urbanist for headings and Inter for the body font
• DM Sans - DM Sans for both headings and body font
• Inter - Inter for both headings and body
• Playfair Display & Open Sans - Playfair Display for headings and Open Sans for body
• Roboto Mono - Roboto Mono for both headings and body font

With the System font option, you can avoid requests to the Google servers in case GDPR is a concern. If you still want to use Google fonts and want to self-host the font files check out this guide for self-hosting Google Fonts.

Ghost config

Some configurations in Ghost themes can be defined in the package.json file, including Posts per page, Image sizes, and Custom settings.

Posts per page

The posts_per_page defines the number of posts that appear in your collections until it's paginated. For example, the value of posts_per_page is used on the home page, tag, and author templates.

You can change it in the package.json file:

"config": {
  "posts_per_page": 12
}

Image sizes

Ghost can handle responsive image sizes, and this is defined in the package.json file, under the image_sizes property. You can change the default configuration by editing this file before uploading the theme.

"image_sizes": {
  "xxs": {
    "width": 30
  },
  "xs": {
    "width": 100
  },
  "s": {
    "width": 320
  },
  "m": {
    "width": 640
  },
  "l": {
    "width": 960
  },
  "xl": {
    "width": 1280
  },
  "xxl": {
    "width": 2000
  }
}

The sizes defined will be used to generate copies of images at the specified sizes when uploading images in your Ghost Admin.

Comments

The theme uses the native Ghost comment feature. The Native Comment System requires at least Ghost v5.9.0, you have to enable it from Settings > Membership > Access > Commenting.

Here are the options you can choose from:

• All members - Logged-in members
• Paid-members only - Only logged-in members with an active subscription
• Nobody - Disable commenting completely

Icons

The icons used in the theme are from Tabler Icons, the library consists of 4000+ icons. Not all icons from the library are included to save on the file size, but the most common icons are included in an icon sprite file.

This file is placed in the /assets/icons/ directory in SVG format: icon-sprite.svg. The icons are placed in separate <symbol> tags with a unique id.

Here are the steps to add new icons:

1. Go to Tabler Icons and click on the Icon you want to add, this will copy the code to your clipboard.
2. Open the file (icon-sprite.svg) in a text editor and go to the end of the file.
3. After the last <symbol> create a new <symbol> tag with a unique id (which can be the icon name)
4. Paste the code from the clipboard inside the opening <symbol> and closing </symbol> tags
5. Remove the line starting with <svg and also the closing </svg> tag from the code you pasted.
6. Save the file.

For using the icons inside the theme files, there is a special partial file partials/icon.hbs which accepts name and size as parameters.

Let's see an example and try to add a new icon. Assuming we want to add the icon battery-charging and by clicking on the icon on the website, we get this code:

<svg
  xmlns="http://www.w3.org/2000/svg"
  class="icon icon-tabler icon-tabler-battery-charging"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="#2c3e50"
  fill="none"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  <path
    d="M16 7h1a2 2 0 0 1 2 2v.5a0.5 .5 0 0 0 .5 .5a0.5 .5 0 0 1 .5 .5v3a0.5 .5 0 0 1 -.5 .5a0.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-2"
  />
  <path d="M8 7h-2a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h1" />
  <path d="M12 8l-2 4h3l-2 4" />
</svg>

As explained before, we don't need the <svg> tags just what is inside, as we will place them in <symbol> tags. So the code we will place in the icon-sprite.svg will look like this:

<symbol id="battery-charging" viewBox="0 0 24 24">
  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  <path
    d="M16 7h1a2 2 0 0 1 2 2v.5a0.5 .5 0 0 0 .5 .5a0.5 .5 0 0 1 .5 .5v3a0.5 .5 0 0 1 -.5 .5a0.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-2"
  />
  <path d="M8 7h-2a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h1" />
  <path d="M12 8l-2 4h3l-2 4" />
</symbol>

It's important that the id is uniques and there is no other <symbol> with the same id. After copy-pasting this into the icon-sprite.svg and saving it, we can use the new icon in the theme, like this:

{{>icon name="battery-charging" size="md"}}

Wherever you put this code, will render the icon.

Social links

Social links are shown in the footer and by default, the theme comes with:

• Facebook (Settings > General > Social accounts)
• Twitter (Settings > General > Social accounts)
• RSS

To add other links you need to edit the partials/social-links.hbs file. There are several other links in there already, you just have to uncomment the relevant parts and add your link in the href attribute.

Social sharing

Social sharing is part of the post layout and the following is included:

• X(Twitter)
• Facebook
• Linkedin
• Email
• Copy to clipboard

To add other social sharing options you need to edit the partials/social-share.hbs file.

Translations

By default, everything is in English (en.json), additionally, the theme comes with translations in:

• 🇩🇪 German (de.json)
• 🇪🇸 Spanish (es.json)
• 🇫🇷 French (fr.json)
• 🇮🇹 Italian (it.json)
• 🇳🇱 Dutch (nl.json)
• 🇵🇹 Portuguese (pt.json)

If you want to edit the translation in a specific language, you have to edit the corresponding translation file. The files are stored in the locales directory (inside the theme zip).

|__ locales
|   |__ de.json
|   |__ en.json
|   |__ es.json
|   |__ fr.json

If the language file for your language doesn't exist, you have to create it (make sure to use the correct language code) The best way is to copy the content en.json file in your new language file, then change the translations.

Theme development

If you want to make more advanced changes to the theme, or you want to develop your components, the theme comes with a developer-friendly setup. You can take advantage of the Gulp tasks that are set up for compiling Javascript and PostCSS.

All the assets are combined and minified for better speed and performance. To customize the theme make sure you have Node.js and npm installed.

Follow the official guide for installing Ghost locally. After you have installed Ghost and put the theme directory inside the content/themes/ directory, run the following commands in the theme directory:

npm install

This will install all the dependencies for the theme

Then run:

gulp

This will compile PostCSS and javascript and will watch for changes. So when you edit a .hbs, .css or .js file the change will trigger the gulp watch task and this will compile the assets whenever you change a file.

If you want to compile just CSS:

gulp css

If you want to compile just JS:

gulp js

Code Snippets

Frequently asked questions and useful snippets you can use to make some quick changes to your site.

• How to resize the header logo?

  Go to the Admin, Settings > Code Injections and in the Site Header add (adjust the height value depending on your preference):

  <style>.header__brand img { height: 50px; }</style>
  

• How to remove the theme toggle button?

  Go to the Admin, Settings > Code Injections and in the Site Header add:

  <style>.menu__theme { display: none; }</style>
  

• How to hide the subscribe form in the menu?

  Go to the Admin, Settings > Code Injections and in the Site Header add:

  <style>.menu__subscribe { display: none; }</style>