Orlando Ghost

Support

Outsourcing

Was this article helpful ?

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:

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>

</div>

</div>

</div>

</div>

1.2. Page structure

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

<!DOCTYPE html>
<html>
<head>
    {{! Document Settings }}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    {{! Page Meta }}
    <title>Orlando - Blog</title>
    <meta name="description" content="{{meta_description}}" />
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="{{asset "/favicon.ico"}}">

    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/bootstrap.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/mb-slider.css"}}">

    <link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />

    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
   
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="{{asset "bootstrap/js/html5shiv.min.js"}}"></script>
    <script src="{{asset "bootstrap/js/respond.min.js"}}"></script>
    <![endif]-->
    <script src="{{asset "js/modernizr.custom.js"}}"></script>
    <script src="{{asset "js/device.min.js"}}"></script>
    {{! Ghost outputs important style and meta data with this tag }}
    {{ghost_head}}
</head>
<!-------------------TYPES OF MENU------------------>
<!--If you want to can change the type of menu here. Just add or remove the class:

ct-navbar--fixedTop
ct-navbar--fixedBottom
ct-navbar-isTransparent-toDefault
ct-navbar-isTransparent-toInverse
ct-navbar--logoright - user can use logo on the right or on the left side
ct-js-navbarMakeSmaller - user may decide if he wants the navbar to be smaller or not on scroll
ct-js-enableWayPoints - user may decide if he wants the waypoints sections to appear or not .ct-js-wayPoint added to header
ct--darkMotive - dar flavour option
<!--------------------------------------------------->

<body class="cssAnimate ct-navbar--fixedTop ct-js-navbarMakeSmaller ct-js-enableWayPoints">
{{> responsive-menu}}
{{> menu}}


{{{body}}}
{{ghost_foot}}
{{! The main JavaScript file for Corpress }}
<script type="text/javascript" src="{{asset "js/jquery.min.js"}}"></script>
<script type="text/javascript" src="{{asset "bootstrap/js/bootstrap.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/jquery.placeholder.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/jquery.easing.1.3.js"}}"></script>
<script type="text/javascript" src="{{asset "js/jquery.appear.js"}}"></script>
<script type="text/javascript" src="{{asset "js/counter/jquery.countTo.js"}}"></script>
<script type="text/javascript" src="{{asset "js/counter/init.js"}}"></script>
<script type="text/javascript" src="{{asset "js/jquery.browser.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/snap.min.js"}}"></script>

<script type="text/javascript" src="{{asset "js/waypoints.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/waypoints-sticky.min.js"}}"></script>

<script type="text/javascript" src="{{asset "js/ct-mediaSection/jquery.stellar.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/ct-mediaSection/init.js"}}"></script>

<script type="text/javascript" src="{{asset "js/charts/Chart.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/charts/init.js"}}"></script>
<!--Flexslider below-->
<script type="text/javascript" src="{{asset "js/flexslider/jquery.flexslider-min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/flexslider/init.js"}}"></script>

<script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>

<!--This is main files-->
<script type="text/javascript" src="{{asset "js/main.js"}}"></script>
<!-- Google Maps -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="{{asset "js/gmaps/gmap3.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/gmaps/init.js"}}"></script>
<!--This is for picture-->
<script type="text/javascript" src="{{asset "js/magnific-popup/jquery.magnific-popup.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/magnific-popup/init.js"}}"></script>
<!-- Contact form validation -->
<script type="text/javascript" src="{{asset "form/js/contact-form.js"}}"></script>
<!--This is ghost slider-->
<script type="text/javascript" src="{{asset "js/mb-ghost-slider.js"}}"></script>
<!--Files needed for portfolio-->
<script type="text/javascript" src="{{asset "js/portfolio/jquery.isotope.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/portfolio/imagesloaded.js"}}"></script>
<script type="text/javascript" src="{{asset "js/portfolio/infinitescroll.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/portfolio/init.js"}}"></script>
<script type="text/javascript" src="{{asset "js/uniqueTags.js"}}"></script>

<script type="text/javascript" src="{{asset "js/less.min.js"}}"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Orlando - Blog</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<!--If you want to can change the type of menu here. Just add or remove the class:

ct-navbar--fixedTop

ct-navbar--fixedBottom

ct-navbar-isTransparent-toDefault

ct-navbar-isTransparent-toInverse

ct-navbar--logoright - user can use logo on the right or on the left side

ct-js-navbarMakeSmaller - user may decide if he wants the navbar to be smaller or not on scroll

ct-js-enableWayPoints - user may decide if he wants the waypoints sections to appear or not .ct-js-wayPoint added to header

ct--darkMotive - dar flavour option

{{{body}}}

</body>

</html>

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 home.hbs page-->

{{!< default}}

<!-- If you would like to have a push effect, just change a class to ct-pageWrapper ct-intro--push-->
<!-- If you would like to have a slice effect, just change a class to ct-pageWrapper ct-intro--sliced-->
<!-- If you would like to have a flexslider effect or particles effect, just change a class to " "-->

<div id="ct-js-wrapper" class="ct-pageWrapper ct-intro--push">
    <header class="ct-pageHeader ct-pageHeader--motive ct-pageHeader--hasDescription ct-u-paddingBoth10">
        <div class="container ct-u-triangleBottomLeft">
            <div class="row">
                <div class="col-md-8">
                    <h1 class=" ct-fw-600 ct-u-colorWhite">
                        Welcome<sup><i class="fa fa-paper-plane"></i></sup>
                    </h1>
                </div>
                <div class="col-md-4">
                    <span class="ct-u-size20 ct-u-colorWhite">
                        Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.
                    </span>
                </div>
            </div>
        </div>
    </header>

{{!>simply-slider2}}       <!--This is simply slider, tis is the same slider like in page-office.hbs file-->
{{!> flexslider-effect}}      <!--This is the big slider on the main side of tha page, if you want to enable the effect just remove ! and change the wrapper class to " "-->
{{!> slice-effect}}           <!--this is slice effect, if you want to enable the effect just remove ! and change the wrapper class to ct-pageWrapper ct-intro--sliced and add this class ct-intro-content below -->
{{!> push-effect}}            <!--this is push effect, if you want to enable the effect just remove ! and change the wrapper class to ct-pageWrapper ct-intro--push and add this class ct-intro-content below-->
{{!>particles-effect}}         <!--This is the particles effect, if you want to enable the effect just remove ! and change the wrapper class to " "-->

    <!--If we use a effect like slice or push, all the content must be in this section-->
     <!--If you have to use a effect like above , you have add this class ct-intro-content-->

    {{>blog_infinity}} <!--Here you can eneable infinity blog, This type of blog is different than else, so it must be activate here-->

    <div class="ct-u-paddingBoth100 ct-u-diagonalBottomRight">
        <div class=""> <!--THIS EFECT IS ONLY FOR THE PUSH AND SLICE EFFECT, IF YOU WANT TO USE PARTICLES YOU MUST DELETE THIS CLASS-->
        <div class="container">
            <div class="row">
            {{!> blog_default}}    <!--if you want to have a default blog on your page-->
            {{!> blog_secundary}}    <!--if you want to have a secundary blog on your page-->
            {{!> blog_masonry}}    <!--if you want to have a blog small on your page-->

            </div>
        </div>
        </div>
    </div>
{{> footer}}
</div>

Welcome<sup><i class="fa fa-paper-plane"></i></sup>

</h1>

</div>

Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.

</span>

</div>

</header>

{{!>simply-slider2}}

{{!> flexslider-effect}}

{{!> slice-effect}}

{{!> push-effect}}

{{!>particles-effect}}

