Goblin Setup Guide

Introduction

Goblin is a minimal newsletter, blog & Magazine ghost theme. Since Goblin is a multipurpose ghost theme you can use it to build ghost sites for your Newsletter or Blog/Magazine or even a personal site.


Theme Installation

  • Download the theme from Dashboard
  • Log in to the admin section of your Ghost blog yourblog.com/ghost.
  • Go to Setting > Theme theme installation
  • Click on the Upload a Theme green button.
  • An upload box will open, then choose the theme goblin.zip
  • Once uploaded. Click on Activate now button to activate.

Logo

This section is for setting up an image based logo. If you do not use image logo then site title will be shown at the place of logo and you can skip this section.

The theme has option to toggle dark and light mode. So you will need two logo to adjust the color combination of Dark & Light mode

If you want to use an image based logo then please follow the steps below:

  • Prepare 2 version of your logo for Normal Mode & for Dark Mode. logo version example
  • From your ghost Dashboard upload the normal logo
  • Now for the Dark mode logo, you have to unzip the theme & place your Dark mode logo to assets/images/ replacing the existing file logo-dark.png . Make sure to keep the file name same as i.e logo-dark.png
  • You can rename the filename if you want. to do that open partials/site-header.hbs file in a code editor & Make the file name changes in line number 9

From

<img src="{{asset "images/dark-logo.png"}}" alt="{{@site.title}}" class="dark-logo">

To

<img src="{{asset "images/your-dark-logo.png"}}" alt="{{@site.title}}" class="dark-logo">

Search

After installing & activating the theme the next step is to configure the search. In order to make the search functionality work we need to create Content API from ghost admin & then need to put the API key in Ghost head. To create Content API follow the steps:

From Ghost admin, click Integrations from the sidebar menu, then click + add custom integration.

Integration

Now, give the new integration a name, for example, Search and click Create.

integration1
Now the new Content API is Created. after created the page will look like below

integration2

Next, click Setting Icon & then Code injection and add the following code to the Site Header box and replace the XXXX value with your Content API KEY.

<script>
    var searchApi = 'XXXXXXXXXXXX';
</script>

Click Save & your search functionality will be working Just Fine.


Ghost Membership

Goblin supports ghost membership feature. It has custom Sign in and Sign up Page, Pricing Page & an Account page for the users. In order make the custom pages work you need to follow the steps

1. Routes

The theme comes with a routes.yaml file which can be found on the themes compress folder. To upload the routes.yaml file follow the steps:

Go to Setting > Labs & Look for Upload ROUTES.YAML button & Click on that & you will be able to upload the file.
routes

After uploading the routes.yaml file you will be able to see the sign in, sign up & account page working perfectly on your ghost publication.

2. Pricing/Membership Page

If you are going to use a paid membership into your ghost publication you will need this membership page where your users can see the plans they will subscribe. To turn on the feature follow the steps

  1. Create a new page
  2. Add a title (example: Membership)
  3. Add a feature image if you want.
  4. Open page settings panel by clicking on the at top right corner of the page.
  5. Scroll down in the settings panel and select Template > Membership for this page.
  6. If you want to add sub-title for the page use the Excerpt field of the setting panel.
  7. Save the Page & Your membership page is ready for your users.
  8. Link the page to the navigation

Author and tag archive

There are two custom template for Tag and Author Archive. To use those template please follow the steps below.

  1. Create a new page.
  2. Add a Title ( example: Authors or Authors Archive or any thing else you want).
  3. Open page settings panel by clicking on the icon at top right corner of the page.
  4. Scroll down in the settings panel and select Template > Authors for this page.
  5. Publish the page and add the page link in your navigation.
  6. Save it and visit your site.

For Tag archive page follow the same steps as author archive setting. At step 4 select Template > Authors. Then Follow all the remaining steps and you will be able to add a tag archive page in you site.


Customization

Primary Color
To change the themes primary color simply go to ghost admin > Setting > Branding, then Change the color from Accent color & it will change the themes primary color.

Branding

Color Variables
Here are the color variables that are used on the theme.

    --color-primary: var(--ghost-accent-color);
    --color-success: #084c16;
    --color-danger: #c31717;
    --color-base: #212529;
    --color-border: #e1edf4;
    --color-bg: #f5f5f5;
    --color-bg-white: #fff;
    --color-bg-primary: #fff;
    --color-hero-bg: #000;
    --color-white: #fff;
    --color-card-bg: var(--color-bg);
    --color-auth-bg: var(--color-white);

If you want to modify any default color then go the code Injection from Ghost admin & on site header customize the default color like below

<style>
    :root {
            /* Overriding the default color */
            --color-success: green;
            --color-border: gray;
         }
</style>

Comments

1. Disqus

Goblin comes Disqus comment engine integrated. to enable the comment you need to do the following steps

Go to Ghost admin then click Setting Icon & then Code injection

add the following code to the Site Header box and replace the XXXXXXX value with your disqus_shot name.

<script>
    var disqus_shortname = 'XXXXXXXXX';
</script>

Hit Save

Now the discus comments will show up under your post page.

2 Cove

You can also use Cove comments with goblin. To use cove comments instead of Disqus follow the steps below.

Theme Translation

Goblin supports Ghost i18n and comes with English translation. You can easily translate it to your desired language.

To use another available language than English, go to Admin > General > PUBLICATION INFO > Publication Language and enter the Language Code Reference.

Lets add a language that is not included in the theme. In this case we take German language as an example.. to do that go to your theme folder & look for locales folder
Then duplicate the en.json tode.json as de is the German language code & replace the texts with your German Texts..


Support

If you need support please feel free send us an email at [email protected] or Send a DM/Tweet at Twitter @Visioun_