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 signed 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. 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

The config.hbs file will look like below.

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

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

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

To add the actual social links to the icons on footer 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.
  • Remember, There is no need to change the rss link.

The social_links.hbs file will look like below.

<ul class="social-links">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></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-github"></i></a></li>
<li><a href="/rss/"><i class="fa fa-rss"></i></a></li>
</ul>

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 avant.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.

  • Post an page in your blog.
  • Copy the URL for this page.
  • 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.

Theme translation

This theme supports translation. Please follow the steps below to translate this theme in your language.

  • Within theme folder, there is a folder named "locales". In that folder by default you will find a file named "en.json". This is the default file for English language and you have to use this file to create your own language file.
  • make a copy of en.json and give a name following this format [language_code].json ( example: for French fr.json for German i.e. Deutsch de.json for Russian ru.json etc. )
  • If you are not sure about what is you language code then you can visit this wiki page and see. Use the two letter (ISO 639-1) code.
  • Now open the newly created <your_language>.json file in text editor. You will see "KEY": "VALUE" format in each line.
  • In English language KEY and VALUE are same. Now you read the left part of the : i.e. KEY part and change the tight part i.e. VALUE part to your own language.
  • After finishing the translation Save the file and upload the theme to your site.
  • Go to your admin area, Visit "General setting" page and change the "publication Language" option. By default there is "en" for English. Add your own language code there in place of "en" and save the settings.
  • Visit your site, If everything goes right, you will see all the theme related text in your site is in your translated language.

If you translate the theme in any language, then please consider to share ( feel free to send me via email ) that language file. I will add that file to the theme, so that it will available to other users.


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: #0097A7; // theme color
@bg-color: #607D8B; // Background color / secndary theme color
@bg-color-light: #e0ecef; // Light background color
@text-color: #707070; // Main text color
@text-color-heading: #202525; // Heading text color
@text-color-light: #b6b6b6; // Light text color
@border-color: #dedede; // border color
@footer-color: #263238; // footer color
@black: #000000; // Pure black
@white: #FFFFFF; // Pure White

Changelog

V 2.2.0 - May 29, 2019

  • Added new {{@site.lang}} helper
  • Replaced deprecated @blog helper with new @site helper.
  • Changed author helper in author.hbs to make it compatible with Ghost 2.0.0
  • Added CSS and js for image gallery
  • Replaced GhostHunter with fuse js, rewritten search function.
  • Added new API key settings in config.hbs file.
  • Added support for API v2

V 2.1.0 - August 27, 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
  • Added subscription feature support.
  • Added translation support.
  • Added Koenig Editor's Image card's different image width CSS class.
  • Added Koenig Editor's Embed card's support CSS.
  • Fixed Pinterest share links.
  • Added keyword "ghost-theme" in package.json file

V 2.0.0 April 09, 2018

  • 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 deprecated helpers and added new helpers in place of those old helpers.

V 1.3.0 - August 09, 2016

  • Updated third party libraries ( Bootstrap, Font Awesome, Ghost hunter). Tested with Ghost's latest version - 0.9.0.
  • Now enabling public API under lab settings is required.

V 1.2.0 - April 17, 2015

  • Added previous and next post link in single post view
  • Added new prev-next.hbs file and it contains the code for the Previous and next post link. This partial is called in post.hbs file below the post comment.
  • Added Required css for this.

V 1.1.0 - March 24, 2015

  • Added Support for Ghost's inbuilt navigation (Available from Ghost - 0.5.9)
  • Changed the name of the old file navigation.hbs to manual-navigation.hbs.
  • Added new navigation.hbs file according to ghost's latest version requirement.
  • Added small CSS to highlight the current page when using Ghost's inbuilt navigation system.

V 1.0.0 - January 27, 2015

  • Initial release.