Futura Documentation

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.

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';
Set The position of sidebar in sidebar_left variable.
- If you want the sidebar at left side then set sidebar_left = true;. Otherwise keep default value sidebar_left = false;
Facebook Page settings
- Set your Facebook profile/page URL facebook_page_url = 'YourFacebookPageURL';
Set your Flickr ID in flickr_id. To get your ID login to flickr.com and click on 'you'. The last part between / is your ID. You can also use idgettr.com to get flicker ID easily.
API key setting for search
- Go to your admin dashboard and visit "Integrations" setting page.
- Scroll Below and click on the "Add custom integration" button.
- 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.

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. Sidebar Position
var sidebar_left = false; // Set true or flase for positioning sidebar on left


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

//	4. Flickr Setting
var flickr_id = '52617155@N08';

// 5. content API key
var api_key = 'ADD-API-KEY-HERE';

To add the actual social links to the icons in "follow widget" please follow the steps below

open widget-social.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 widget-social.hbs file will look like below.

<!-- start social links -->
<!-- replace the # with your own profile link address -->
<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-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
<li><a href="#"><i class="fa  fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="#"><i class="fa fa-stack-exchange"></i></a></li>
<li><a href="#"><i class="fa fa-xing"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="/rss/"><i class="fa fa-rss"></i></a></li>
<!-- end social links -->

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-social.hbs

Please Follow the steps below.

Open sidebar.hbs folder and then reorder 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 then add ! like this {%raw}{{!> widget-facebook}}{%endraw%}
Then save the file

The sidebar.hbs will look like this.

{%raw}

<!-- start sidebar -->
<div class="col-md-4 sidebar">
   {{> widget-social}}
   {{> widget-subscribe}}
   {{> widget-recentpost}}
   {{> widget-tagcloud}}
   {{> widget-ad}}
   {{> widget-facebook}}
   {{> widget-twitter}}
   {{> widget-text}}
</div>
<!-- end sidebar -->

{%endraw%}

Please enable Subscribers feature in lab page at your dashboard. otherwise widget-subscribe will not work.

Follow the same procedure for footer widget. The widgetized area of footer.hbs will look like below.

{%raw%}

<!-- start first footer widget area -->
<div class="col-sm-4">
  {{> widget-recentpost}}
</div>
<!-- end first footer widget area -->
<!-- start second footer widget area -->
<div class="col-sm-4">
  {{> widget-tagcloud}}
</div>
<!-- end second footer widget area -->
<!-- start third footer widget area -->
<div class="col-sm-4">
  {{> widget-flickr}}
</div>
<!-- end third footer widget area -->

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 and restart ghost.

Members

Go to Settings > Membership and create membership tires. Those tires will be shown on the sign up page as pricing table.

Installation

Ones the necessary configuration is done, 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 finishing upload, activate the theme.

You also have to upload another file routes.yaml in your ghost site to work all the membership related page correctly.

Go to lab page in your dashboard, scroll down and you will see an option for routes. There is a button to upload routes YAML and a link below that button to download the routes.yaml which is being used currently. Download that file and and keep as a backup.

In the downloaded zip you will find a routes.yaml file which comes with this file and specific for this theme.

Upload that file. Using "upload routes YAML" button.

Routs yaml upload

Please note, if you are using self hosted Ghost then may be a you need to restart ghost to take effect the new routes file. If you are using Ghost (pro). then you don't need to do anything here.

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 daily-news.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.

Author and tag archive

In this theme there are 2 custom template for Tag archive and Author Archive. To use those template please follow the steps below.

Create a new page.
Add a Title ( example: Authors or Authors Archive or any thing else you want).
Open page settings panel by clicking on the gear icon at top right corner of the page.
You can add an page image or keep it blank as it is.
Below that there is an dropdown selectable option called "template". Choose "author Archive" template option there.
Now save and publish the page.
Copy The "post-URL" and use it to create a menu link in design page in your admin area, as you normally do for other static page.
Save it and visit your site. If you did everything right then you will see your newly created link in your menu bar. Open to see all available author list.

For Tag archive page follow the same steps as author archive setting. At step 6 choose "Tag archive" option from dropdown select option. Then Follow all the remaining steps and you will be able to add a tag archive page in you site.

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: #FF4444;            // Primary color
@theme-color-secondary: #343334;        // Primary color
@text-color: #707070;            // Primary text color
@text-color-light: #b0b0b0;        // Light text color
@text-color-dark: #393939;        // Dark text color
@bg-color: #f0f0f0;            // Background color
@dark-bg: #101010;            // Dark background color
@light-bg: #fafafa;            // Light background color
@border-color: #f0f0f0;                // Border color
@black: #000000;                // Pure black
@white: #FFFFFF;                // Pure White
@success: #3eb751;                    // Success color
@error: #ec4444;                    // Success color`

Changelog

V 6.0.0 - 09 June, 2022

Removed deprecated API version in package.json
Removed deprecated helper.
Modified pricing table to support pricing tires with newly released helpers.
Updated minimum required Ghost version to 5.
Removed API version from package.json
Modified paid member CTA in post.
Updated translation file en.json

V 5.0.1 - 23 March, 2021

