Traveler Ghost Theme

User Guide


Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us theme.support@lodossteam.com. Thanks so much!

Ghost

You will need ghost, in order to use this theme. You can find ghost's download and installation instructions at Ghost.org.

Theme

Navigate into your ghost folder and simply move folder with theme into the content/themes/ directory. 

To switch to your newly added theme:

  1. Restart Ghost. At the moment, Ghost won't notice that you've added a new folder tocontent/themes so you'll need to restart it
  2. Login to your Ghost admin, and navigate to /ghost/settings/general/
  3. Select your Theme name in the 'Theme' options dropdown
  4. Click 'Save'
  5. Visit the frontend of your blog and marvel at the new theme

That's all!

This theme is fully responsive and look great on all modern devices. Based on theme font and it's size we chose max width of column equal to 720px for more comfortable reading text. Theme has  a similar structre as below.

.
├── /assets
|   └── /css
|       ├── screen.css
|       ├── font-awesome.min.css
|       ├── magnific-popup.css
|       ├── normalize.css
|   ├── /fonts
|   ├── /img
|   ├── /js
├── default.hbs
├── error.hbs
├── index.hbs[required]
├── post.hbs[required]
└── page.hbs

 

All *.hbs fiels are handlebars files.  Handlebars is the templating language used by Ghost.

default.hbs

This is the default layout, or base template which contains all the boring bits of HTML that have to appear on every page – the <html>, <head> and <body> tags along with the {{ghost_head}} and{{ghost_foot}} helpers, as well as any HTML which makes up a repeated header and footer for the blog.

The default template contains the handlebars expression {{{body}}} to denote where the content from templates which extend the default template goes.

Page templates then have {{!< default}} as the very first line to specify that they extend the default template, and that their content should be placed into the place in default.hbs where {{{body}}} is defined.

error.hbs

Template to display errors (error 404 - page not found and etc.)

index.hbs

This is the template for the homepage, and extends default.hbs. The homepage gets passed a list of posts which should be displayed, and index.hbs defines how each posts should be displayed.