{{>blog_infinity}}

{{!> blog_default}}

{{!> blog_secundary}}

{{!> blog_masonry}}

</div>

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.

<!-- This is index.hbs page-->
{{!< default}}
<div id="ct-js-wrapper" class="ct-pageWrapper">
 {{>main-header}}
    {{>blog_infinity}} <!--Here you can eneable infinity blog, This type of blog is different than else, so it must be activate here-->

    <div class="">  <!--If you have to use a effect like above , you have add this class ct-intro-content-->
        <div class="ct-u-paddingBoth100 ct-u-diagonalBottomRight">
            <div class="container">
                <div class="row">
                    {{!> blog_default}}    <!--if you want to have a default blog on your page-->
                    {{!> blog_secundary}}    <!--if you want to have a secundary blog on your page-->
                     {{!> blog_masonry}}    <!--if you want to have a blog small on your page-->
                </div>
            </div>
        </div>
        {{> footer}}
    </div>
</div>

{{>blog_infinity}}

{{!> blog_default}}

{{!> blog_secundary}}

{{!> blog_masonry}}

</div>

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

<link rel="stylesheet" type="text/css" href="{{asset "css/author_style.css"}}"/>
{{!< default}}
<div id="ct-js-wrapper" class="ct-pageWrapper">
    {{>main-header}}

    <div class="ct-u-paddingBoth100 ct-u-diagonalTopLeft ct-u-diagonalBottomRight">
    <div class="container">
        <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
            {{#author}}
                <section class="author-profile2 inner2">
            {{#if image}}
                <figure class="author-image2">
                    <div class="img" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div>
                </figure>
            {{/if}}
                    <h1 class="author-title2">{{name}}</h1>
                    <h2 class="author-bio2">{{bio}}</h2>
                <div class="author-meta">
                    {{#if location}}<span class="fa fa-home fa fa-lg"></span> {{location}}{{/if}}
                    {{#if website}}<span class=""><a href="{{website}}">{{website}}</a></span>{{/if}}
                    <span class="author-stats" style="padding-left: 10px;"><i class="fa fa-bar-chart fa fa-lg"></i> {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}</span>
                </div>
            </section>
        {{/author}}
        {{! This is the post loop - each post will be output using this markup }}
        </div>
   {{>loop}}
            </div>
    </div>
</div>
    {{> footer}}
</div>

<div class="img" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div>

</figure>

{{#if location}}<span class="fa fa-home fa fa-lg"></span> {{location}}{{/if}}

{{#if website}}<span class=""><a href="{{website}}">{{website}}</a></span>{{/if}}

<span class="author-stats" style="padding-left: 10px;"><i class="fa fa-bar-chart fa fa-lg"></i> {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}</span>

</div>

</section>

{{! This is the post loop - each post will be output using this markup }}

</div>

Was this article helpful ?

CSS Files and Structure

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

1#primaryContent a {color: #someColor;}

1	1#primaryContent a {color: #someColor;}

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.

2. I.E #wrap #primaryContent a {color: #someColor;}

1	2. I.E #wrap #primaryContent a {color: #someColor;}

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:

<!--You can edit your navbar. Change the classs of nav like below:

navbar navbar-inverse ct-navbar--logoright
navbar ct-navbar--motive ct-navbar--logoright
navbar-default
navbar-inverse
ct-navbar--transparent
ct-navbar--motive

If you changed the navbar you have to change the logo in ghost administrative panel-->

<nav class="navbar navbar-inverse ct-navbar--logoright" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <a class="navbar-brand" href="/">
        {{#if @blog.logo}}
        <img src="{{@blog.logo}}" title="companyname" alt="companyname">
        {{/if}}
    </a>
</div>

<div class="collapse navbar-collapse">
    <!--If you want to have a big space between the logo and text, just change the class like below:
nav navbar-nav navbar-right ct-navbarNav--secundaryActive
nav navbar-nav ct-navbarNav--defaultActive ct-navbar--fadeIn yamm-->
<ul class="nav navbar-nav ct-navbarNav--defaultActive ct-navbar--fadeIn yamm">
<li><a href="/">Home</a></li>

<li class="dropdown">
    <a href="/about-us/">Pages <i class="fa fa-angle-double-down"></i></a>
    <ul class="dropdown-menu">
        <li>
            <div class="yamm-content">
                <div class="row">
                    <div class="col-sm-6">
                        <h5 class="text-uppercase ct-fw-600 ct-menu-header">Normal Pages
                            <small>Beautiful Pages</small>
                        </h5>
                        <ul class="list-unstyled">
                            <li><a href="/about-us/"><i class="fa fa-fw fa-chevron-right"></i> About Us</a></li>
                            <li><a href="/services/"><i class="fa fa-fw fa-chevron-right"></i> Services</a></li>
                            <li><a href="/Contact-us/"><i class="fa fa-fw fa-chevron-right"></i> Contact Us</a></li>
                            <li><a href="/Our-office/"><i class="fa fa-fw fa-chevron-right"></i> Our Office</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <h5 class="text-uppercase ct-fw-600 ct-menu-header">Special Pages</h5>
                        <ul class="list-unstyled">
                            <li><a href="/maintenance/"><i class="fa fa-fw fa-cogs"></i> Maintenance</a></li>
                            <li><a href="/blank/"><i class="fa fa-fw fa-file-o"></i> Blank Page</a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </li>
    </ul>
</li>

<li><a href="/Contact-us/">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!--You can edit your navbar. Change the classs of nav like below:

navbar navbar-inverse ct-navbar--logoright

navbar ct-navbar--motive ct-navbar--logoright

navbar-default

navbar-inverse

ct-navbar--transparent

ct-navbar--motive

If you changed the navbar you have to change the logo in ghost administrative panel-->

</a>

</div>

<!--If you want to have a big space between the logo and text, just change the class like below:

nav navbar-nav navbar-right ct-navbarNav--secundaryActive

nav navbar-nav ct-navbarNav--defaultActive ct-navbar--fadeIn yamm-->

<a href="/about-us/">Pages <i class="fa fa-angle-double-down"></i></a>

<li>

<h5 class="text-uppercase ct-fw-600 ct-menu-header">Normal Pages

<small>Beautiful Pages</small>

</h5>

<li><a href="/about-us/"><i class="fa fa-fw fa-chevron-right"></i> About Us</a></li>

<li><a href="/services/"><i class="fa fa-fw fa-chevron-right"></i> Services</a></li>

<li><a href="/Contact-us/"><i class="fa fa-fw fa-chevron-right"></i> Contact Us</a></li>

<li><a href="/Our-office/"><i class="fa fa-fw fa-chevron-right"></i> Our Office</a></li>

</ul>

</div>

<h5 class="text-uppercase ct-fw-600 ct-menu-header">Special Pages</h5>

<li><a href="/maintenance/"><i class="fa fa-fw fa-cogs"></i> Maintenance</a></li>

<li><a href="/blank/"><i class="fa fa-fw fa-file-o"></i> Blank Page</a></li>

</ul>

</div>

</li>

</ul>

</li>

<li><a href="/Contact-us/">Contact</a></li>

</ul>

</div>

</nav>

Responsive menu for tablets and phones:

<div class="ct-navbarMobile ct-navbarMobile--inverse">
    <a class="navbar-brand" href="/"><img src="{{asset "images/demo-content/logo.png"}}" alt="Orlando Logo"> </a>
    <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>


<div class="ct-menuMobile">
    <ul class="ct-menuMobile-navbar">
        <li>
            <a href="/" data-target="dropdown">Home</a>
        </li>
        <li class="dropdown">
            <a href="/about-us/">Pages <i class="fa fa-angle-double-down"></i></a>
            <ul class="dropdown-menu">
                <li><a href="/about-us/"><i class="fa fa-fw fa-chevron-right"></i> About Us</a></li>
                <li><a href="/services/"><i class="fa fa-fw fa-chevron-right"></i> Services</a></li>
                <li><a href="/Contact-us/"><i class="fa fa-fw fa-chevron-right"></i> Contact Us</a></li>
                <li><a href="/Our-office/"><i class="fa fa-fw fa-chevron-right"></i> Our Office</a></li>
                <li><a href="/maintenance/"><i class="fa fa-fw fa-cogs"></i> Maintenance</a></li>
                <li><a href="/blank/"><i class="fa fa-fw fa-file-o"></i> Blank Page</a></li>
            </ul>
        </li>
        <li><a href="/Contact-us/">Contact</a></li>
    </ul>
</div>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li>

</li>

<a href="/about-us/">Pages <i class="fa fa-angle-double-down"></i></a>

<li><a href="/about-us/"><i class="fa fa-fw fa-chevron-right"></i> About Us</a></li>

<li><a href="/services/"><i class="fa fa-fw fa-chevron-right"></i> Services</a></li>

<li><a href="/Contact-us/"><i class="fa fa-fw fa-chevron-right"></i> Contact Us</a></li>

<li><a href="/Our-office/"><i class="fa fa-fw fa-chevron-right"></i> Our Office</a></li>

<li><a href="/maintenance/"><i class="fa fa-fw fa-cogs"></i> Maintenance</a></li>

<li><a href="/blank/"><i class="fa fa-fw fa-file-o"></i> Blank Page</a></li>

</ul>

</li>

<li><a href="/Contact-us/">Contact</a></li>

</ul>

</div>

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:

Blog Default
Blog Secundary
Blog Masonry
Blog Infinity

1. Blog Default:

<!--This is default blog-->
<div class="col-md-10 col-md-offset-1">
{{#foreach posts}}
<article class="ct-articleBox ct-articleBox--default animated" data-fx="fadeInUp">
    <div class="ct-articleBox-date">
        <div class="ct-articleBox-dateDay">
            {{date published_at format="DD"}}
        </div>
        <div class="ct-articleBox-dateMonth">
            {{date published_at format="MMM"}}
        </div>
    </div>
    <div class="ct-articleBox-media">
        {{#if image}}
            <div class="">
                <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a>
            </div>
        {{else}}
            <div class="mbslider embed-responsive embed-responsive-16by9 text-center">
                <a href="{{url}}" title="{{title}}">{{content words="0"}}</a>
            </div>
        {{/if}}
    </div>
    <div class="ct-articleBox-titleBox">
        <h4><a href="{{url}}">{{{title}}}</a></h4>

        <div class="ct-articleBox-meta">
            Posted on {{date published_at format="MMMM DD YYYY"}}
        </div>
    </div>
    <div class="ct-articleBox-description">
        <div class="mbslider-source" style="display:none">
            {{content}}
        </div>
        <p>
            {{excerpt words="100"}}
        </p>
    </div>
    <a class="text-uppercase ct-fw-600 pull-right ct-articleBox-button" href="{{url}}">Read More <i
            class="fa fa-long-arrow-right"></i></a>
    <div class="clearfix"></div>
</article>
{{/foreach}}
    {{#if pagination}}
        {{{pagination}}}
    {{/if}}
</div>

</div>

</div>

</div>

<a href="{{url}}" title="{{title}}">{{content words="0"}}</a>

</div>

<h4><a href="{{url}}">{{{title}}}</a></h4>

Posted on {{date published_at format="MMMM DD YYYY"}}

</div>

</div>

<p>

</p>

</div>

<a class="text-uppercase ct-fw-600 pull-right ct-articleBox-button" href="{{url}}">Read More <i

class="fa fa-long-arrow-right"></i></a>

</article>

{{{pagination}}}

</div>

2. Blog Secondary:

<!--This is secondary blog-->
<div class="col-md-10 col-md-offset-1">
{{#foreach posts}}
<article class="ct-articleBox ct-articleBox--secundary animated" data-fx="fadeInUp">
    <div class="ct-articleBox-date">
        <div class="ct-articleBox-dateDay">
            {{date published_at format="DD"}}
        </div>
        <div class="ct-articleBox-dateMonth">
            {{date published_at format="MMM"}}
        </div>
    </div>
    <div class="ct-articleBox-media">
        {{#if image}}
            <div class="">
                <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a>
            </div>
        {{else}}
            <div class="mbslider embed-responsive embed-responsive-16by9 text-center">
                <a href="{{url}}" title="{{title}}">{{content words="0"}}</a>
            </div>
        {{/if}}
    </div>
    <div class="ct-articleBox-titleBox">
        <h4><a href="{{url}}">{{{title}}}</a></h4>

        <div class="ct-articleBox-meta">
            Posted on {{date published_at format="MMMM DD YYYY"}}
        </div>
        <div class="ct-articleBox-icon">
            {{#has tag="picture, image"}} <i class="fa fa-picture-o"></i> {{else}}
            {{#has tag="video, wideo, film, movie"}} <i class="fa fa-youtube-play"></i> {{else}}
            {{#has tag="gallery"}} <i class="fa fa-refresh"></i> {{else}}
            {{#has tag="music"}}  <i class="fa fa-music"></i> {{else}}
            {{#has tag="text"}}   <i class="fa fa-font"></i> {{else}}
                <i class=""></i>

             {{/has}}
             {{/has}}
             {{/has}}
             {{/has}}
            {{/has}}
        </div>
    </div>
    <div class="ct-articleBox-description">
        <div class="mbslider-source" style="display:none">
            {{content}}
        </div>
        <p>
            {{excerpt words="100"}}
        </p>
    </div>
    <a class="text-uppercase ct-fw-600 pull-right ct-articleBox-button" href="{{url}}">Read More <i
            class="fa fa-long-arrow-right"></i></a>
    <div class="clearfix"></div>
</article>
{{/foreach}}
    {{#if pagination}}
        {{{pagination}}}
    {{/if}}
</div>

</div>

</div>

</div>

<a href="{{url}}" title="{{title}}">{{content words="0"}}</a>

</div>

<h4><a href="{{url}}">{{{title}}}</a></h4>

Posted on {{date published_at format="MMMM DD YYYY"}}

</div>

{{#has tag="picture, image"}} <i class="fa fa-picture-o"></i> {{else}}

{{#has tag="video, wideo, film, movie"}} <i class="fa fa-youtube-play"></i> {{else}}

{{#has tag="gallery"}} <i class="fa fa-refresh"></i> {{else}}

{{#has tag="music"}} <i class="fa fa-music"></i> {{else}}

{{#has tag="text"}} <i class="fa fa-font"></i> {{else}}

</div>

</div>

<p>

</p>

</div>

<a class="text-uppercase ct-fw-600 pull-right ct-articleBox-button" href="{{url}}">Read More <i

class="fa fa-long-arrow-right"></i></a>

</article>

{{{pagination}}}

</div>

3. Blog Masonry:

<!--This is masonry blog-->
<div class="col-md-12">
    {{#foreach posts}}
        <div class="ct-js-blogMasonry">
            <div class="col-md-4 ct-js-blogMasonry-item">
                <article class="ct-articleBox ct-articleBox--thumbnail">
                    <div class="ct-articleBox-date">
                        <div class="ct-articleBox-dateDay">
                            {{date published_at format="DD"}}
                        </div>
                        <div class="ct-articleBox-dateMonth">
                            {{date published_at format="MMM"}}
                        </div>
                    </div>
                    <div class="ct-articleBox-media">
                        {{#if image}}
                            <div class="">
                                <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a>
                            </div>
                        {{else}}
                            <div class="mbslider embed-responsive embed-responsive-16by9 text-center">
                                <a href="{{url}}" title="{{title}}">{{content words="0"}}</a>
                            </div>
                        {{/if}}
                    </div>
                    <div class="ct-articleBox-titleBox">
                        <h4><a href="{{url}}">{{{title}}}</a></h4>
                    </div>
                    <div class="ct-articleBox-description">
                        <div class="mbslider-source" style="display:none">
                            {{content}}
                        </div>
                        <p>
                            {{excerpt words="40"}}
                        </p>
                    </div>
                </article>
            </div>
        </div>
    {{/foreach}}
</div>
    {{#if pagination}}
        {{{pagination}}}
    {{/if}}

</div>

</div>

</div>

<a href="{{url}}" title="{{title}}">{{content words="0"}}</a>

</div>

<h4><a href="{{url}}">{{{title}}}</a></h4>

</div>

</div>

<p>

</p>

</div>

</article>

</div>

{{{pagination}}}

4. Blog Infinity:

<div class="ct-u-backgroundDarkMotive clearfix ct-js-fixOnScroll">
    <div class="text-center">
        <ul id="my_tags" class="ct-gallery-filters list-unstyled list-inline">
            <!--tags generated from js-->
        </ul>
        <div class="clearfix"></div>
    </div>
</div>

<div id="ct-gallery" class="ct-gallery ct-gallery--col5 ct-js-magnificPortfolioPopupGroup">
    {{#foreach posts}}

        <div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default ct-gallery-item--normal ct-js-galleryTags"> <!--here should be the name of tgat that you would like to display-->

            <div class="ct-gallery-itemInner">
                <a class="ct-js-magnificPortfolioPopup" href="{{url}}">
                    <div class="ct-gallery-itemImage ">
                        {{#if image}}
                                <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a>
                        {{else}}
                        <a href="{{url}}"><img src="{{asset "images/demo-content/no_image.gif"}}" alt="no-image" /></a>
                        {{/if}}
                    </div>
                    <div class="ct-gallery-itemDescription">
                        <span class="ct-gallery-itemDescription-title"><a href="{{url}}">{{{title}}}</a></span>
                    <span class="ct-gallery-itemDescription-category">
                    {{#if tags}}
                            <i class="fa fa-long-arrow-right"></i>
                        {{tags separator=", "}}
                    {{else}}
                        <i class=""></i>
                    {{/if}}
                    </span>
                    </div>
                </a>
            </div>
        </div>
        <div class="ct-js-hiddenTags hidden">
            {{tags}}
        </div>
    {{/foreach}}

</div>
{{#if pagination}}
    {{{pagination}}}
{{/if}}

</ul>

</div>

</div>

<span class="ct-gallery-itemDescription-title"><a href="{{url}}">{{{title}}}</a></span>

</span>

</div>

</a>

</div>

</div>

{{{pagination}}}

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

{{>blog_infinity}} <!--Here you can eneable infinity blog, This type of blog is different than else, so it must be activate here-->

<div class="ct-u-paddingBoth100 ct-u-diagonalBottomRight">
    <div class=""> <!--THIS EFECT IS ONLY FOR THE PUSH AND SLICE EFFECT, IF YOU WANT TO USE PARTICLES YOU MUST DELETE THIS CLASS-->
    <div class="container">
        <div class="row">
        {{!> blog_default}}    <!--if you want to have a default blog on your page-->
        {{!> blog_secundary}}    <!--if you want to have a secundary blog on your page-->
        {{!> blog_masonry}}    <!--if you want to have a blog small on your page-->

        </div>
    </div>
    </div>
</div>

{{>blog_infinity}}

{{!> blog_default}}

{{!> blog_secundary}}

{{!> blog_masonry}}

</div>

2.4. Icons

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

<!-- Awesome Icons -->
<i class="fa fa-cog"></i>

1 2	<!-- Awesome Icons --> <i class="fa fa-cog"></i>

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.

1.A. Google Fonts
1.B. Revolution Slider styles
1.C. Magnific popup styles
1.D. Font Awesome styles
1.E Yamm styles
1.F Flexslider styles
1.G Animate css styles
2. GENERAL STYLES
3. Typography
4. Buttons
5. Pagination
6. Alerts
7. Inputs
8. Pophover
9. Header styles
10. Navbar styles
11. Call to action
12. Sections
13. Media sections – video/parallax/kenburns
14. Process circles
15. Person box
16. Service box
17. Pre footer section
18. Footer
19. Articles
20. Counters
21. Blockquote
22. Tabs
23. Images widget
24. Project single
25. Project images
26. Lists
27. Pricing box
28. Accordion
29. Socials
30. Square icons
31. Charts
32. Progress bar
33. Twitter
34. Google map
35. Flexslider
36. Revslider
37. Time circle counter
38. Thumbnail scroller
39. Magnific popup
40. Isotope
41. Helpers
42. D3 swimmers
43. WordPress
44. Media queries, adjustments
45. Motive colors

1.A. Google Fonts

1.B. Revolution Slider styles

1.C. Magnific popup styles

1.D. Font Awesome styles

1.E Yamm styles

1.F Flexslider styles

1.G Animate css styles

2. GENERAL STYLES

3. Typography

4. Buttons

5. Pagination

6. Alerts

7. Inputs

8. Pophover

9. Header styles

10. Navbar styles

11. Call to action

12. Sections

13. Media sections – video/parallax/kenburns

14. Process circles

15. Person box

16. Service box

17. Pre footer section

18. Footer

19. Articles

20. Counters

21. Blockquote

22. Tabs

23. Images widget

24. Project single

25. Project images

26. Lists

27. Pricing box

28. Accordion

29. Socials

30. Square icons

31. Charts

32. Progress bar

33. Twitter

34. Google map

35. Flexslider

36. Revslider

37. Time circle counter

38. Thumbnail scroller

39. Magnific popup

40. Isotope

41. Helpers

42. D3 swimmers

43. WordPress

44. Media queries, adjustments

45. Motive colors

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:

Typography
Display Types
Paddings
Margins
Colors
Borders
Background Colors
Triangles
Diagonals
Shadows

Was this article helpful ?

Features

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:

<!--This is the slice effect-->
<header class="ct-intro-topImage">
        <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div>
        <div class="ct-intro-title">
            <h1 class="ct-u-colorWhite ct-fw-600">welcome.
                <small class="ct-u-colorMotive ct-fw-300">We have a passion for design and code</small>
            </h1>
        </div>
        <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div>
</header>
<button class="trigger" data-info="Continue"><span>Trigger</span></button>

<script type="text/javascript" src="{{asset "js/intro-effects/classie.js"}}"></script>
<script type="text/javascript" src="{{asset "js/intro-effects/slice.js"}}"></script>

<h1 class="ct-u-colorWhite ct-fw-600">welcome.

<small class="ct-u-colorMotive ct-fw-300">We have a passion for design and code</small>

</h1>

</div>

</header>

<button class="trigger" data-info="Continue"><span>Trigger</span></button>

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:

<!--This is the push effect-->
<header class="ct-intro-topImage">
        <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div>
        <div class="ct-intro-title">
            <h3 class="ct-u-colorMotive ct-fw-600 ct-u-hrMid">
                <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                <span class="ct-fw-300">User</span> Xperiences
            </h3>
            <p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse,
                condimentum porttitor cursus duis neclim.</p>
        </div>
</header>
<button class="trigger" data-info="Continue"><span>Trigger</span></button>

<script type="text/javascript" src="{{asset "js/intro-effects/classie.js"}}"></script>
<script type="text/javascript" src="{{asset "js/intro-effects/push.js"}}"></script>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Xperiences

</h3>

<p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse,

condimentum porttitor cursus duis neclim.</p>

</div>

</header>

<button class="trigger" data-info="Continue"><span>Trigger</span></button>

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:

<!--this is particle effect-->
<section class="ct-mediaSection ct-u-borderMotiveBottom" data-height="100%">
    <div class="ct-mediaSection-inner">
        <div id="particles-js"></div>
        <div class="ct-u-displayTableVertical">
            <div class="ct-u-displayTableCell">
                <div class="container text-center"  data-stellar-ratio="0.5">
                    <h3 class="ct-u-colorMotive ct-fw-600 ct-u-hrMid">
                        <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                        <span class="ct-fw-300">User</span> Xperiences
                    </h3>
                    <p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse,
                        condimentum porttitor cursus duis neclim.</p>
                </div>
            </div>
        </div>
    </div>
    <a class="ct-sectionButton ct-js-btnScroll" href="#section1"><span
            class="ct-sectionButton-circle animated pulse activate infinite"><i
            class="fa fa-angle-down animated activate bounce infinite"></i></span>Continue</a>
</section>
<div id="section1"></div>

<script type="text/javascript" src="{{asset "js/jquery.min.js"}}"></script>

<script type="text/javascript" src="{{asset "js/ct-mediaSection/jquery.stellar.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/ct-mediaSection/init.js"}}"></script>

<script type="text/javascript" src="{{asset "js/particles/particles.js"}}"></script>
<script type="text/javascript" src="{{asset "js/particles/init.js"}}"></script>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Xperiences

</h3>

<p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse,

condimentum porttitor cursus duis neclim.</p>

</div>

<a class="ct-sectionButton ct-js-btnScroll" href="#section1"><span

class="ct-sectionButton-circle animated pulse activate infinite"><i

class="fa fa-angle-down animated activate bounce infinite"></i></span>Continue</a>

</section>

3.1.4. Flexslider:

<!--this is flexslider effect-->
<section class="ct-mediaSection ct-u-borderMotiveBottom" data-height="100%">
    <div class="flexslider ct-flexslider--controlsVertical ct-flexslider--controlsWhite ct-js-flexslider"
         data-animations="true" data-height="100%">
        <ul class="slides">
            <li data-bg="{{asset "images/demo-content/bigImage4.jpg"}}">
                <div class="inner ct-u-paddingBoth100">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-5">
                                <span class="h2 ct-fw-300 ct-u-colorMotive animated" data-fx="zoomIn">01</span>

                                <h3 class="ct-u-colorWhite ct-u-hrLeft animated" data-fx="fadeInUp">
                                    <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                                    <span class="ct-fw-300">User</span> Experiences
                                </h3>
                                <p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis
                                    neclim.</p>
                                <a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"
                                   data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>
                                <a href="/about-us/"
                                   class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"
                                   data-time="1250">About us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-bg="{{asset "images/demo-content/orlando-slider-image-2.jpg"}}">
                <div class="inner ct-u-paddingBoth100">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-5">
                                <span class="h2 ct-fw-300 ct-u-colorMotive animated" data-fx="zoomIn">02</span>

                                <h3 class="ct-u-colorWhite ct-u-hrLeft animated" data-fx="fadeInUp">
                                    <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                                    <span class="ct-fw-300">User</span> Experiences
                                </h3>
                                <p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis
                                    neclim.</p>
                                <a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"
                                   data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>
                                <a href="/about-us/"
                                   class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"
                                   data-time="1250">About us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-bg="{{asset "images/demo-content/orlando-slider-image-3.jpg"}}">
                <div class="inner ct-u-paddingBoth100">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-5">
                                <span class="h2 ct-fw-300 ct-u-colorMotive animated" data-fx="zoomIn">03</span>

                                <h3 class="ct-u-colorWhite ct-u-hrLeft animated" data-fx="fadeInUp">
                                    <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                                    <span class="ct-fw-300">User</span> Experiences
                                </h3>
                                <p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis
                                    neclim.</p>
                                <a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"
                                   data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>
                                <a href="/about-us/"
                                   class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"
                                   data-time="1250">About us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-bg="{{asset "images/demo-content/orlando-slider-image-4.jpg"}}">
                <div class="inner ct-u-paddingBoth100">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-5">
                                <span class="h2 ct-fw-300 ct-u-colorMotive animated" data-fx="zoomIn">04</span>

                                <h3 class="ct-u-colorWhite ct-u-hrLeft animated" data-fx="fadeInUp">
                                    <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                                    <span class="ct-fw-300">User</span> Experiences
                                </h3>
                                <p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis
                                    neclim.</p>
                                <a href="/services/" class="btn ct-btn--rounded btn-primary text-uppercase animated"
                                   data-fx="fadeInUp" data-time="800">Services</a>
                                <a href="/about-us/"
                                   class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"
                                   data-time="1250">About us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <a class="ct-sectionButton ct-js-btnScroll" href="#section1"><span
            class="ct-sectionButton-circle animated pulse activate infinite"><i
            class="fa fa-angle-down animated activate bounce infinite"></i></span>Continue</a>
</section>
<div id="section1"></div>

100

101

102

103

104

105

106

107

108

<div class="flexslider ct-flexslider--controlsVertical ct-flexslider--controlsWhite ct-js-flexslider"

data-animations="true" data-height="100%">

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Experiences

</h3>

<p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,

consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis

neclim.</p>

<a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"

data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>

<a href="/about-us/"

class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"

data-time="1250">About us</a>

</div>

</li>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Experiences

</h3>

<p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,

consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis

neclim.</p>

<a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"

data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>

<a href="/about-us/"

class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"

data-time="1250">About us</a>

</div>

</li>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Experiences

</h3>

<p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,

consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis

neclim.</p>

<a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"

data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>

<a href="/about-us/"

class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"

data-time="1250">About us</a>

</div>

</li>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Experiences

</h3>

<p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,

consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis

neclim.</p>

<a href="/services/" class="btn ct-btn--rounded btn-primary text-uppercase animated"

data-fx="fadeInUp" data-time="800">Services</a>

<a href="/about-us/"

class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"

data-time="1250">About us</a>

</div>

</li>

</ul>

</div>

<a class="ct-sectionButton ct-js-btnScroll" href="#section1"><span

class="ct-sectionButton-circle animated pulse activate infinite"><i

class="fa fa-angle-down animated activate bounce infinite"></i></span>Continue</a>

</section>

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:

<header class="ct-mediaSection" data-stellar-background-ratio="0.3" data-height="400" data-type="parallax"
         data-bg-image="{{asset "images/demo-content/bigImage3.jpg"}}"
         data-bg-image-mobile="{{asset "images/demo-content/bigImage3-mobile.jpg"}}">
    <div class="ct-mediaSection-inner">
        <header class="ct-pageHeader ct-pageHeader--type5 ct-pageHeader--hasDescription ct-u-paddingTop150" data-stellar-ratio="0.5">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h1 class="ct-fw-600 text-uppercase">
                                Blog
                        </h1>
                    </div>
                    <div class="col-md-4">
                    <span>
                        Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.
                    </span>
                    </div>
                </div>
            </div>
        </header>
    </div>
</header>

<header class="ct-mediaSection" data-stellar-background-ratio="0.3" data-height="400" data-type="parallax"

data-bg-image="{{asset "images/demo-content/bigImage3.jpg"}}"

data-bg-image-mobile="{{asset "images/demo-content/bigImage3-mobile.jpg"}}">

Blog

</h1>

</div>

<span>

Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.

</span>

</div>

</header>

</div>

</header>

We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section.
http://markdalgleish.com/projects/stellar.js/docs/

Our custom data-attributes for the parallax section are:

data-height: Define the minimun height for the sections
data-type: Type of Media Section (parallax/kenburns/video)
data-image: Background image for the section.
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:

<section class="ct-mediaSection" data-height="400" data-type="kenburns"
         data-bg-image-mobile="{{asset "images/demo-content/bigImage4-mobile.jpg"}}">
    <div class="ct-mediaSection-kenburnsImageContainer">
        <img src="{{asset "images/demo-content/bigImage4.jpg"}}" alt="demo image">
        <img src="{{asset "images/demo-content/bigImage5.jpg"}}" alt="demo image">
        <img src="{{asset "images/demo-content/bigImage4.jpg"}}" alt="demo image">
    </div>
    <div class="ct-mediaSection-inner">
        <header class="ct-pageHeader ct-pageHeader--type5 ct-pageHeader--hasDescription ct-u-paddingTop150"  data-stellar-ratio="0.5">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h1 class="ct-fw-600 text-uppercase">
                           Blog
                        </h1>
                    </div>
                    <div class="col-md-4">
                        <span>
                            Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.
                        </span>
                    </div>
                </div>
            </div>
        </header>
    </div>
</section>

<section class="ct-mediaSection" data-height="400" data-type="kenburns"

data-bg-image-mobile="{{asset "images/demo-content/bigImage4-mobile.jpg"}}">

</div>

Blog

</h1>

</div>

<span>

Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.

</span>

</div>

</header>

</div>

</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:

data-height: Define the minimun height for the sections
data-type: Type of Media Section (parallax/kenburns/video)
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:

<header class="ct-mediaSection" data-height="400" data-type="video"
         data-bg-image-mobile="../assets/images/demo-content/bigImage3-mobile.jpg">
    <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9">

        <video id="video1" muted loop autoplay="autoplay" preload="auto">
            <source src='http://orlando.html.themeforest.createit.pl/light/assets/videos/loopbookeh.mp4' type='video/mp4'/>
            <source src='http://orlando.html.themeforest.createit.pl/light/assets/videos/loopbookeh.webm' type='video/webm'/>
        </video>
    </div>
    <div class="ct-u-displayTable">
        <div class="ct-mediaSection-inner">
            <header class="ct-pageHeader ct-pageHeader--type5 ct-pageHeader--hasDescription ct-u-paddingTop150" data-stellar-ratio="0.5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8">
                            <h1 class="ct-fw-600 text-uppercase">
                                Blog
                            </h1>
                        </div>
                        <div class="col-md-4">
                        <span>
                            Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.
                        </span>
                        </div>
                    </div>
                </div>
            </header>
        </div>
    </div>
</header>

<header class="ct-mediaSection" data-height="400" data-type="video"

data-bg-image-mobile="../assets/images/demo-content/bigImage3-mobile.jpg">

</video>

</div>

Blog

</h1>

</div>

<span>

Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.

</span>

</div>

</header>

</div>

</header>

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:

data-height: Define the minimun height for the sections
data-type: Type of Media Section (parallax/kenburns/video)
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)

{{!>simply-slider2}}       <!--This is simply slider, tis is the same slider like in page-office.hbs file-->
{{!> flexslider-effect}}      <!--This is the big slider on the main side of tha page, if you want to enable the effect just remove ! and change the wrapper class to " "-->
{{!> slice-effect}}           <!--this is slice effect, if you want to enable the effect just remove ! and change the wrapper class to ct-pageWrapper ct-intro--sliced and add this class ct-intro-content below -->
{{!> push-effect}}            <!--this is push effect, if you want to enable the effect just remove ! and change the wrapper class to ct-pageWrapper ct-intro--push and add this class ct-intro-content below-->
{{!>particles-effect}}         <!--This is the particles effect, if you want to enable the effect just remove ! and change the wrapper class to " "-->

    <!--If we use a effect like slice or push, all the content must be in this section-->
     <!--If you have to use a effect like above , you have add this class ct-intro-content-->

{{!>simply-slider2}}

{{!> flexslider-effect}}

{{!> push-effect}}

{{!>particles-effect}}

Was this article helpful ?

Javascript

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:

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

4.2. Google Map (GMAP3 Plugin)

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

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

It uses gmap3 plugin. Documentation: here
HTML Markup:

<div class="ct-googleMap" data-location="Narbutta 24, Warsaw" data-zoom="15" data-height="500"></div>

1	<div class="ct-googleMap" data-location="Narbutta 24, Warsaw" data-zoom="15" data-height="500"></div>

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

<div class="flexslider" data-animation="slide" data-height="100" data-loop="true" data-smooth="true" data-slideshow="true" data-speed="15000" data-animspeed="550" data-controls="true" data-dircontrols="true" data-controlscontainer=".controls">
         (...)
</div>

(...)

</div>

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

* ==================== */
    /* ==== FLEXSLIDER ==== */
 
    if(jQuery().flexslider){
 
        if (jQuery(".flexslider").length > 0) {
            jQuery(".flexslider").each(function(){
                $this=jQuery(this);
                var ctnamespace  = validatedata($this.attr("data-namespace"),"flex-");
                var ctselector  = validatedata($this.attr("data-selector"),".slides > li");
                var ctanimation = validatedata($this.attr("data-animation"),"slide");
                var cteasing = validatedata($this.attr("data-easing"),"swing");
                var ctdirection = validatedata($this.attr("data-direction"),"horizontal");
                var ctreverse = parseBoolean($this.attr("data-reverse"), false);
                var ctanimationloop = parseBoolean($this.attr("data-animationloop"), false);
                var ctsmoothheight = parseBoolean($this.attr("data-smoothheight"), false);
                var ctstartat = parseInt(validatedata($this.attr("data-startat"), 0));
                var ctslideshow = parseBoolean($this.attr("data-slideshow"), true);
                var ctslideshowspeed = parseInt(validatedata($this.attr("data-slideshowspeed"), 7000));
                var ctanimationspeed = parseInt(validatedata($this.attr("data-animationspeed"), 600));
                var ctinitdelay= parseInt(validatedata($this.attr("data-initdelay"), 0));
                var ctrandomize = parseBoolean($this.attr("data-randomize"), false);
                var ctthumbcaptions = parseBoolean($this.attr("data-thumbcaptions"), false);
 
                var ctpauseonaction= parseBoolean($this.attr("data-pauseonaction"), true);
                var ctpauseonhover = parseBoolean($this.attr("data-pauseonhover"), false);
                var ctpauseinvisible= parseBoolean($this.attr("data-pauseinvisible"), true);
                var ctusecss= parseBoolean($this.attr("data-usecss"), true);
                var cttouch= parseBoolean($this.attr("data-touch"), true);
                if(device.mobile()){
                    cttouch = false;
                }
                var ctvideo = parseBoolean($this.attr("data-video"), false);
                var ctcontrolnav= parseBoolean($this.attr("data-controlnav"), true);
                if(ctcontrolnav == false){
                    $this.addClass("no-margin");
                }
                var ctdirectionnav= parseBoolean($this.attr("data-directionnav"), false);
                var ctprevtext  = validatedata($this.attr("data-prevtext"),"Previous");
                var ctnexttext  = validatedata($this.attr("data-nexttext"),"Next");
 
                var ctkeyboard= validatedata(parseBoolean($this.attr("data-keyboard")), true);
                var ctmultiplekeyboard= parseBoolean($this.attr("data-multiplekeyboard"), false);
                var ctmousewheel= parseBoolean($this.attr("data-mousewheel"), false);
                var ctpauseplay= parseBoolean($this.attr("data-pauseplay"), false);
                var ctpausetext  = validatedata($this.attr("data-pausetext"),"Pause");
                var ctplaytext  = validatedata($this.attr("data-playtext"),"Play");
                var ctitemwidth= parseInt(validatedata($this.attr("data-itemwidth"), 0));
                var ctitemmargin= parseInt(validatedata($this.attr("data-itemmargin"), 0));
                var ctminitems= parseInt(validatedata($this.attr("data-minitems"), 0));
                var ctmaxitems= parseInt(validatedata($this.attr("data-maxitems"), 0));
                var ctmove= parseInt(validatedata($this.attr("data-move"), 0));
                var ctallowoneslide= parseBoolean($this.attr("data-allowoneslide"), false);
 
                var ctcontrolscontainer= validatedata($this.attr("data-controlscontainer"), "");
                var ctmanualcontrols= validatedata($this.attr("data-manualcontrols"), "");
 
                var ctsync = validatedata($this.attr("data-sync"), "");
                var ctasnavfor = validatedata($this.attr("data-asnavfor"), "");
 
                $this.flexslider({
                    namespace: ctnamespace,             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
                    selector: ctselector,       //{NEW} Selector: Must match a simple pattern. "{container} > {slide}" -- Ignore pattern at your own peril
                    animation: ctanimation,              //String: Select your animation type, "fade" or "slide"
                    easing: cteasing ,                //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
                    direction: ctdirection,        //String: Select the sliding direction, "horizontal" or "vertical"
                    reverse: ctreverse,                 //{NEW} Boolean: Reverse the animation direction
                    animationLoop: ctanimationloop,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
                    smoothHeight: ctsmoothheight,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
                    startAt: ctstartat,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
                    slideshow: ctslideshow,                //Boolean: Animate slider automatically
                    slideshowSpeed: ctslideshowspeed,           //Integer: Set the speed of the slideshow cycling, in milliseconds
                    animationSpeed: ctanimationspeed,            //Integer: Set the speed of animations, in milliseconds
                    initDelay: ctinitdelay,                   //{NEW} Integer: Set an initialization delay, in milliseconds
                    randomize: ctrandomize,               //Boolean: Randomize slide order
                    thumbCaptions: ctthumbcaptions,           //Boolean: Whether or not to put captions on thumbnails when using the "thumbnails" controlNav.
 
                    // Usability features
 
 
                    pauseOnAction: ctpauseonaction,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
                    pauseOnHover: ctpauseonhover,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
                    pauseInvisible: ctpauseinvisible,           //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
                    useCSS: ctusecss,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
                    touch: cttouch,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
                    video: ctvideo,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
 
                    // Primary Controls
 
 
                    controlNav: ctcontrolnav,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
                    directionNav: ctdirectionnav,             //Boolean: Create navigation for previous/next navigation? (true/false)
                    prevText: ctprevtext,           //String: Set the text for the "previous" directionNav item
                    nextText: ctnexttext,               //String: Set the text for the "next" directionNav item
 
                    // Secondary Navigation
 
 
                    keyboard: ctkeyboard,                 //Boolean: Allow slider navigating via keyboard left/right keys
                    multipleKeyboard: ctmultiplekeyboard,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
                    mousewheel: ctmousewheel,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
                    pausePlay: ctpauseplay,               //Boolean: Create pause/play dynamic element
                    pauseText: ctpausetext,             //String: Set the text for the "pause" pausePlay item
                    playText: ctplaytext,               //String: Set the text for the "play" pausePlay item
 
                    // Special properties
                    controlsContainer: ctcontrolscontainer,          //{UPDATED} jQuery Object/Selector: Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be $(".flexslider-container"). Property is ignored if given element is not found.
                    manualControls: ctmanualcontrols,             //{UPDATED} jQuery Object/Selector: Declare custom control navigation. Examples would be $(".flex-control-nav li") or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
                    sync: ctsync,                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
                    asNavFor: ctasnavfor,                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
 
                    // Carousel Options
 
 
                    itemWidth: ctitemwidth,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
                    itemMargin: ctitemmargin,                  //{NEW} Integer: Margin between carousel items.
                    minItems: ctminitems,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
                    maxItems: ctmaxitems,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
                    move: ctmove,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
                    allowOneSlide: ctallowoneslide           //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide
                })
            })
        }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

* ==================== */

/* ==== FLEXSLIDER ==== */

if(jQuery().flexslider){

if (jQuery(".flexslider").length > 0) {

jQuery(".flexslider").each(function(){

$this=jQuery(this);

var ctnamespace = validatedata($this.attr("data-namespace"),"flex-");

var ctselector = validatedata($this.attr("data-selector"),".slides > li");

var ctanimation = validatedata($this.attr("data-animation"),"slide");

var cteasing = validatedata($this.attr("data-easing"),"swing");

var ctdirection = validatedata($this.attr("data-direction"),"horizontal");

var ctreverse = parseBoolean($this.attr("data-reverse"), false);

var ctanimationloop = parseBoolean($this.attr("data-animationloop"), false);

var ctsmoothheight = parseBoolean($this.attr("data-smoothheight"), false);

var ctstartat = parseInt(validatedata($this.attr("data-startat"), 0));

var ctslideshow = parseBoolean($this.attr("data-slideshow"), true);

var ctslideshowspeed = parseInt(validatedata($this.attr("data-slideshowspeed"), 7000));

var ctanimationspeed = parseInt(validatedata($this.attr("data-animationspeed"), 600));

var ctinitdelay= parseInt(validatedata($this.attr("data-initdelay"), 0));

var ctrandomize = parseBoolean($this.attr("data-randomize"), false);

var ctthumbcaptions = parseBoolean($this.attr("data-thumbcaptions"), false);

var ctpauseonaction= parseBoolean($this.attr("data-pauseonaction"), true);

var ctpauseonhover = parseBoolean($this.attr("data-pauseonhover"), false);

var ctpauseinvisible= parseBoolean($this.attr("data-pauseinvisible"), true);

var ctusecss= parseBoolean($this.attr("data-usecss"), true);

var cttouch= parseBoolean($this.attr("data-touch"), true);

if(device.mobile()){

cttouch = false;

}

var ctvideo = parseBoolean($this.attr("data-video"), false);

var ctcontrolnav= parseBoolean($this.attr("data-controlnav"), true);

if(ctcontrolnav == false){

$this.addClass("no-margin");

}

var ctdirectionnav= parseBoolean($this.attr("data-directionnav"), false);

var ctprevtext = validatedata($this.attr("data-prevtext"),"Previous");

var ctnexttext = validatedata($this.attr("data-nexttext"),"Next");

var ctkeyboard= validatedata(parseBoolean($this.attr("data-keyboard")), true);

var ctmultiplekeyboard= parseBoolean($this.attr("data-multiplekeyboard"), false);

var ctmousewheel= parseBoolean($this.attr("data-mousewheel"), false);

var ctpauseplay= parseBoolean($this.attr("data-pauseplay"), false);

var ctpausetext = validatedata($this.attr("data-pausetext"),"Pause");

var ctplaytext = validatedata($this.attr("data-playtext"),"Play");

var ctitemwidth= parseInt(validatedata($this.attr("data-itemwidth"), 0));

var ctitemmargin= parseInt(validatedata($this.attr("data-itemmargin"), 0));

var ctminitems= parseInt(validatedata($this.attr("data-minitems"), 0));

var ctmaxitems= parseInt(validatedata($this.attr("data-maxitems"), 0));

var ctmove= parseInt(validatedata($this.attr("data-move"), 0));

var ctallowoneslide= parseBoolean($this.attr("data-allowoneslide"), false);

var ctcontrolscontainer= validatedata($this.attr("data-controlscontainer"), "");

var ctmanualcontrols= validatedata($this.attr("data-manualcontrols"), "");

var ctsync = validatedata($this.attr("data-sync"), "");

var ctasnavfor = validatedata($this.attr("data-asnavfor"), "");

$this.flexslider({

namespace: ctnamespace, //{NEW} String: Prefix string attached to the class of every element generated by the plugin

selector: ctselector, //{NEW} Selector: Must match a simple pattern. "{container} > {slide}" -- Ignore pattern at your own peril

animation: ctanimation, //String: Select your animation type, "fade" or "slide"

easing: cteasing , //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!

direction: ctdirection, //String: Select the sliding direction, "horizontal" or "vertical"

reverse: ctreverse, //{NEW} Boolean: Reverse the animation direction

animationLoop: ctanimationloop, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end

smoothHeight: ctsmoothheight, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

startAt: ctstartat, //Integer: The slide that the slider should start on. Array notation (0 = first slide)

slideshow: ctslideshow, //Boolean: Animate slider automatically

slideshowSpeed: ctslideshowspeed, //Integer: Set the speed of the slideshow cycling, in milliseconds

animationSpeed: ctanimationspeed, //Integer: Set the speed of animations, in milliseconds

initDelay: ctinitdelay, //{NEW} Integer: Set an initialization delay, in milliseconds

randomize: ctrandomize, //Boolean: Randomize slide order

thumbCaptions: ctthumbcaptions, //Boolean: Whether or not to put captions on thumbnails when using the "thumbnails" controlNav.

// Usability features

pauseOnAction: ctpauseonaction, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.

pauseOnHover: ctpauseonhover, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering

pauseInvisible: ctpauseinvisible, //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.

useCSS: ctusecss, //{NEW} Boolean: Slider will use CSS3 transitions if available

touch: cttouch, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices

video: ctvideo, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

// Primary Controls

controlNav: ctcontrolnav, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage

directionNav: ctdirectionnav, //Boolean: Create navigation for previous/next navigation? (true/false)

prevText: ctprevtext, //String: Set the text for the "previous" directionNav item

nextText: ctnexttext, //String: Set the text for the "next" directionNav item

// Secondary Navigation

keyboard: ctkeyboard, //Boolean: Allow slider navigating via keyboard left/right keys

multipleKeyboard: ctmultiplekeyboard, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.

mousewheel: ctmousewheel, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel

pausePlay: ctpauseplay, //Boolean: Create pause/play dynamic element

pauseText: ctpausetext, //String: Set the text for the "pause" pausePlay item

playText: ctplaytext, //String: Set the text for the "play" pausePlay item

// Special properties

controlsContainer: ctcontrolscontainer, //{UPDATED} jQuery Object/Selector: Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be $(".flexslider-container"). Property is ignored if given element is not found.

manualControls: ctmanualcontrols, //{UPDATED} jQuery Object/Selector: Declare custom control navigation. Examples would be $(".flex-control-nav li") or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.

sync: ctsync, //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.

asNavFor: ctasnavfor, //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

// Carousel Options

itemWidth: ctitemwidth, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.

itemMargin: ctitemmargin, //{NEW} Integer: Margin between carousel items.

minItems: ctminitems, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.

maxItems: ctmaxitems, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.

move: ctmove, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.

allowOneSlide: ctallowoneslide //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide

})

}

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/

 if (device.mobile()) {
            // disable animation on mobile
            jQuery("body").removeClass("withAnimation");
        } else {
            jQuery('.withAnimation .animated').appear(function () {
                jQuery(this).each(function () {
                    jQuery(this).addClass('activate');
                    jQuery(this).addClass($(this).data('fx'));
                });
            }, {accY: -150});
        }
    }

if (device.mobile()) {

// disable animation on mobile

jQuery("body").removeClass("withAnimation");

} else {

jQuery('.withAnimation .animated').appear(function () {

jQuery(this).each(function () {

jQuery(this).addClass('activate');

jQuery(this).addClass($(this).data('fx'));

});

}, {accY: -150});

}

4.5. fitVids

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

<div class="fit-video">
    <iframe width="853" height="480" src="//www.youtube.com/embed/HJ2F7eptn_A?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>

</div>

and js:

    /* ==== FIT VIDEOS TO CONTAINER ==== */
    if (($().fitVids)){
        $(".fit-video").fitVids();
    }

/* ==== FIT VIDEOS TO CONTAINER ==== */

if (($().fitVids)){

$(".fit-video").fitVids();

}

4.6. Charts

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

Was this article helpful ?

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:

$to = "mail@example.com";
$from = "mail@example.com

1 2	$to = "mail@example.com"; $from = "mail@example.com

HTML Markup:

<div class="ct-contactForm">
                    <div class="successMessage alert alert-success" style="display: none">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        Thank You!
                    </div>
                    <div class="errorMessage alert alert-danger" style="display: none">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        Ups! An error occured. Please try again later.
                    </div>
 
                    <form role="form" action="./assets/form/send.php" method="post" class="contactForm validateIt" data-email-subject="Contact Form" data-show-errors="true">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input id="contact_name" placeholder="Name" required="" type="text" name="field[]" class="form-control">
                                    <label for="contact_name">Name</label>
                                </div>
                                <div class="form-group">
                                    <input id="contact_email" placeholder="Email" required="" type="email" name="field[]" class="form-control">
                                    <label for="contact_email">Email</label>
                                </div>
                                <div class="form-group">
                                    <input id="contact_subject" placeholder="Subject" required="" type="text" name="field[]" class="form-control">
                                    <label for="contact_subject">Subject</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <textarea id="contact_message" placeholder="Message" class="form-control" rows="8" name="field[]" required=""></textarea>
                                    <label for="contact_message">Message</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <button type="submit" class="btn ct-btn--perspective btn-primary btn-lg text-uppercase pull-right"><i class="fa fa-paper-plane"></i> Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

Thank You!

</div>

Ups! An error occured. Please try again later.

</div>

</div>

<label for="contact_email">Email</label>

</div>

<label for="contact_subject">Subject</label>

</div>

<label for="contact_message">Message</label>

</div>

<button type="submit" class="btn ct-btn--perspective btn-primary btn-lg text-uppercase pull-right"><i class="fa fa-paper-plane"></i> Send Message

</button>

</div>

</form>

</div>

Was this article helpful ?

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

Was this article helpful ?

Orlando Ghost

Orlando Ghost

HTML Structure

1.1. Grid System and Single row structure

1.2. Page structure

CSS Files and Structure

2.1. Main Menu structure

2.2. Blog Options

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

2.4. Icons

2.5. CSS Files & Structure

2.6. Utilities

Features

3.1. Media Sections

3.1.1. Slice Effect:

3.1.2. Push Effect:

3.1.3. Particles Effect:

3.1.4. Flexslider:

3.1.5. Parallax Section:

3.1.6. Ken Burns Section:

3.1.7. Video Section:

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

Javascript

4.1. Javascrpt library and files

4.2. Google Map (GMAP3 Plugin)

4.4. Jquery.appear

4.5. fitVids

4.6. Charts

Contact Form

Sources & Credits

Siver

Estato

Disrupt

We are elite