Isolde 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
|     ├── bootstrap.min.css
|     ├── color_1.css
|     ├── color_2.css
|     ├── color_3.css
|     ├── color_4.css
|     ├── color_5.css
|     ├── color_6.css
|     ├── color_7.css
|     ├── color_8.css
|     ├── font-awesome.min.css
|     ├── post.css
|     ├── style.css
|   /fonts
|   /img
|   /js
├── /partials
|     ├── comments.hbs
|     ├── follow-links.hbs
|     ├── loop.hbs[required]
|     ├── menu.hbs
|     ├── pagination.hbs
├── default.hbs[required]
├── 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.

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)

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)

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

We have following structure of css files:

.
├── /css
|     ├── bootstrap.min.css
|     ├── font-awesome.min.css
|     ├── color_1.css
|     ...
|     ├── color_8.css
|     ├── post.css
|     ├── style.css

 

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

bootstrap.min.css - The most popular front-end framework for developing responsive, mobile first projects on the web.

color_1.css ... color_8 - We created 8 different color scheme for you. So if you want to change color scheme just add one of this css files to default.hbs file(more detail information you can see here).

post.css - styles for single post page

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

 

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/*
    1.  Fonts
    2.  General
    3.  Pagination
    4.  Follow links
    5.  Error Page
    6.  Navigation Menu for Desktop
    7.  Navigation Menu for Mobile Devices
    8.  Third Party Elements
    9.  Media Queries (Styles for Magnific-popup jQuery plugin)
    10. Media Queries for Mobile Navigation
    11. Media Queries (Tablet: > 991)
    12. Media Queries (Tablet: W < 991)
    13. Media Queries (Tablet: 768 < W < 991)
    14. Media Queries (Tablet: W < 768)
   -------------------------------------------------------------------------- */ 

 

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. imagesloaded.pkgd.min.js - detect when images have been loaded.
  2. jquery.magnific-popup.js - responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
  3. 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.
  4. 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.
  5. classie.js - class helper functions
  6. modernizr.custom.js - is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser (custom - detect touch devices only).

If you want to use one of our color schemes you should do following steps:

1) Open default.hbs file using any text editor

2) Find following text <!-- Add one of our created themes below -->

3) Add following line below this commented line
<link rel="stylesheet" type="text/css" href="{{asset 'css/color_n.css'}}" />
where n here number from 1..8
 
Example: 
<link rel="stylesheet" type="text/css" href="{{asset 'css/color_1.css'}}" />
 
Also please do it the same steps for error, error.hbs files

 

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

 

Use Grid system of Bootstrap 3

Example:

<div class="row">
  <div class="col-sm-4">
    ![](/content/images/2014/May/tumblr_n3ttaoFz9x1st5lhmo1_1280.jpg)
  </div>

  <div class="col-sm-4">
    ![](/content/images/2014/May/tumblr_n4vc5ukBQO1st5lhmo1_1280.jpg)
  </div>

  <div class="col-sm-4">
    ![](/content/images/2014/May/tumblr_n4ef69szs71st5lhmo1_1280.jpg)
  </div>
</div>

 

Result: 

If you want to install the image on the cover for the entry in the list of posts, wrap the image with the following code:

<cover> ... </cover>

Cover-image will not be displayed in the full post.

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:

 

 

Masonry - http://masonry.desandro.com

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

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

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

Bootstrap 3 - http://getbootstrap.com/

Modernizr - http://modernizr.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.