• Facebook
  • Twitter

Orlando Ghost

HTML Structure

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.See for yourself (resize your browser).If you would like to read more about bootstrap framework click here: Bootstrap Documentation.

1.1. Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here
Basic grid HTML:

1.2. Page structure

Below you will find default page structure (default.hbs files):

The most important pages in ghost are home.hbs and index.hbs. The pages are almost the same. Below you can see how looks like the structure of those pages:

This is index.hbs page. Here you can set the four types of blog and the effect for second,3,4..n pages of blog.

Author page in ghost is the page has information about the author, locatiom, posts… Below you can see the structure of the page:

CSS Files and Structure


If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

2.1. Main Menu structure

If you would like to change your logo, just go to the ghost administrative panel and change it. If you can you are able to change brand name. In orlando ghost we have different types of menu: typical menu for desktops and menu for tablets and phones:
Typical menu for desktop:

Responsive menu for tablets and phones:

In order to create mega menus read the documentation here: Yamm 3 Documentation

2.2. Blog Options

This sections shows three methods of displaying the posts:

  1. Blog Default
  2. Blog Secundary
  3. Blog Masonry
  4. Blog Infinity


1. Blog Default:


2. Blog Secondary:


3. Blog Masonry:


4. Blog Infinity:

How to make available the blog in home.hbs and index.hbs?

2.4. Icons

We’ve included 360+ font icons. Awesome Icons – http://fontawesome.io/icons/
HTML markup:

Appearing with Animation when element in viewport
Animation can be turn off just be remove “withAnimation” class from body.
Usage: – add “animated” class to element and data-fx=”animation-type”. That’s it.
Available animation : http://daneden.github.io/animate.css/

  • data-fx=”hinge”
  • data-fx=”bounce”
  • data-fx=”flash”
  • data-fx=”pulse”
  • data-fx=”shake”
  • data-fx=”swing”
  • data-fx=”tada”
  • data-fx=”wobble”
  • data-fx=”bounceIn”
  • data-fx=”bounceInDown”
  • data-fx=”bounceInLeft”
  • data-fx=”bounceInRight”
  • data-fx=”bounceInUp”
  • data-fx=”bounceOut”
  • data-fx=”bounceOutDown”
  • data-fx=”bounceOutLeft”
  • data-fx=”bounceOutRight”
  • data-fx=”bounceOutUp”
  • data-fx=”fadeIn”
  • data-fx=”fadeInDown”
  • data-fx=”fadeInDownBig”
  • data-fx=”fadeInLeft”
  • data-fx=”fadeInLeftBig”
  • data-fx=”fadeInRight”
  • data-fx=”fadeInRightBig”
  • data-fx=”fadeInUp”
  • data-fx=”fadeInUpBig”
  • data-fx=”fadeOut”
  • data-fx=”fadeOutDown”
  • data-fx=”fadeOutDownBig”
  • data-fx=”fadeOutLeft”
  • data-fx=”fadeOutLeftBig”
  • data-fx=”fadeOutRight”
  • data-fx=”fadeOutRightBig”
  • data-fx=”fadeOutUp”
  • data-fx=”fadeOutUpBig”
  • data-fx=”flip”
  • data-fx=”flipInX”
  • data-fx=”flipInY”
  • data-fx=”flipOutX”
  • data-fx=”flipOutY”
  • data-fx=”lightSpeedIn”
  • data-fx=”lightSpeedOut”
  • data-fx=”rotateIn”
  • data-fx=”rotateInDownLeft”
  • data-fx=”rotateInDownRight”
  • data-fx=”rotateInUpLeft”
  • data-fx=”rotateInUpRight”
  • data-fx=”rotateOut”
  • data-fx=”rotateOutDownLeft”
  • data-fx=”rotateOutDownRight”
  • data-fx=”rotateOutUpLeft”
  • data-fx=”rotateOutUpRight”
  • data-fx=”slideInDown”
  • data-fx=”slideInLeft”
  • data-fx=”slideInRight”
  • data-fx=”slideOutLeft”
  • data-fx=”slideOutRight”
  • data-fx=”slideOutUp”
  • data-fx=”rollIn”
  • data-fx=”rollOut”

2.5. CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

