Organize your blog, newsletter or content site with Array10% OFF

Array Documentation

Array theme documentation, covering theme installation, routes setup, custom settings, theme development and more.
Last update: Jun 3, 2024

Theme compatibility

Array v1.0.0 for Ghost 5.x

100/100

Compatible Ghost version: v5.54.1 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 ( yoursite.com/ghost/#/settings/design/change-theme )
  4. Click Upload theme and select the {theme-name}.zip file.
  5. After the upload is complete, under Installed themes click Activate
Ghost - upload theme
Ghost - upload theme

Routes Setup

For the theme to function properly you must upload theย  routes.yaml file.

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. Under Beta features click on Upload routes file button and select the file from the root directory of the theme.
Ghost - upload routes.yaml
Ghost - upload routes.yaml

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

Ghost - design settings
Ghost - design settings

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


Homepage

The homepage is defined by the home.hbs file and it has several sections based on your theme settings:

Elements like the header and footer are included in all other templates (posts, pages)


Hero

The hero section is completely customizable from Settings > Design > Homepage, with the following options:

  • Hero headline - the hero section title

    Here you can include HTML elements, so you can add links, or format texts. Example from the demo:

    Navigating the exciting world of <a href="/tag/design/">design</a>, <mark>code</mark>, and <span><em>technology</em></span>.
    
  • Hero subheading - the hero section description

    Here you can also use HTML elements like links, bold text, etc.

  • Hero subscribe - when enabled the subscribe form will be rendered for capturing emails

  • Hero background - the hero section background style, with the following options:

    • accent-color - the brand accent color will be in the background with and svg pattern (partials/hero-bg.hbs)
    • publication-cover - the site cover image is used as background
    • none - the default option

Tags section

By default the tags with the most articles will be rendered in this section, but you can feature specific tags. The featured tags can be set from Settings > Design & Branding > Homepage > Featured tags.

Example from the demo:

design,ui-ux,ar,vr,graphics,code,ai,gadgets,cloud

Important: use the tag slugs separated by commas, and no spaces.

You can find the slug of a tag in your Admin > Tags, opening a specific tag and check the Slug field.

You can limit the number of tags from Settings > Design & Branding > Homepage > Tags limit:

  • 3
  • 6
  • 9
  • 12
  • 18
  • 30
  • all

The layout for the tags section can be set from Settings > Design & Branding > Homepage > Tags layout. The options are:

  1. asymmetric-grid - the default options which renders the tags in a 3 column grid with some offsets making the layout asymmetric
  2. bento-grid - the tags are rendered in a bento style grid, some cards spanning an additional row or column
  3. classic-grid - classic 3-column grid
  4. sections-with-posts - each tag is rendered in it's own section including a maximum of 5 posts

Additionally, you can set the tag card background style from Settings > Design & Branding > Homepage > Tag card background. The options are:

  1. accent-color - the tag accent color is set as the background
  2. accent-color-pattern - the default option, using the tag accent color as background with a geometric pattern applied
  3. feature-image - the tag feature image is set as the background

Post feed

The logic and the layout is defined in the partials/post-feed.hbs file.

The layout of the feed is based on what you set in Settings > Design & Branding > Homepage > Post feed layout. and the possible values are 1-column, 2-column and 3-column.

This layout is used on the homepage for the latest section as well as the tag and author templates.

There is one additional setting for the homepage only, which lets you decide what the feed will render:

  • latest posts
  • featured posts
  • none

The header is defined in the partials/header.hbs and it renders your publication logo, primary navigation, the native search button.

Customizing options:

  • header primary navigation - By default the header will include your primary navigation, but you can disable this, in case you prefer a minimal header. To change this go to Settings > Design & Branding > Site-wide > Header primary navigation

  • header last nav item styled - By default the header will include special styling for the last navigation item. To disable this special styling go to Settings > Design & Branding > Site-wide > Header last nav item styled


The footer is defined in the partials/footer.hbs and it renders your publication logo, site description, a subscribe form, primary & secondary navigation, social links and finally copyright.


Flair comes with a custom feature to create dropdown menus easily for your header 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 previous navigation item. For example from the demo:

  • - Membership, - Sign up and - Sign in will belong to the Members item
Array - dropdown menu setup
Array - dropdown menu setup

Post templates

The theme comes with 3 custom post templates, these templates can be selected from the Post Settings menu:

  • custom-post-with-narrow-feature-image.hbs - a post template with a narrow feature image (same as the content)
  • custom-post-with-no-feature-image.hbs - a post template with a no feature image
  • custom-post-with-wide-feature-image.hbs - a post template with wide feature image
  • custom-post-with-table-of-contents.hbs - a post template with table of contents

You can set one of the above templates as the default post template for your posts from Settings > Design & Branding > Post > Default post template


Custom templates

The theme comes with a couple of custom page templates, these templates can be selected from the Page Settings menu, under Template:

  • custom-template-membership.hbs - select this to create a membership page including your tiers
  • custom-template-signin.hbs - select this to create a sign in page
  • custom-template-signup.hbs - select this to create a sign up page
  • custom-template-tags.hbs - select this to create a tags page - you can create multiple such pages

Custom collections

The theme comes with one custom collection: /archive/, which lists all your posts. To active it you must upload the routes.yaml file.

Setting meta data

To control the meta data for this page you have to create a page in your admin with the same URL and add the data property in the routes file.

Here are the exact steps:

  1. Change the routes file and add the data property:
  /archive/:
    controller: channel
    template: archive
    data: page.archive
  1. Create a new page in your admin and make sure the page URL is archive
  2. Re-upload the routes.yaml

Color customization

You can change the main accent color from Settings > Design > Brand. Additionally, under Settings > Design > Site-wide you can change three other colors:

  • Background color - site wide background color
  • Text color - used for most of the text
  • Border color - used for elements which have border, for example the footer

With these options you can easily configure and set a custom color scheme. For specific examples and to play around with the options check out the demo https://array.brightthemes.com/colors/

Some useful tools for choosing colors and gradients:


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 12, and 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 image sizes defined there will be used to generate copies of images at the specified sizes when uploading images in Ghost Admin.


Comments

Flair comes with 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.

By default, native comments are not active, so you have to select either

All members or Paid-members only


Fonts

You can set the font family from the Admin section, going to Settings > Design > Site-wide. There are two options, one for the headings and another for the rest of the elements:

Headings font options:

  • Arima
  • Bricolage Grotesque
  • Figtree
  • Inter
  • Kalnia
  • Outfit
  • Podkova
  • Sen
  • Syne
  • Unbounded
  • System - loads the system font (no requests to Google Fonts)

Body font options:

  • Arima
  • Bricolage Grotesque
  • Figtree
  • Inter
  • Kalnia
  • Outfit
  • Podkova
  • Sen
  • Syne
  • Unbounded
  • System - loads the system font (no requests to Google Fonts)

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.


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

Social links are shown in the footer by default. The basic social links that Ghost comes with can be edited from Settings > General settings > Social accounts:

  • Facebook
  • X(Twitter)

The theme also comes with the following list of social platforms:

  • threads
  • linkedin
  • discord
  • github
  • instagram
  • pinterest
  • reddit
  • telegram
  • tiktok
  • whatsapp
  • youtube

To activate any of these platforms, add the following in your Admin Settings > Code Injection > Site footer. For example to activate GitHub:

<script>
  socials.github = 'https://github.com/brightthemes'
</script>

That's it.

If you want to add a social that isn't listed, you have to add the corresponding icon then modify the partials/social-links.hbs file, adding the block similar to the other platforms there.

Icons are from Tabler Icons.


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)

