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

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. Facebook Page settings

   • Set your Facebook profile/page url facebook_page_url = 'YourFacebookPageURL';

3. API key setting

   • 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. Facebook Page Setting
var facebook_page_url = 'https://www.facebook.com/gbjsolution';

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

Adding social links

To add the actual social links to the icons 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.

<div class="social">
    <ul>
        <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="/rss/"><i class="fa fa-rss"></i></a></li>
    </ul>
</div>

Sidebar Widgets

The sidebar is widgetised. 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 seperate in partials folder and named with prefix 'widget'. Example:- widget-facebook.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 {{> widget-tagcloud}} then add ! like this {{!> widget-tagcloud}}
• Then save the file

The sidebar.hbs will look like this.

<div class="sidebar-wrap">
  <aside class="sidebar">
    
    
    
    
    
  </aside>
</div>

Members

Ghost introduced Members feature in Ghost version 3.0.0. This members feature is fully supported by this theme.

From Ghost version 4.0.0 Members are always enabled by default. If you are using old version of Ghost then You can enable this member feature from the lab page in your ghost dashboard.

Before Uploading the theme to your site you have to edit the text ( key points ) in your free, monthly and yearly pricing plan.

You will find following 3 files within the theme which are located in partials/members folder within the theme folder. These are three files for 3 different pricing plan.

• pricing-table-free.hbs
• pricing-table-monthly.hbs
• pricing-table-yearly.hbs

Open First file and start editing. Starting from line number 11 in each file you will see those key points in each line one after one. See example as below.

<li>Access to all free private posts</li>
<li>Weekly updates with new content</li>
<li>Support independent publishing</li>
<li>No card details required</li>

Keep on editing those sample text to add you own text. you can add as many line as you want.

When you are done with editing a file. Save that file and continue with the next file. Follow the same instruction to edit all files. Finish editing these files and you are ready to go to the next step.

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.

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.

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: #E74C3C;                // theme color
@bg-color: #343A40;                    // Background color / secondary theme color 
@bg-color-light: #e0ecef;            // Light background color
@text-color: #555555;                // Main text color
@text-color-heading: #292929;        // Heading text color
@text-color-light: #969696;            // Light text color
@border-color: #ebebeb;                // border color
@error: #e71212;                    // error color
@success: #2db603;                    // success color
@black: #000000;                    // Pure black
@white: #FFFFFF;                    // Pure White

changelog

V 4.0.0 - April 01, 2021

• Updated Ghost engines and API to v4
• Replaced deprecated @site.lang with new @site.locale
• Used new price helper for 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.
• Tags and share links in post single view are now shown to all post.
• Added loading spinner and notifications for edit account bill info.
• Updated translation file en.json.
• Fixed image being stretched in post content.
• Removed Google plus icon from social links.

V 3.0.0 - April 23, 2020

• Added full support for membership feature.
• Updated subscription widget to work with new membership feature.
• Added CSS for bookmark card.
• Updated translation file.

V 2.1.1 - July 02, 2019

• Fixed search result's link was broken.

V 2.1.0 - May 28, 2019

• Added @site.lang
• Replaced @blog with @site
• added support for API v2. There is a new option to add your API key in config.hbs
• Replaced GhostHunter with fuse js. Rewritten search function to use fuse with API V2
• Removed Google+ widget, as this service by google were shut down

V 2.0.0 - November 18, 2018

• Updated the theme to work with ghost 2.0 and above.

NOTE: Below versions was for ghost version 0.x.x and no longer usable. So please ignore those versions.

V 1.5.0 - August 09, 2016

• Updated ghost hunter javascript library. Now it use Ghost API instead of RSS feed. Now enabling public API under lab settings is required.
• Updated Bootstrap and fontawesome.
• 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.
• Fixed email subscription error.

V 1.4.0 - March 24, 2015

• Fixes some minor CSS issue in Firefox.
• Added Ghost's built in navigation Support.

V 1.3.0 - February 9, 2015

• Fixes the issue for code block
• Removed the partials files loop.hbs, full-post.hbs and static-post.hbs
• Now the content of those files are merged in author.hbs, index.hbs, page.hbs, post.hbs and tag.hbs
• Also error.hbs file has been removed for better error handling.

V 1.2.0 - January 27, 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.

V 1.1.0 - January 17, 2015

• 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.1.0 - January 07, 2015

• Initial release.