Forma Documentation

  • Ghost version: 5.x
  • Theme version: 4.0.0
  • Last updated:

First of all a huge thanks for purchasing this theme! If you have any questions that are not answered here, please feel free to contact us via email.

Theme Installation

To install Forma on your Ghost site, follow the steps:

  1. Log into the admin section of your Ghost site: yoursite.com/ghost.
  2. Go to Settings → Design and click on Change theme located at the bottom of the left hand column.
  3. Click on Upload theme.
  4. Drag-and-drop or click and locate the zip file for your theme.
  5. Once it is uploaded, click on either Activate to activate the theme immediately or Close if you want to activate it later on.

Getting Started

Uploading a Favicon

To add a favicon:

  1. Navigate to Settings → Design in your Ghost admin.
  2. Expand the Brand section.
  3. Click Upload icon next to Publication icon.
  4. Save changes.

favicon

To add a logo:

  1. Navigate to Settings → Design in your Ghost admin.
  2. Expand the Brand section.
  3. Click Upload logo next to Publication logo.
  4. Save changes.

logo

Adding Navigation

The theme supports primary and secondary navigation. Primary navigation is displayed in the slide-out sidebar, while the secondary navigation is displayed in the site footer.

To set up primary and secondary navigation:

  1. Go to Settings → Navigation in your Ghost admin.
  2. Add your navigation items by entering a page name in the label field and a destination URL in the URL field.
  3. Once finished, click Save.

navigation

Editing Section Above the Posts

Forma allows you to display the intro section or featured posts carousel above the post feed on the homepage.

To switch between the available variations:

  1. Navigate to Settings → Design in your Ghost admin.
  2. Expand the Homepage section.
  3. Select the option from the Section above post feed dropdown.
  4. Save changes.

hero

Changing Post Layout

There are two post layouts available. The default post layout is more suitable for a horizontal feature image, and the alternative post layout for a vertical feature image.

The preview of the post layout with horizontal image
Default post layout
The preview of the post layout with vertical image
Alternative post layout

To set the alternative post layout, add the internal tag #post-vert-right to your post:

tags

Using Custom Page Templates

Forma has two custom page templates: Authors and Tags.

The Authors template lists all of your site staff members ordered by post count, and the Tags pages lists all tags used throughout the posts.

To set the page template, open the Page Settings and select the suitable option from the Template dropdown.

page template

Creating Landing Page

If you have enabled Ghost’s new Beta Editor, it’s now possible to remove the title and feature image from a page. Then, using Header and other cards you can create a unique look for your pages without having to know how to code.

To hide the title and feature image from a page, open the Page Settings and turn off the Show title and feature image toggle.

Landing page

Members

Ghost members feature allows you to turn your site into a membership business with member signup, paid subscriptions and email newsletters.

If members feature is enabled on your site, the theme displays Subscribe and Sign in links in the header and slide-out sidebar (on small screens). When clicked, these links open the Ghost members portal.

Enabling Comments

Forma supports Ghost native comments. To enable the comments:

  1. Navigate to Settings → Membership in your Ghost admin.
  2. Select the suitable option from the Commenting dropdown.
  3. Save changes.

Native comments

The social media links are displayed in the footer of the theme.

To add Facebook and Twitter links:

  1. Navigate to Settings → General in your Ghost admin.
  2. Click Expand next to Social accounts.
  3. Enter the URLs of your Facebook and X (Twitter) profiles.
  4. Save changes.

social links

All other social media links can be added manually in the social-links.hbs file located in the partials folder of the theme. For instance, if you want to add the link to your Instagram account use the following code:

<a href="YOUR_INSTAGRAM_ACCOUNT_LINK" class="button button-icon button-link" target="_blank" rel="noopener" aria-label="Instagram">{{> "icons/instagram"}}</a>

To see the available icons, please check the /partials/icons folder of the theme.

You can edit the copyright information via the .json translation file located in the /locales folder. Or you can edit it directly in the/partials/footer.hbs file using a code editor.

Adding Google Analytics

To add Google Analytics to your site, please follow the Google Analytics Integration guide by Ghost.

Theme Customization

Changing Color Scheme

Forma is available in light and dark color schemes. To change the theme color scheme:

  1. Navigate to Settings → Design in your Ghost admin.
  2. Expand the Site-wide section.
  3. Select the option from the Color scheme dropdown.
  4. Save changes.

Settings panel preview for changing Forma color scheme

Changing Accent Color

To change the theme accent color:

  1. Navigate to Settings → Design in your Ghost admin.
  2. Expand the Brand section.
  3. Choose your color.
  4. Save changes.

Settings panel preview for changing Forma accent color

Changing Posts Per Page Number

You can set the number of post displayed per page in the package.json file of the theme. The default post number is set to 8:

"config": {
    "posts_per_page": 6
}

Theme Translation

The Forma theme is ready for translations. You can find the default file in the locales folder. Copy locales/en.json to locales/[language_code].json where “language_code” must be replaced with a valid code. You can edit the renamed translation file with any plain text editor.

Even if your site is in English, you can customize any theme texts by simply editing the default English file ( locales/en.json ), without modifying the theme templates.

You can find more information on how to translate the theme in Ghost documentation.

Adjusting Style

To customize the theme style, use the Code Injection tool and place your CSS rules in the Site Header field.

For instance, to adjust the site title size:

  1. Navigate to Settings → Code Injection in your Ghost admin.
  2. Add the necessary CSS rules to the Site header field.
  3. Save changes.

Settings panel preview for making Forma style adjustments

Credits

Support

The documentation included provides all the information needed to get the theme installed and customized. However, if you have any questions you can email us at support@justgoodthemes.com, and we will be happy to help you.

If you have any bug reports, or feature requests, please let us know!

Updates

As Ghost platform grows, so will this theme. We’re dedicated to keeping our Forma up to date.