The homepage has a large header which uses @blog global settings to output the blog logo, title and description. This is followed by using the {{#foreach}} helper to output a list of the latest posts.

post.hbs

This is the template for a single post, which also extends default.hbs.

In this theme the single post template has it's simple header then uses the {{#post}} data accessor to output all of the post details.

page.hbs

This is the template for static pages. If your theme doesn't have a page.hbstemplate, Ghost will use the standard post.hbs template for pages.

Pages have exactly the same data available as a post, they simply don't appear in the list of posts.

 

In order to comply DRY principle we split all common content on certain partials.

├── /partials
|   ├── loop.hbs[required]
|   ├── comments.hbs
|   ├── cover-index.hbs
|   ├── featured-slider.hbs
|   ├── follow-links.hbs
|   ├── header-post.hbs
|   ├── menu.hbs
|   ├── mobile-menu.hbs
|   ├── pagination.hbs
|   ├── widgets.hbs
|   ├── widget_facebook.hbs
|   ├── widget_flickr.hbs
|   ├── widget_recent-posts.hbs
|   ├── widget_simple.hbs
|   └── widget_twitter.hbs

comments.hbs - this partial needs if you want to add comment block such as facebook or diqus(see: "How to add Disqus or Facebook comments" section)

follow-links.hbs - here you will able to change links to your social networks (see: "How to change social networks links" section)

featured-slider.hbs - slider, which contains fetured posts from the entire blog

loop.hbs - each post will be output using this markup

menu.hbs - here you will able to change links for static pages(see: "menu and static pages" section)

mobile-menu.hbs - menu for mobile devices - links are taken from the file menu.hbs

pagination.hbs - this is standard partial there you can change pagination view

widgets.hbs - container for your widgets

widget_*.hbs - partials specific widgets

We have following structure of css files:

.
├── /assets
|   └── /css
|       ├── widget_customization.css
|       ├── font-awesome.min.css
|       ├── magnific-popup.css
|       ├── normalize.css
|       ├── screen.css

font-awesome.min.css gives you scalable vector icons that can instantly be customized — size, color, drop shadow, etc

normalize.css is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

magnific-popup.css - styles for the jQuery pop-up plugin 

widget_customization.css - custom styles for the Twitter widget

The last one is screen.css contains all of the specific stylings for the page. The file is separated into sections using:

 

scss - code files organized for the most convenient and rapid changes in the selected theme. See SCSS documentation here

 

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

OR if you use Chrome Browser

You can click right mouse button on any HTML element and select Inspect Element item in context menu

and you will see all css properties of this element and it's line position in css file

then just find this line in CSS file and change what you need.

This theme imports three Javascript files.

  1. config.js - settings that you can change to personalize widgets (flickr_id, twitter widget theme and other), and also allow you to control the behavior of the slider (auto rotate, auto rotate interval & etc.)
  2. borderMenu - mobile menu borderMenu.js.
  3. featured.js - featured posts slider. Take all featured posts from your blog and make sexy slider.
  4. jflickrfeed.min.js - this plugin works by pulling a JSON feed from Flickr and applying the data it gets back to a template.
  5. imagesloaded.pkgd.min.js - detect when images have been loaded.
  6. jquery.magnific-popup.js - responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
  7. jquery.parallax-1.1.3.js - jQuery Parallax.
  8. masonry.pkgd.min.js - JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
  9. Custom scripts index.js - animation and other effects in this theme is carried out from the customs scripts. In this file we also added custom Google map generator, it build map based on special tag inserted in the post.
  10. lodash.js - a utility library delivering consistency, customization, performance, & extras.
  11. classie.js - class helper functions

 

 

If you need to add comments to your blog you can use one of 3th party scripts such as disqus or facebook. We stylized these scripts for you and they will looks great on your blog. In order to use comments you need just insert code which services provide and enjoy.

Steps:

By default theme does not contain comments

 

If you need to show some place on the map, now you can do it very easy, we did a small js plugin for this.

So in order to show a map you just need to go to admin side and insert the following code in post editor.

<mapper>
  {
    "lat": 47.221860,
    "lng": 38.922286,
    "width": "100%",
    "height": "200px",
    "zoom": "16",
    "markerTitle": "any text here",
    "mapDraggable": false,
    "scrollwheel": false
  }
</mapper>
You can copy this as example and change for your needs
Option Description
lat number
lng Number
width String. Examples: "100%", "20px"
height String. Examples: "100%", "20px"
zoom Number. Maps on Google Maps have an integer "zoom level" which defines the resolution of the current view. Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) to 21+ (down to individual buildings) are possible within the default roadmap maps view.
markerTitle String. Text which will be displayed by hover
mapDraggable bool. default false. True if you want to make map draggable
scrollwheel bool. default false. True if you need to make zoom by scroll wheel

 

In the folder img/g-map_pin/ ds located markers of different colors

 

If you need to add social or/and custom widget to your blog you can use the instructions below. We stylized these widgets for you and they will looks great on your blog.

Steps:
Codes of widgets:

detailed configuration of widgets can be made in the file config.js

We try to give our customers the best support possible. If you have any question or you need support , please email us at theme.support@lodossteam.com
 
Support does not include:

 

 

jQuery Parallax - http://www.ianlunn.co.uk/plugins/jquery-parallax/

Masonry - http://masonry.desandro.com

imagesLoaded - http://desandro.github.io/imagesloaded/

jFlickrFeed - http://www.newmediacampaigns.com/blog/a-jquery-flickr-feed-plugin

Magnific Popup - http://dimsemenov.com/plugins/magnific-popup/

Font Awesome - http://fortawesome.github.io/Font-Awesome/

Lo-Dash - http://lodash.com/

Classie - http://github.com/desandro/classie

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

 
We tread on the heels of Ghost. If you need any extra or feature just email us and we will include it in the next update.