Theme Info

Name: Joben
Description: a Subscription & Multipurpose Ghost Theme
Released: 2020-07-05
Creator: Biron Themes

Requirements

Ghost version: 3.0 or higher
Ghost Content API: v3

Content API

As mentioned in the Requirements section, this theme uses the Content API v3, so in order to take advantage of all the theme features make sure the Content API v3 is used, this is set in the theme by default.

You can check this in the theme's package.json file:

{
  "name": "...",
  "description": "...",
  "demo": "...",
  "version": "...",
  "engines": {
    "ghost": ">=3.0.0",
    "ghost-api": "v3"
  },
  ...

Install Theme

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Go to Settings > Design from the admin menu
  • Under the Themes section click Upload a theme
  • Click inside the upload box to select a joben.zip, or drag-and-drop the joben.zip into the upload box
  • If you want to activate the theme immediately click Activate Now or Close if you want to do it later

Publication Settings

Some basic settings for your publication:

Language

To set the publication language follow the steps below.

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Go to General from the admin menu
  • Under Publication Language, click Expand and set the language/locale to be used on the site. The default is set to English (en).

Publication Language

  • Click Save settings

Language Code Reference


Icon

To upload a new icon follow these steps:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click General under the settings menu.
  • Under Publication icon, click Upload Image and select your icon
  • Finally click Save settings

To Upload a new logo follow these steps:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click General under the settings menu.
  • Under Publication logo, click Upload Image and select your logo
  • Finally click Save settings

Cover

To Upload a new cover image follow these steps:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click General under the settings menu.
  • Under Publication cover, click Upload Image and select your cover image
  • Finally click Save settings

To add menu items to your publication, follow the steps below.

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click Design from the admin menu
  • Under Navigation, enter a label for the menu item in the label field
  • In the URL field, enter the destination for the menu item to link

Ghost Blog Navigation

  • Click Save

As of Ghost v3 there is also secondary navigation and it can be found in the same path as the normal navigation, under the Secondary Navigation.


Members

Joben completely supports the Ghost Members feature. To activate the feature follow the steps below.

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click Settings > Labs.
  • Toggle the Enable members switch, under the MEMBERS(BETA) section.

Members Beta

Within the members the following settings are available:

  • Connect to stripe - where you have to configure the connection to your stripe account to be able to accept/process payments.
  • Subscription pricing - you can define the monthly and yearly price for full access to your publication.
  • Allow free member signup - Toggle switch to allow or not free membership signup.
  • Default post access - Define the default post access. Can be: Public, Members only, Paid-members only
  • Email settings - for sending emails for member signup/sign in, you have to provide the Mailgun configuration.

Besides this configuration, you also have to upload the routes.yaml file (you can find it in the root folder of the theme).

To access the overview of members click Members from the admin menu.


Routes

Routing is the system that maps URL patterns to data and templates within Ghost. Routing for members is not added by default, so upload is needed. Basic configuration with member features enabled:

routes:
  /signup/: members/signup
  /signin/: members/signin
  /account/: members/account

collections:
  /:
    permalink: /{slug}/
    type: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Integrations

You can access Integrations in the admin section. Integrations can be used to connect built-in or custom functions to Ghost. How to create a custom integration:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click Settings > Integrations.
  • Under Custom Integrations, click Add custom integration
  • Provide a name for it
  • Add description
  • Content API Key is generated, which will be needed by the custom function to access Ghost data.

Post Templates

Joben comes with 3 different post templates:

  • post.hbs - default
  • custom-with-sidebar.hbs - post with sidebar
  • custom-with-table-of-contents - post with table of contents (and sidebar)

When a new post is created, automatically the default post template is assigned. You can change it by going to Post Settings, and under the Template section select the template you would like for the post.


Static Pages

Besides having posts, you can also create pages. For this:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Go to Manage > Pages.
  • Click New page.
  • Add the page name (which will be the slug/url for the page as well).
  • Add content for the page.
  • Click Publish.

Customization

The basic customization you can do for the theme is available through the theme-config.hbs file, located in the partials folder.

theme-config.hbs

In this file you will find a config array where you can change the following settings:

  • ghost_url - set your ghost URL here (will be used for the search)
  • ghost_key - set the Content API Key here from a custom integration (will be used for the search)
  • color_scheme - set the default color scheme. Three possible values:
    • preference - will detect the user preference (os color scheme)
    • light - the light theme will be set as default, until the user changes it
    • dark - the dark theme will be set as default, until the user changes it
  • view_type - set the default view type (this refers to the post grid on home page, author and tag pages). Two possible values:
    • grid - two or three column layout
    • list - single column layout will be used
  • grid_columns - set the number of columns you would like to have on the (home page, author and tag pages). Two possible values:
    • 3 - default is 3 column layout
    • 2 - you can have two column layout as well
  • image_lightbox - enable or disable the image lightbox on posts. Possible values
    • true - image lightbox will be enabled
    • false - image lightbox will be disabled
  • scroll_to_top - enable or disable the scroll to top function. Possible values:
    • true - scroll to top will be enabled
    • false - scroll to top will be disabled
  • header_position - you can change the site header style. Possible values:
    • initial - the header will not be visible as you scroll
    • sticky - the header will remain visible being sticked on top as you scroll
    • fixed - the header will remain visible being fixed on top as you scroll
  • disqus_shortname - set your own disqus_shortname here

You can either change the theme-config.hbs file or you can also use the Ghost Admin to change these values. In Ghost Admin go to Code Injection then in the Site Footer section you can change the config like this:

<script>
  config.color_scheme = 'dark';
  config.grid_columns = '3';
  config.scroll_top = false;
  config.image_lightbox = false;
</script>

Similarly, you can overwrite all the config values, this has the advantage that even if you download another version of the theme your settings will persist.

CSS properties

If you need heavy customization regarding styling it's a good approach to check out the theme development section, on the other hand, if you would like to change some colors and other minor settings, you can also do that from the Ghost Admin.

To overwrite the primary color in Ghost Admin go to Code Injection then in the Site Header section add these lines:

<style>
  body {
    --color-primary: #123456; //add your color here
  }
</style>

To check out all other properties you can overwrite here open the _settings.css file in the assets/css/settings directory.

Posts Per Page

You can set it in the package.json of the theme:

"config": {
  "posts_per_page": 12
}

For Joben the default value is 12, you can change it to any suitable value.


Joben uses the Ghost Search Plugin.

To activate the search and make it work, you need to edit the theme-config.hbs file (in the partials folder):

<script>
  ...
  // Basic Config
  const config = {
    ...

    /* Replace it with your domain: ghost_host: 'https://yoursite.domain' */
    ghost_host: 'http://localhost:3368', 

    /* Settings > Integrations > New Custom Integration. Copy Content API Key. Replace ghost_key below. */
    ghost_key: '55a4116f266aa7f13f51a90d72', 

    ...
  }
</script>

You will have to replace the ghost_host and ghost_key values.

ghost_host should be the domain of your blog (ex. 'https://example.com').

ghost_key has to be generated by creating a custom integration in the admin panel.

  • Create a new custom integration and name it Ghost Search
  • Copy the generated Content API key
  • Add this key in theme-config.hbs in the ghost_key section.

Other possible options to add Search to Ghost CMS Themes.


Google Fonts

Joben comes with Google Fonts integrated, using the 'Manrope' font. To change the fonts you have to change the default.hbs file.

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" as="font" onload="this.onload=null;this.rel='stylesheet'">

{{!-- No Js --}}
<noscript>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</noscript>  

Go to Google Fonts and choose the font and styles you would like. Then click Embed and copy the link provided and replace the current one in default.hbs.

Then open settings.css file located in assets/css/settings folder. Replace the font setting with your new font:

--font-sans: 'Manrope', Tahoma, Arial, sans-serif;

Build the assets (check theme development) and everything should be ready.

Check out this tutorial for a more detailed guide about Google Fonts with Ghost.


Home Page

You have the possibility to customize the Home page, for this, you will have to change the index.hbs file.

Look for the following piece of code in the file:

{{!-- Posts --}}
<div class="grid grid-col-3 post-container">
  {{#foreach posts visibility="all"}}
    {{> post-card img=true }}
  {{/foreach}}
</div>

To change from the 3 column layout to a 2 column layout, simply change the grid-col-3 to grid-col-2.

To do not display post images in the post card change the img=true to img=false.

You can also assign colors to post cards (as you can see in the demo). For this the first step is to add another class ('grid-color') to the post container:

<div class="grid grid-col-3 grid-color post-container">

The second step is to create some internal tags. Go to Ghost Admin then navigate to Tags section and click on Internal tags then New tag. Create the following tags, making sure you have the same name and slug as well, this is important because the slugs are then assigned to some colors in css.

Tag NameTag Slug
#color-bluehash-color-blue
#color-greenhash-color-green
#color-orangehash-color-orange
#color-pinkhash-color-pink
#color-purplehash-color-purple
#color-redhash-color-red
#color-royalbluehash-color-royalblue
#color-yellowhash-color-yellow

After you finished you should have the following: Ghost Internal Tags

Now the last step is simply to assign these internal tags to posts. This is like the normal process of assigning tags. When you navigate to a post and access the post settings, click the tags dropdown and you should have there the new internal tags.

After you have assigned the tag and saved the post you should be able to see the post card having the assigned color.


Site Hero

The Site Hero contains a subscribe form, based on the members feature. The Image will be the Site cover which can be uploaded in the Ghost Admin area.

The title is set in index.hbs while the secondary text is the site description from Ghost Admin, but you can also replace that in the file.

{{!-- Title and description --}}
<h1 class="hero__title">Build a beautiful website.</h1>
<div class="hero__descr m-b{{#unless @site.cover_image}} text-center{{/unless}}">{{@site.description}}</div>

To change the content of the sidebar you have to edit the sidebar.hbs file in the partials folder. By default the theme contains the following sections:

  • site info (title, description and social media)
  • featured posts
  • top 6 tags - sorted by the number of posts
  • latest posts - sorted by published date

Custom Pages

Joben comes with several custom pages by default:

  • Contact Page
  • Tags Page
  • Authors Page
  • Membership
  • Archive

To add these pages to the navigation, please check the Navigation section above.

Contact Page

To create the Contact page, do as follows:

  • Create a new page and call it Contact.
  • Make sure the Page URL is contact.
  • Click Publish.

There is a contact form included, which requires one change, adding your email address. Open page-contact.hbs in the root folder of the theme and replace youremail@domain.com with the email address the emails should be delivered to.

  <div class="contact-form m-b-lg">
    <form action="//formspree.io/youremail@domain.com" id="contact-form" class="contact-form clearfix" method="post">
Tags Page

To create the Tags page, do as follows:

  • Create a new page and call it Tags.
  • Make sure the Page URL is tags.
  • Click Publish.
Authors Page

To create the Authors page, do as follows:

  • Create a new page and call it Authors.
  • Make sure the Page URL is authors.
  • Click Publish.
Membership Page

To create the Membership page, do as follows:

  • Create a new page and call it Membership.
  • Make sure the Page URL is membership.
  • Click Publish.
Archive Page

To create the Archive page (this will list all posts), do as follows:

  • Create a new page and call it Archive.
  • Make sure the Page URL is archive.
  • Click Publish.

Translation

Joben supports Ghost i18n and it comes with translations for the following languages:

  • en for English
  • de for German
  • fr for French
  • es for Spanish
  • it for Italian
  • pr for Portuguese

To change the publication language to one of the available languages check out this guide.

Editing the translations

The translation files are stored in the locales folder within the theme folder.

|-- locales
|   |-- de.json
| |__en.json
| |__es.json
| |__fr.json

Open up the file for the language you want to edit. Example en.json:

{
  "load_more_posts": "Load more posts",
  "load_comments": "Load comments",
  "send": "Send",
  ...
}

Each line consists of a key-value pair.

"key": "value"

The key is on the left side and it should not be changed (it's the same in all the files) and right value which you can adapt if necessary.

If you have suggestions to improve the translations or adding a new language, drop us a line.

Adding a new language

To add a new language you have to create a new translation file with the language code of the desired language.

For example if you want to create new translation for hungarian language you have to create hu.json within the locales folder.

And add the translations for each key value.

For more details check the Official Ghost Documentation.


The social media links are stored in a partial file partials/social-media.hbs.

Ghost supports Facebook and Twitter social accounts, to change them do the following

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Go to General from the admin menu
  • Click Expand under Social Accounts, and enter the URLs for your Facebook and Twitter.
  • Click Save settings

To edit the other social links follow the steps below. Open up the social-media.hbs file and change the href value to your profile's URL for that specific social platform.

  ...
  {{!-- Instagram --}}
  <a class="social-links__item instagram"
     href="https://instagram.com" target="_blank" title="Instagram" aria-label="Instagram">
    {{>icon name="instagram"}}
  </a>
  ...
</div>

For example, to change the Instagram link, you have to change the existing href value:

href="https://instagram.com"

Add your instagram account link, example:

href="https://instagram.com/bironthemes"

Comments

Joben comes with Cove and Disqus. To change the default comment system you will have to adapt the the comments.hbs file in the partials directory. In this file the cove_comments are included using {{> cove_comments.hbs}} you can change that to disqus_comments to switch to disqus instead.

Cove

Cove is a commenting platform built on top of Ghost’s Memberships feature.

For the comments to work, you have to create an account at cove.chat and change the cove_comments.hbs file in the partials folder:

 <script>
  const Cove = {
    publication: "your_cove_chat_publication_id",
    contentId: "{{id}}",
    memberId: "{{@member.uuid}}",
    memberEmail: "{{@member.email}}"
  }
</script>

Replace the value for the publication with the one from your Cove account.

Disqus

Joben comes with Disqus comments as well.

Make sure you have registered your website with Disqus and you know your disqus_shortname.

Open theme-config.hbs file located in partials folder. Change the biron-demo value to match your Disqus account shortname.

<script>
  ...
  // Basic Config
  const config = {
    ...
    /* Replace 'biron-demo' with your disqus account shortname */
    disqus_shortname: 'biron-demo'  
  }
</script>

That's all, Disqus comments should work now.

If you don't want disqus comments to show delete the disqus_comments.hbs file located in the partials folder. And delete the following section from post.hbs, custom-no-sidebar.hbs, custom-with-table-of-contents.hbs files located in the root folder of the theme:

{{!-- Include Comments --}}
{{> disqus_comments}}

Google Analytics

To add Google Analytics to Ghost follow this tutorial from our blog.


Progressive Web App

Progressive Web Apps allow your website to be installed by anyone, anywhere, on any device with a single codebase.

To customize the appearance you have to change the following files.

  • default.hbs
  • manifest.webmanifest

In the default.hbs this is the relevant section for PWA.

{{!-- PWA --}}
<link rel="manifest" href="{{asset 'manifest.webmanifest'}}">
<meta name="theme-color" content="#6751EB">
<link rel="apple-touch-icon" href="{{asset 'icon-192x192.png'}}">

Change the theme-color content for your primary color and replace the icon-192x192.png with your own icon (it must be 192x192 pixels).

Next open the manifest.webmanifest file:

{
  "name":"Joben Ghost Theme",
  "short_name":"Joben",
  "description":"Joben - a Subscription & Multipurpose Ghost Theme",
  "lang":"en",
  "start_url":"/",
  "background_color":"#ffffff",
  "display":"standalone",
  "theme_color":"#6751EB",
  "icons":[
     {
        "src":"/assets/icon-48x48.png",
        "sizes":"48x48",
        "type":"image/png"
     },
     {
      "src": "/assets/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/assets/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Replace all the relevant information like name, short_name and description. Also, replace all the icons with your own.

That's it, the rest is taken care of.

Visit our blog post for more information about Progressive Web App for Ghost Themes.


Theme Development

Joben is developer friendly, if you need to make advanced customization you will 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. In order to customize the theme make sure you have Node.js and npm installed.

Tutorial on How to Install Ghost.

Run the following commands in the Joben 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 .hbs, .css or .js file the change will trigger the gulp watch task and this will compile the assets with your changes.

If you want to compile css or javascript separately, you can run:

gulp css

For compiling CSS files.

Or:

gulp js

For compiling javascript files.

You also have the option to use Code Injection to do customizations. For example, if you want to change the brand color of the theme, add the following code in the Blog Header section.

body {
    --color-primary: pink;
}

Credits

Joben uses the following packages/pulgins:

Images are not included in the download files!


Support

Don't hesitate to contact us if you have any suggestion or need help.

Contact

Change Log

v1.2.1 - 22 Jul 2020
Changes:
[+] added cancel membership option 
[*] refactored theme-config

Changed files:
[*] members/account.hbs
[*] assets/css/components/_members.css
[*] assets/dist/app.min.css (generated file)
[*] assets/dist/app.min.css.map (generated file)
[*] package.json
[*] default.hbs
[*] partials/theme-config.hbs

New files:
[+] partials/global-scripts.hbs
v1.2.0 - 18 Jul 2020
Changes:
[*] fixed bug for table of contents with sticky header
[*] added a bit more contrast in post card (border color & tag background)
[*] updated the dependecies
[+] added turkish translation

Changed files:
[*] assets/css/components/_post-card.css
[*] assets/css/components/_toc.css
[*] assets/css/settings/_settings.css
[*] assets/dist/app.min.css (generated file)
[*] assets/dist/app.min.css.map (generated file)
[*] package.json
[*] assets/js/script.js
[*] assets/dist/app.min.js (generated file)
[*] assets/dist/app.min.js.map (generated file)

New files:
[+] locales/tr.json
v1.1.0 - 10 Jul 2020
Changes:
[*] fixed a bug regarding the comment section width
[*] improved table styles
[*] improved image sizing of post-card images
[+] added cove comments (as default comment system)
[+] added post grid config option 

Changed files:
[*] assets/css/app.css
[*] assets/css/elements/_table.css
[*] assets/css/components/_sections.css
[*] assets/dist/app.min.css (generated file)
[*] assets/dist/app.min.css.map (generated file)
[*] package.json
[*] partials/post-card.hbs
[*] partials/tag-card.hbs
[*] partials/comments.hbs
[*] partials/related-posts.hbs
[*] partials/theme-config.hbs
[*] default.hbs
[*] index.hbs

New files:
[+] assets/css/components/_comments.css
[+] partials/cove_comments.hbs
[+] partials/disqus_comments.hbs
v1.0.1 - 06 Jul 2020
Changes:
[*] fixed a bug on safari browser (search images a stretched vertically)
[*] fixed small bug on safari browser (tag-list under hero section)
[*] fixed header menu alignment when there are many items 

Changed files:
[*] assets/css/components/_header.css
[*] assets/css/components/_search.css
[*] assets/css/components/_tag.css
[*] assets/dist/app.min.css (generated file)
[*] assets/dist/app.min.css.map (generated file)
[*] package.json
[*] partials/header.hbs
v1.0.0 - 05 Jul 2020
[+] Initial release