2.6. Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.
Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.
Orlando uses utilities for the following categories:

  1. Typography
  2. Display Types
  3. Paddings
  4. Margins
  5. Colors
  6. Borders
  7. Background Colors
  8. Triangles
  9. Diagonals
  10. Shadows


3.1. Media Sections

Orlando supports media sections with Slice effect, Push effect, Particles effect, slider effect, Parallax, KenBurns effect and videos.

3.1.1. Slice Effect:

Slice Effect is in sliced_effect.hbs file. If you want to have this effect, just make available in home.hbs file.

3.1.2. Push Effect:

Push Effect is in sliced_effect.hbs file. If you want to have this effect, just make available in home.hbs file.

3.1.3. Particles Effect:

3.1.4. Flexslider:

In main-header.hbs files we have a different types of header. This sections has parallax, ken burns,videos effect and other types of header.

3.1.5. Parallax Section:

We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section.

Our custom data-attributes for the parallax section are:

  1. data-height: Define the minimun height for the sections
  2. data-type: Type of Media Section (parallax/kenburns/video)
  3. data-image: Background image for the section.
  4. data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. This will help you with the bandwidth, you’re welcome! 🙂

3.1.6. Ken Burns Section:

KenBurns section supports one or more images that you should add inside .media-section-image-container
Our custom data-attributes for the kenburns section are:

  1. data-height: Define the minimun height for the sections
  2. data-type: Type of Media Section (parallax/kenburns/video)
  3. data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Kenburns it too much for ipads, iphones and so on, so we allow you to fallback to a normal image section. This way your browser won’t crash 🙂

3.1.7. Video Section:

We recommend you to use html5 video instead of vimeo, since in some specific browsers the sound won’t be muted.
Our custom data-attributes for the video section are:

  1. data-height: Define the minimun height for the sections
  2. data-type: Type of Media Section (parallax/kenburns/video)
  3. data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Phones don’t autoplay video, so we just replace it for an image

3.1.3. How to make available the effect (fragment of Home.hbs file)


4.1. Javascrpt library and files

All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

  1.  Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
  2. jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.)
  3. jQuery FlexSlider v2.2.0
  4. GMAP3 Plugin for JQuery v. 5.1.1
  5. jQuery.appear
  6. FitVids 1.0.3
  7. jQuery Stellar
  8. jQuery tweet
  9. Modernizr 2.0.6
  10. PageScroller
  11. final-countdown.js
  12. snap.js
  13. device.js 0.1.58
  14. chart.js

4.2. Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  1. data-location – address to show
  2. data-height – map height (if undefined height will be 220px)
  3. data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin. Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.


Content / Images Slider.
Each parameter can be defined as data attribute :

  • data-namespace
  • data-selector
  • data-animation
  • data-easing
  • data-direction
  • data-reverse
  • data-animationloop
  • data-smoothheight
  • data-startat
  • data-slideshow
  • data-slideshowspeed
  • data-animationspeed
  • data-initdelay
  • data-randomize
  • data-thumbcaptions
  • data-pauseonaction
  • data-pauseonhover
  • data-pauseinvisible
  • data-usecss
  • data-touch
  • data-video
  • data-controlnav
  • data-directionnav
  • data-prevtext
  • data-nexttext
  • data-keyboard
  • data-multiplekeyboard
  • data-mousewheel
  • data-pauseplay
  • data-pausetext
  • data-playtext
  • data-itemwidth
  • data-itemmargin
  • data-minitems
  • data-maxitems
  • data-move
  • data-allowoneslide
  • data-controlscontainer
  • data-manualcontrols
  • data-sync
  • data-asnavfor

Read the documentation here: Flexslider Documentation

And js initialization (js/main.js file), there you can change slider parameters:

4.4. Jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/

4.5. fitVids

Just make video responsive. Documentation: http://fitvidsjs.com/
HTML Markup:

and js:

4.6. Charts

This plugin is used to make graphics. Documentation: http://www.chartjs.org/

Contact Form

Template comes with ready to use:

  • Contact Form
  • Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/form.php and change e-mails to your own:

HTML Markup:

Sources & Credits

The following sources and files have been used to build up this theme

Twitter Bootstrap – http://twitter.github.com/bootstrap/
jQuery – http://www.jquery.com

Elite Author
We are elite
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!