Fixed image being stretched in post content.

V 5.0.0 - March 22, 2021

Updated Ghost engines and API to v4
Replaced deprecated @site.lang with new @site.locale
Removed hard coded $ symbol and @price.currency_symbol helper, both are replaced with new price helper to show currency symbol.
Removed @lab.members condition checking members are always enabled in Ghost 4.0.
Updated single post view for properly showing the content preview above the subscription CTA.
Fixed mixed content error: HTTP and HTTPS.

V 4.0.0 - October 14, 2020

Added search functionality.
Added new notifications.
Added Account information.
Modified loading spinner and added to more places.
Removed instagram widget.
Updated translations.

V 3.1.0 - November 07, 2019

Fixed JavaScript error when comment out widget's options in config.hbs
Added new Instagram widget.

V 3.0.0 - November 07, 2019

Updated API uses to v3.
Added new Membership feature.
Modified Subscription widget to use new members feature.
Added new custom pages Account, subscribe, Sign in pages.
Custom Call to action for membership and paid membership in single post.
Added extra translation.
Removed Google+ share icon.
Removed Google+ icon from follow widget.
Removed Old mailchimp widget.
Removed old featured media script for video

V 2.6.0 - October 04, 2019

Removed Google+ widget
Added Css for new Bookmark Card

V 2.5.0 - May 24, 2019

Replaced {{lang}} helper with {{@site.lang}}

V 2.4.0 - January 28, 2019

Theme Now uses API version 2.
Removed deprecated @blog helpers and added @site helpers in place of those.
Changed old users resource to authors resource for API v2 in custom author archive.

V 2.3.0 - September 05, 2018

Added CSS and Js to support Gallery card.

V 2.2.0 - August 22, 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 support CSS.
Added Koenig Editor's Embed card's support CSS.
Added keyword "ghost-theme" in package.json file

V 2.1.0 - April 05, 2018

Added two new custom template, custom-author-archive.hbs and custom-tag-archive.hbs
Added translation support.
Ghost 1.22.0 new feature multiple author on single post. Added support for showing multiple author on a single post view.
Ghost version 1.22.0 deprecated {{author}} helper and added new helper {{authors}}. Made required changes to few files to adopt this new feature.

V 2.0.0 - July 01, 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
Recent post widget now written using {{get}} helper. Removed old JavaScript method. For this reason, "recent_post_count" setting in config.hbs file also removed.
Removed analytics.hbs file. To add analytic code in your site, use Ghost's inbuilt code injection feature and add your code in blog footer area.
removed manual-navigation.hbs ( those who use ghost inbuilt navigation will not be effected.).
Added Author's twitter and Facebook link in about author area and author cover area.
Font Awesome and Bootstrap updated
jQuery library updated to v2.2.4

V 1.4.0 August 06, 2016

Rewrite some JavaScript to use Ghost API instead of RSS feed. Now enabling public API under lab settings is required
Modified tag cloud widget using ghost's get helper to show all available tags.
Change Twitter widget's to use twitter's new widget code.

V 1.3.0 - September 30, 2015

Added jQuery library because Ghost removed jQuery from core in version 0.7.0

V 1.2.0 - April 16, 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 - April 13, 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 - February 10, 2015

Initial release

On this page

Using the theme

Theme option configuration

Sidebar & footer widgets

Twitter Widget Settings

Members

Installation

Navigation links

Author and tag archive

Theme translation

How to change color

Changelog

V 6.0.0 - 09 June, 2022

V 5.0.1 - 23 March, 2021

V 5.0.0 - March 22, 2021

V 4.0.0 - October 14, 2020

V 3.1.0 - November 07, 2019

V 3.0.0 - November 07, 2019

V 2.6.0 - October 04, 2019

V 2.5.0 - May 24, 2019

V 2.4.0 - January 28, 2019

V 2.3.0 - September 05, 2018

V 2.2.0 - August 22, 2018

V 2.1.0 - April 05, 2018

V 2.0.0 - July 01, 2017

V 1.4.0 August 06, 2016

V 1.3.0 - September 30, 2015

V 1.2.0 - April 16, 2015

V 1.1.0 - April 13, 2015

V 1.0.0 - February 10, 2015

Futura Documentation

On this page

Using the theme

Theme option configuration

Adding social links

Sidebar & footer widgets

Twitter Widget Settings

Members

Installation

Navigation links

Author and tag archive

Theme translation

How to change color

Changelog

V 6.0.0 - 09 June, 2022

V 5.0.1 - 23 March, 2021

V 5.0.0 - March 22, 2021

V 4.0.0 - October 14, 2020

V 3.1.0 - November 07, 2019

V 3.0.0 - November 07, 2019

V 2.6.0 - October 04, 2019

V 2.5.0 - May 24, 2019

V 2.4.0 - January 28, 2019

V 2.3.0 - September 05, 2018

V 2.2.0 - August 22, 2018

V 2.1.0 - April 05, 2018

V 2.0.0 - July 01, 2017

V 1.4.0 August 06, 2016

V 1.3.0 - September 30, 2015

V 1.2.0 - April 16, 2015

V 1.1.0 - April 13, 2015

V 1.0.0 - February 10, 2015