For a translation to apply, you have to set the language in Settings > General > Publication language.

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 implement your own components, you can take advantage of the developer-friendly setup of the theme.

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

The theme is built with TailwindCSS and Alpine.js. The development environment is based on Vite, the tasks can ran with npm scripts.

This guide is assuming that you have installed Ghost locally. Add the theme directory inside Ghost's content/themes/ directory then move to the theme directory in your command line. Run the npm install command to install all the dependencies.

After that is done, you have access to run the npm scripts:

  1. npm run dev (vite build --watch & vite) The dev script will start the development process, watching for changes and building. The vite.config.js file contains the main configuration for Vite.

  2. npm run build (vite build) The build script will start the build process.

  3. npm run test (gscan . --verbose) The test will test the theme using gscan the official Ghost test tool.

  4. npm run zip The zip script will create a zip file in the dist directory.


Code Snippets

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

How to change the logo size?

Go to the Admin, Settings > Code Injections and in the Site Header add, changing the values as needed:

<style>
:root {
  --logo-h-mobile: 28px;
  --logo-w-mobile: auto;
  --logo-h-desktop: 32px;
  --logo-w-desktop: auto;
}
</style>

Support

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

Contact - Feedback

Ghost Pro Hosting

Get the best managed Ghost CMS hosting and focus on bringing value to your audience.