Using the theme

To use the theme extract the main downloaded zip file.

After extracting you will find a folder named similar to theme name. That folder is the production ready ( live site ready ) theme. After the required setup you will make a zip of this folder's content ( all files and folders within this folder ) and upload it to your ghost site.

To set up the theme properly with several setting options, please read through the documentation.

Please edit theme files using a proper code editor. There are lots of free and opensource code editor available. You can choose any of those, some popular free code editor Visual Studio Code , Atom


Theme option configuration

To configure this theme properly for your site please follow below instruction.

open config.hbs file located in partials folder. Then replace the variable's value with your own values.

  1. Set the disqus_shotrname value to your won Disqus shotrname. To generate a disqus shortname...
    • Go to disqus.com and sign up.
    • Then follow the instruction and add your website there from disqus.com dashboard.
    • You will get a dishqus shortname, copy that.
    • In config.hbs set disqus_shortname = 'yourDisqusShortnameHere';
  2. Navbar setting
    • set the fixed_navbar to either true or false for fixed navbar or normal navbar. default value is true for fixed navbar.
  3. Facebook Page link for Facebook widget
    • Set your Facebook page URL to facebook_page_url = 'YourFacebookPageUrlHere'.
  4. Configure The API KEY
    • Go to your admin dashboard and visit "Integrations" setting page.
    • Scroll Below and click on the "Add custom integration" Link.
    • Give it a name ( anything you want, it does not matter). You can just name it "search"
    • Save that and copy the "Content API key". Please see the image below.
    • replace ADD-API-KEY-HERE with your API key which you have copied.

api key screenshot

  1. Configure the mailchip signup form

    No need to change / configure this option if you are using Ghost version 2.0.0 or above and using ghost inbuilt subscriber feature. Keep it as it is, There will be no problem. following instruction is for user who want to use old mailchimp subscrib widget

    • Create a list on mailchimp and generate a subscribe form. Then copy the form URL and set it to mailchimp_form_url = 'YourMailchimpSubscribeFormUrl';
      Remember to remove /post from the URL. For better understanding compare to the default link provided.
    • To generate form URL login to mailchimp. Go to list tab and open your list. Now Click on "signup forms" and then you will see 4 options for form type. Choose General forms. It will open the form builder.
    • Copy the link in the "Signup form URL" field and then paste in a new tab in your browser. it will redirect to the form itself. Then copy the link from address bar and use this link.

The config.hbs file will look like below.

<script>
/*====================================================
THEME SETTINGS & GLOBAL VARIABLES
====================================================*/

// 1. Disqus comment settings
var disqus_shortname = 'example'; // required: replace example with your forum shortname

// 2. Fixed navbar
var fixed_navbar = true;

// 3. Facebook Page Setting
var facebook_page_url = 'https://www.facebook.com/gbjsolution';

// 4. Content API key ( it required to search work)
var api_key = 'ADD-API-KEY-HERE';

// 5. Mailchimp signup form Setting
// No need to change if you are using Ghost version 2.0.0 or above and using ghost inbuilt subscriber feature
// Keep it as it is, there will be no problem
var mailchimp_form_url = 'http://gbjsolution.us4.list-manage.com/subscribe?u=a63b2fed3ed61b70bf56d1aed&id=1e3806b1d4';
var success_message = "Please check your inbox and confirm your email address. Thanks!";
</script>

To add the actual social links to the icons in header and social widget ( follow us ), please follow the steps below.

  • open social-links.hbs file located in partials folder.
  • Now replace the # for each href value with your own profile links.
  • If you want to add any other icon then just copy one of the line there and only replace the fa-* class in that line. For list of available icons in fontawesome visit here.

The social-links.hbs file will look like below.

<ul class="social-links">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>

Featured post slider

At home page there is a slider which shows featured posts. By default it shows 3 featured posts ordered by latest published date.

