Rinne Documentation

Compatible Ghost version: v5.9 or any newer version.

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 and then click Upload theme and select the rinne.zip file.
4. After the upload is complete click Activate

Routes Setup

The theme is intended for sharing resources and publishing blog posts, and it comes with a specific route setup to support this use case. By default, new posts will appear under the resources section, unless you assign the #blog internal tag to the post, in which case the post will appear under the blog section. There are specific pages and templates like /resources/, /blog/ and /membership/.

Follow the steps below to upload the routes.yaml file (The file is located inside the zip)

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Labs.
3. Click on Upload routes YAML button and select the file from the root directory of the theme.

The routes file defines the following custom routes and collections:

• / - the homepage
• /resources/
• /blog/
• /membership/
• /signin/
• /signup/
• /account/

Custom Settings

The theme comes with custom settings available in the Ghost Admin. Go to Settings > Design ( yoursite.com/ghost/#/settings/design/)

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

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

Site-wide

• Color scheme - set the default color scheme (system, light, dark)
• Font family - select from a predefined list of font families or use system fonts
• Header position - set the header position (normal, sticky, floating)
• Use portal links - set your signin, signup, and membership links to use the portal or custom pages
• CTA headline - the headline for CTAs (hero section, section above the footer, and post sidebar)
• CTA description - the description for CTAs
• CTA button text - the button text for CTAs
• CTA button link - the button link for CTAs
• Tag template feed style - set the teg template post feed style: list or resources

Homepage

• Hero image style - set the hero image style (background-full, background, side, bottom, hidden)
• Hero image filter - set css filter to be applied for the hero image(brightness, contrast, etc)
• Resources filter slugs - set the tag slugs to be used as filters (separated by commas)
• Resources filter position - set the position of the filter (sidebar, top, hidden)
• Resources feed layout - set the resources feed layout (list, grid)
• Resources card image - set the resource card image aspect ratio (small, medium, large, wide 16/9, wide 4/3)

Post

• Image lightbox - enable or disable the image lightbox for images inside a post

Homepage

The homepage layout is defined in the index.hbs file and has the following sections (besides the header and footer):

• hero
• resources
• blog
• CTA section

Hero

The hero section can be completely customized from the Ghost Admin, including the style, title, description, and CTA.

By default the title and description will be the {{@site.title}} and {{@site.description}} (from Settings > General > Title & Description), and the image will be the {{@site.cover_image}} (from Settings > Desgin > Brand > Publication cover )

For a more advanced setup you can use the Custom settings to change the content of the hero section:

• CTA headline - to change the title of the hero section, additionally, you can highlight specific parts of the title using the <span> tag, for example:

All the <span>best resources</span> in one place

This will make the text color inside the <span> tag your brand color.

• CTA description - the description for the hero section
• CTA button text - the button text for the hero CTA
• CTA button link - the button link for the hero CTA

To change the style of the hero section you have to set the Hero image style in Settings > Design > Homepage. You can choose from the following options:

• background-full - the hero image appears as a full-width background image
• background - the hero image appears as a background image
• side - the hero image appears on the side
• bottom - the hero image appears below the title and CTA
• hidden - the hero image is not displayed

Additionally, you can set CSS filters for the hero image by setting the Hero image filter in Settings > Design > Homepage. This is especially useful when the image is in the background and you want to have more contrast for the title and description. All valid CSS filters can be used and you can combine multiple filters. Here are some examples:

• contrast and brightness filter:

brightness(0.75) contrast(1.1)

• grayscale filter:

grayscale(100%)

• sepia filter:

sepia(100%)

Resources

New posts will appear under the resources section (unless they have the #blog tag). The resources filters will change the feed content to show cards from the specific category selected.

To customize this section you can change the following custom settings in Settings > Design > Homepage:

1. Resources filter slugs - add the tag slugs you want to appear as filters (separated by commas and no spaces, no comma after the last item)

Example from the demo:

analytics,automation,data,design,logo,membership,newsletter,productivity,seo,website

2. Resources filter position - set the position of the filter section. Options:

   • sidebar - the filters will appear as a sidebar on desktop
   • top - the filters will appear as a scrollable bar above the resource cards
   • hidden - the filters will not be rendered

3. Resources feed layout - set the feed layout. Options:

   • list - resources feed with cards as list items
   • grid - resources feed with cards as grid items

4. Resources card image - set the image aspect ratio and size. Options:

   • small - the card image with 1/1 aspect ratio and 48x48px
   • medium - the card image with 1/1 aspect ratio and 72x72px
   • large - the card image with 1/1 aspect ratio and 96x96px
   • wide 4/3 - the card image with 4/3 aspect ratio
   • wide 16/9 - the card image with 16/9 aspect ratio
   • hidden - the card image is not displayed

Blog

For the blog section to appear on the homepage you need to have at least one post with the internal tag #blog. The post cards will show:

• the feature image with a 16/9 aspect ratio
• one tag assigned to the post
• the visibility (for members and tiers)
• title & excerpt
• author, date & reading time

By default, the number of posts is limited to 3. Changes to this section can be made in the index.hbs file and for the post cards in the partials/post-card.hbs.

CTA section

The CTA section will appear if the membership feature is enabled. By default it uses the {{@site.title}} and {{@site.description}}, for the headline and the description, but you can easily change it with the CTA Headline and CTA description in Settings > Design > Site-Wide.

The background image is the {{@site.cover_image}} (from Settings > Desgin > Brand > Publication cover )

Additionally, the CTA action can be controlled from the CTA button text and the CTA button link in Settings > Design > Site-Wide. If you want a subscribe form to collect emails and members you can leave the default value (subscribe-form) for the CTA button link, otherwise, you can change it to any other link, as well as change the text of the button.

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, that is the only requirement, but if you want even more control over the pages then you should activate the data property and create the page with the correct slug.

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

Resources

The resources page is implemented in the resources.hbs template.

If you want to control the meta properties for this page, you have to activate the data property:

/resources/:
  template: resources
  # data: page.resources # When active data will be taken from the  "/resources/" page

If you activated the data property, you also have to create the page with the resources slug.

Blog

The blog page is implemented in the blog.hbs template.

If you want to control the meta properties for this page, you have to activate the data property:

/blog/:
  permalink: /{slug}/
  template: blog
  # data: page.blog # When active data will be taken from the  "/blog/" page
  filter: tag:hash-blog

If you activated the data property, you also have to create the page with the blog slug.

Signup

The signup page is implemented in the signup.hbs template.

If you want to control the meta properties for this page, you have to activate the data property:

/signup/:
  template: signup
  data: page.signup # When active data will be taken from the  "/signup/" page

If you activated the data property, you also have to create the page with the signup slug. Additionally, the feature image of this page will appear on the side full-width.

Signin

The signin page is implemented in the signin.hbs template.

If you want to control the meta properties for this page, you have to activate the data property:

/signin/:
  template: signin
  data: page.signin # When active data will be taken from the  "/signin/" page

If you activated the data property, you also have to create the page with the signin slug. Additionally, the feature image of this page will appear on the side full-width.

Account

The account page is implemented in the account.hbs template.

If you want to control the meta properties for this page, you have to activate the data property:

/account/:
  template: account
  data: page.account # When active data will be taken from the  "/account/" page

If you activated the data property, you also have to create the page with the account slug.

Membership

The membership page is implemented in the membership.hbs template.

If you want to control the meta properties for this page, you have to activate the data property:

/membership/:
  template: membership
  data: page.membership # When active data will be taken from the  "/membership/" page

If you activated the data property, you also have to create the page with the membership slug.

Custom templates

The default post layout is defined by the post.hbs template and the default page layout are defined by the page.hbs template.

The default post layout is intended for the resources and it sets the featured image to a 1/1 aspect ratio with the image being displayed on the left side next to the title, excerpt & author info.

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-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 wide image format
• custom-directory.hbs - template to create directory pages
• custom-directory-with-main-topic.hbs - template to create directory pages with one topic

Directory pages

Starting with version 1.2.0 of the theme, you can easily create unlimited directory pages right from your Ghost Admin. To create such a page follow the steps below:

1. In your Admin go to Pages.
2. Create a new page by clicking New page
3. Under Page settings > Template select Directory
4. Don't forget to add tags, which will be used as filters and for fetching the relevant posts.

Here's how that page is rendered on the demo: rinne.brightthemes.com/directory/

Directory pages with main topic

Starting with version 1.4.0 of the theme, you can create directory with a main topic and filters within that topic. To create such a page follow the steps below:

1. In your Admin go to Pages.
2. Create a new page by clicking New page
3. Under Page settings > Template select Directory With Main Topic
4. The primary tag will set the topic for this directory
5. The rest of your tags will act as filters within that topic.

Here's an example:

Here's how that page is rendered on the demo: rinne.brightthemes.com/directory-topic/

Comments

Rinne comes with the native comment feature that Ghost offers. The Native Comment System requires at least Ghost v5.9.0, you have to enable it from Settings > Membership > Commenting.

Read next

All post templates have a "Read next" section, populated by related posts. This is based on the current posts' tags. The section fetches up to 5 posts, which have at least one tag in common with the current post (including internal tags).

If you want to make changes to the read next section, you can edit the partials/related.hbs partial file.

For example, if you want to change the behavior from looking at all tags, to only look at the primary tag. Edit the filter of the {{#get}} from this:

filter="tags:[{{post.tags}}]+id:-{{post.id}}"

To this:

filter="tags:[{{post.tags.[0].slug}}]+id:-{{post.id}}"

This will make sure to check the primary tag of your current post (the first tag) and fetch posts which have that tag.

Color customization

The most important CSS configurations of the theme are defined as custom CSS properties, so you can easily overwrite them from code injection to change background colors, text colors, and more.

The theme comes with light and dark color schemes (and system), the default one can be set in the admin using the Default color scheme in Settings > Design > Site-Wide.

The included color schemes:

• light
• dark

The default option is system which will be either the dark or light theme, depending on the user's preference.

It's possible to change the color schemes by changing the properties. This can be done by adding the following in code injection and adjusting the values.

To change the light theme:

<style>
  :root {
    /* color configuration */
    --color-text: hsl(0 0% 15%);
    --color-text-acc: hsl(0 0% 25%);
    --color-text-reverse: hsl(0 0% 85%);
    --color-bg: hsl(0 100% 100%);
    --color-bg-acc: hsl(0 0% 97%);
    --color-bg-reverse: hsl(0 0% 15%);
    --color-bg-base: 0 0% 100%;
    --color-bg-base-reverse: 0 0% 0%;
    --color-neutral: hsl(0 0% 50%);
    --color-border: hsl(0 0% 92%);
  }
</style>

To change the dark theme:

<style>
  html[data-color-scheme='dark'] {
    --color-text: hsl(0 0% 85%);
    --color-text-acc: hsl(0 0% 75%);
    --color-text-reverse: hsl(0 0% 15%);
    --color-bg: hsl(0 100% 100%);
    --color-bg-acc: hsl(0 0% 97%);
    --color-bg-reverse: hsl(0 0% 15%);
    --color-bg-base: 0 0% 100%;
    --color-bg-base-reverse: 0 0% 0%;
    --color-neutral: hsl(0 0% 50%);
    --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

You can even define your color schemes, but that would require changing the theme files. Steps to define new color schemes:

1. Change the package.json file, adding a new option under the color_scheme property.
2. Add the new color scheme to the dropdown editing the partials/color-scheme-dropdown.hbs
3. Add the CSS, either in code injection (using the previous code blocks as a template) or in the CSS files.

Navigation dropdown

Rinne comes with a custom feature to create dropdown menus easily for your navigation. All you have to do is add the minus sign (-) in front of the items in Settings > Navigation

Items having the - sign will be added as subitems to the main one before them. For example from the demo:

• - Membership, - Sign up and - Sign in will belong to the Members item

Additionally, the secondary menu will have its own dropdown with the ● ● ● symbol in the header.

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.

By default, this is set to 24, and you can change it in the package.json file:

"config": {
  "posts_per_page": 24
}

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": 300
  },
  "m": {
    "width": 600
  },
  "l": {
    "width": 1000
  },
  "xl": {
    "width": 2000
  }
}

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

The theme also comes with the lazysizes library for lazyloading images, to improve performance.

When it comes to aspect ratios, the postcards have an aspect ratio of 16/9, while the resource card image depends on your settings (it can be 1/1, 4/3, 16/9)

The aspect ratio in the post layouts differs based on the template used and device size.

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

The Table of contents is 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.

Google 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)
• Figtree - Figtree for both headings and body
• Space Grotesk - Space Grotesk for both headings and body font
• Outfit - Outfit for both headings and body font
• Inter - Inter for both headings and body
• Kreon - Kreon for both headings and body font
• Quicksand - Quicksand for both headings and body font
• Azeret Mono - Azeret Mono for both headings and body font

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.

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 the partials/icons directory.

Inside the partials/icons directory, you can find all included icons, in separate .hbs files.

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. Go into the partials/icons directory and create a new file: your-icon.hbs
3. Open the new file and paste the copied code from the clipboard.
4. 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 camera 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-camera" 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="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
  <circle cx="12" cy="13" r="3" />
</svg>

The next step is to create a new file: partials/icons/camera.hbs and paste the copied code in the file. The new file must be of .hbs type, so we can use it into the theme files:

{{>icon name="camera" size="lg"}}

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:

• 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)
• 🇹🇷 Turkish (tr.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

FAQ & Code Snippets

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

• How to auto load all resources on the homepage?

  First of all, you can change the posts_per_page setting to increase the number of resources/posts visible by default. If you have a very large amount of posts, you can also add the following snippet to automatically load all posts in chunks (after page load):

  Starting with version v1.1.1 you can add the following in Settings > Code Injection and in the Site Header:

  <script>themeGlobal.autoloadResources = true</script>
  

• 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: 42px; }</style>
  

• How to resize the footer logo?

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

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

• How to remove the color scheme dropdown?

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

  <style>.color-scheme { display: none; }</style>
  

• How to remove the featured posts being on top in the resources section?

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

  <style>.resource-card.is-featured { order: initial; }</style>
  

• How to remove the colors from the resource card tags?

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

  <style>.resource-card__tags span { --color-accent: var(--color-text)!important; }</style>
  

• How to hide the blog section on the homepage?

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

  <style>.section-blog { display: none; }</style>
  

• How to hide the tags section at the end of the posts?

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

  <style>.post-tags { display: none; }</style>
  

Support

Don't hesitate to reach out if you need help or have any suggestions.

Contact - Feedback