Normally you don't need to change or setup anything for this. But if you want to change the number of featured post in the slider then open follow steps below

  • Open slider.hbs file located in partials folder and then at the beginning you will see this line of code.
{{#get "posts" limit="3" filter="featured:true" include="author,tags"}}
  • Change the number 3 to the number, how many post you want to show there.

The sidebar is widgetized. You can move up and down or entirely remove any of theme if you wish. To do that you have to make very little changes in sidebar.hbs file which is located in partials folder.

All the widget files are separate in partials folder and named with prefix 'widget'. Example:- widget-newsletter.hbs

Please Follow the steps below.

  • Open sidebar.hbs file and then reorder the partials call.
  • To hide or remove any widget in sidebar just comment out that specific widget.
  • To comment out any widget you need to add a ! before > in that widget.

Example:- If you want to hide {{> widget-twitter}} then add ! like this {{!> widget-twitter}}

  • Then save the file

The sidebar.hbs will look like this

<div class="col-md-4">
<aside class="sidebar">
{{> widget-about}}
{{> widget-recentpost}}
{{> widget-tagcloud}}
{{> widget-twitter}}
{{> widget-facebook}}
</aside>
</div>

Please Follow the steps below.

  • Open footer.hbs folder and then reorder the partials call.
  • To hide or remove any widget in sidebar just comment out that specific widget.
  • Then save the file

Widget area in footer.hbs will look like this..

<div class="footer-widget-area">
<div class="container">
<div class="row">
<div class="col-md-4">
{{> widget-recentpost}}
</div>
<div class="col-md-4">
{{> widget-tagcloud}}
{{!> widget-text}}
{{> widget-social}}
</div>
<div class="col-md-4">
{{> widget-text}}
{{> widget-subscribe}}
</div>
</div>
</div>
</div>

"About Me" widget settings

Please follow the steps below to setup "About Me" widget.

  • Open widget-about.hbs file. at line number 6 you will see this code
<img src="{{asset "images/author.jpg"}}" alt="profile picture" class="profile-pic">
  • It shows author.jpg image which is located in assets > images folder.
  • You can just replace that image in assets > images folder with your own image with the same name. Or, if your image name is different then you can change the name of image in above mentioned line in this file.
  • NOTE: Please use a square image. minimm size is 160x160 px.
  • Rest is straight forward. Just change all the demo text ( name, position and description) in that file with actual text which you want to show.
  • Now replace the # for each href value with actual social profile links.
  • Save the file.

Twitter widget settings

Recently Twitter has changed their widget creation process. Please follow the steps below to setup the twitter widget. Visit publish.twitter.com

  • Then add your profile URL there. Example - http://www.twitter.com/gbjsolution .
  • Choose embeded timeline.
  • Click on customization option.
  • Set height as you wish. Around 300 to 400 looks good.
  • Click on Update and then copy code.
  • Now open "widget-twitter.hbs" file which is located in partials folder.
  • In place of "Add your twitter code here" in that file, add the code which you have copied from twitter's site.
  • Save the file.

Installation

Ones the necessary configuration is complete make a zip of the modified theme folder.

Now login to your admin area and go to Design. In that page scroll down and you can find "Upload a theme" button. Upload the theme zip which you have created while ago. After completing upload activate the theme.

If you want to install the demo data to make your site as the preview then you can go to your-site-url/ghost/settings/labs/ and then import the borsha.ghost.demo.json file there. This file is located in demo data folder in main download folder.


To add links to you static page please follow the steps below.

  • Create a new page in your dashboard.
  • Copy the URL for this page from the page settings panel.
  • Go to Design page in your admin dashboard.
  • Add a label and the URL and save it.
  • Now the theme will show newly added link in navigation.

Featured Media in post

Ghost supports featured/cover image in post natively, and this theme handle that nicely.

If you want to add any embeded media like YouTube video, vimeo video, SoundCloud music or any other embeded iframe as featured media in your post then you have to wrap that in <featured>Your Embed code here...</featured> tag while writing the post. This embeded featured media will be shown at the place of cover image in full post view. Also set a cover image to display in homepage or other post listing page.

An example of YouTube video below.

<featured><iframe width="560" height="315" src="//www.youtube.com/embed/Uz2P2WdSzyo" frameborder="0" allowfullscreen></iframe></featured>

How to Change Color

To change the Theme color please follow the steps below.

  • First of all you need a LESS compiler. You can use koala app
  • Add the css folder of your theme (located in /assets/) to less compiler.
  • Open the variables.less file in your code editor. This file is located in assets/css/less_parts folder.
  • Now you have to change the color hexcode (#xxxxxx) in this file and save the file.
  • Now compile the screen.less file using less compiler. This file is located in assets/css folder. This will rebuild the screen.css file.
  • At last Update the files in your server and restart ghost.

The variables.less file looks like below.

/*====================================================
COLOR VARIABLE FOR THEME
====================================================*/

@theme-color: #518284; // Theme color
@text-color: #363636; // Primary text color
@text-color-light: #b1b1b1; // Light text color
@text-color-dark: #222222; // Dark text color
@body-bg: #ececec; // Body background color
@light-bg: #f5f5f5; // Light background color
@border-color: #ededed; // Border color
@black: #000000; // Pure black
@white: #FFFFFF; // Pure White

/*====================================================
social colors
====================================================*/

@facebook: #3b5998;
@twitter: #1da1f2;
@google-plus: #db4437;
@linkedin: #097bb5;
@pinterest: #cc2127;
@youtube: #b31217;
@vimeo: #1ab7ea;
@dribbble: #ea4c89;
@flickr: #ff0084;
@reddit: #ff4500;
@tumblr: #35465c;
@vk: #4c75a3;
@soundcloud: #ff5500;
@github: #4183c4;
@instagram: #3f729b;
@stumbleupon: #eb4924;
@stack-overflow: #fe7a15;
@stack-exchange: #205296;
@xing: #026466;
@skype: #00aff0;
@envelope: #e73d2f;
@rss: #f26522;

Changelog

V 2.2.0 - May 30, 2019

  • Added new helper @site.lang
  • Replaced deprecated @blog helper with @site helper
  • Added API v2 in package.json. Theme now uses API v2
  • Added CSS and js for image gallery
  • Replaced GhostHunter with fuse js
  • Re-written search function to use fuse js and API v2
  • Added new API Key settings in config.hbs

V 2.1.0 - August 31, 2018

  • Upgraded the theme to use with Ghost 2.0.0 and above. For older ghost version please use older version of the theme.
  • Removed cover-author.hbs file from partials folder. Added code of those file to author.hbs file.
  • Changed author helper in author.hbs to make it compatible with Ghost 2.0.0
  • Added Ghost's inbuilt subscribe support. New widget file is widget-subscribe.hbs
  • Renamed widget-newsletter.hbs file to widget-mailchimp.hbs. This file kept for old version users. By default this widget is not being used in new version of the theme.
  • Added Koenig Editor's Image card's different image width CSS class.
  • Added Koenig Editor's Embed card's support CSS.
  • Removed javascript read time and added ghost inbuilt read time
  • Added translation support
  • Added keyword "ghost-theme" in package.json file

V 2.0.0 - July 15, 2017

  • This version is a major update. It works with Ghost version >= 1.0.0. It will not work with older version of ghost ( ghost version < 1.0.0 ).
  • Removed favicon from default.hbs template. Ghost >= 1.0.0 automatically handle it. Upload publication icon from General setting page, in your dashboard.
  • Rewritten package.json to be compatible with ghost 1.0.0
  • Replaced all depricated helpers and added new helpers in place of those old helpers.
  • jQuery library updated to v2.2.4

V 1.0.0 - September 13, 2016

  • Initial release