Orlando

Support

Outsourcing

Orlando – Responsive HTML5 Template

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

Scope of free support

We can help you with:

Responding to questions or problems regarding the item and its features

Fixing any discovered item’s bugs

Providing updates to ensure compatibility with new software versions

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

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:

XHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

Page structure

Below you will find default page structure :

<!DOCTYPE html>
   <html>
   <head>
 
   [css]
 
   </head>
   <body>
 
   [header]
   [main menu]
 
   <!-- main container -->
   <div id="wrapper">
 
     [component 1]
 
     <!-- fullwidth element -->
       </div>
         [fullwidth parallax]
       <div class="container">
     <!-- / fullwidth element -->
 
     [component 6]
 
 
   </div>
   <!-- / main container -->
 
 
   [footer]
 
   [javascripts]
 
   </body>
   </html>

<!DOCTYPE html>

<html>

<head>

[css]

</head>

<body>

[header]

[main menu]

[component 1]

</div>

[fullwidth parallax]

[component 6]

</div>

[footer]

[javascripts]

</body>

</html>

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:

#primaryContent a {color: #someColor;}

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.

I.E.

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

1	#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.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

<head>
    (..)
    <link rel="stylesheet" type="text/css" href="css/motive.css">
    (..)
    </head>

<head>

(..)

(..)

</head>

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

<nav class="navbar ct-navbar--transparent 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="index.html"><img src="./assets/images/logo.png" alt="Orlando Logo"> </a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ct-navbarNav--defaultActive ct-navbar--fadeIn yamm">
<li class="dropdown yamm-fw active">
    <a href="index.html">Home <i class="fa fa-angle-double-down"></i></a>
    <ul class="dropdown-menu">
     </ul>

</div>
<!-- /.navbar-collapse -->
<div class="ct-navbar-search">
    <form role="form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Please type keywords..." required>
        </div>
        <button class="ct-navbar-search-button" type="submit">
            <i class="fa fa-search fa-fw"></i>
        </button>
    </form>
</div>
</div>
<!-- /.container -->
</nav>

</div>

</ul>

</div>

</div>

</button>

</form>

</div>

</nav>

In order to create mega menus read the documentation here:

Yamm 3 Documentation

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”

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

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

Was this article helpful ?

Media Sections

Orlando supports media sections with Parallax, KenBurns effect and videos.

Parallax Section

<section class="ct-mediaSection ct-u-paddingBoth70" data-stellar-background-ratio="0.3" data-height="650" data-type="parallax" data-bg-image="./assets/images/demo-content/bigImage1.jpg" data-bg-image-mobile="./assets/images/demo-content/bigImage1-mobile.jpg" style="min-height: 650px; height: 650px; background-image: url(http://orlando.html.themeforest.createit.pl/light/assets/images/demo-content/bigImage1.jpg); background-position: 50% 50%;">
    <div class="ct-mediaSection-inner">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <header class="ct-pageSectionHeader">
                        <h3 class="text-lowercase ct-fw-600">
                            Parallax
                            <small class="ct-fw-700 text-uppercase">Yes, we are the absolute best in the business
                            </small>
                        </h3>
                    </header>
                </div>
                <div class="col-sm-8">
                    <p>
                        Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti
                        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus. Morbi
                        accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius dictum. Maecenas
                        tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac velit aliquet,
                        bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus leo nunc, pretium
                        vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
                        nascetur ridiculus mus. Donec porttitor tristique sem, dictum vehicula nisi accumsan eget.
                        Pellentesque habitant morbi tristique senectus et netus.
                    </p>
                    <a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a>
                    <a href="features-p-tables.html" class="btn ct-btn--black ct-btn--rounded text-uppercase">Pricing Options</a>
                </div>
            </div>
        </div>
    </div>
</section>

Parallax

<small class="ct-fw-700 text-uppercase">Yes, we are the absolute best in the business

</small>

</h3>

</header>

</div>

<p>

Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti

sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus. Morbi

accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius dictum. Maecenas

tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac velit aliquet,

bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus leo nunc, pretium

vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes,

nascetur ridiculus mus. Donec porttitor tristique sem, dictum vehicula nisi accumsan eget.

Pellentesque habitant morbi tristique senectus et netus.

</p>

<a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a>

<a href="features-p-tables.html" class="btn ct-btn--black ct-btn--rounded text-uppercase">Pricing Options</a>

</div>

</section>

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! 🙂

Ken Burns Sections

<section class="ct-mediaSection ct-u-paddingBoth70 ct-u-colorWhite" data-height="650" data-type="kenburns" data-bg-image-mobile="./assets/images/demo-content/bigImage5-mobile.jpg" style="min-height: 650px; height: 650px;">
    <div class="ct-mediaSection-kenburnsImageContainer">
        <img src="./assets/images/demo-content/bigImage5.jpg" alt="demo image" class="fx">
        <img src="./assets/images/demo-content/bigImage4.jpg" alt="demo image" class="">
        <img src="./assets/images/demo-content/bigImage5.jpg" alt="demo image" class="fx">
    </div>
    <div class="ct-mediaSection-inner">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <header class="ct-pageSectionHeader">
                        <h3 class="text-lowercase ct-fw-600 ct-u-colorWhite">
                            Ken Burns
                            <small class="ct-fw-700 text-uppercase ct-u-colorWhite">Yes, we are the absolute best in the
                                business
                            </small>
                        </h3>
                    </header>
                </div>
                <div class="col-sm-8">
                    <p>
                        Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti
                        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus. Morbi
                        accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius dictum. Maecenas
                        tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac velit aliquet,
                        bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus leo nunc, pretium
                        vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
                        nascetur ridiculus mus. Donec porttitor tristique sem, dictum vehicula nisi accumsan eget.
                        Pellentesque habitant morbi tristique senectus et netus.
                    </p>
                    <a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a>
                    <a href="features-p-tables.html" class="btn btn-default ct-btn--rounded text-uppercase">Pricing Options</a>
                </div>
            </div>
        </div>
    </div>
</section>

</div>

Ken Burns

<small class="ct-fw-700 text-uppercase ct-u-colorWhite">Yes, we are the absolute best in the

business

</small>

</h3>

</header>

</div>

<p>

Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti

sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus. Morbi

accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius dictum. Maecenas

tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac velit aliquet,

bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus leo nunc, pretium

vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes,

nascetur ridiculus mus. Donec porttitor tristique sem, dictum vehicula nisi accumsan eget.

Pellentesque habitant morbi tristique senectus et netus.

</p>

<a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a>

<a href="features-p-tables.html" class="btn btn-default ct-btn--rounded text-uppercase">Pricing Options</a>

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

Video Sections

<section class="ct-mediaSection ct-u-paddingBoth70 ct-u-colorWhite" data-height="700" data-type="video" data-bg-image-mobile="./assets/images/demo-content/bigImage3-mobile.jpg" style="min-height: 700px; height: 700px;">
    <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9">
        <!-- in order for video to be muted you must add  &amp;api=1&amp;player_id=vimeoplayer1 to the end of the video src
            If you have more than one video, make sure that player_id and id have dif names on each video
    -->
        <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" style="height: 700px;">
        <div class="ct-mediaSection-inner">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <header class="ct-pageSectionHeader">
                            <h3 class="text-lowercase ct-fw-600 ct-u-colorWhite">
                                Video
                                <small class="ct-fw-700 text-uppercase ct-u-colorWhite">Yes, we are the absolute best in
                                    the business
                                </small>
                            </h3>
                        </header>
                    </div>
                    <div class="col-sm-8">
                        <p>
                            Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti
                            sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus.
                            Morbi accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius
                            dictum. Maecenas tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac
                            velit aliquet, bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus
                            leo nunc, pretium vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis
                            dis parturient montes, nascetur ridiculus mus. Donec porttitor tristique sem, dictum
                            vehicula nisi accumsan eget. Pellentesque habitant morbi tristique senectus et netus.
                        </p>
                        <a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a>
                        <a href="features-p-tables.html" class="btn btn-default ct-btn--rounded text-uppercase">Pricing
                            Options</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- in order for video to be muted you must add &api=1&player_id=vimeoplayer1 to the end of the video src

If you have more than one video, make sure that player_id and id have dif names on each video

-->

</video>

</div>

Video

<small class="ct-fw-700 text-uppercase ct-u-colorWhite">Yes, we are the absolute best in

the business

</small>

</h3>

</header>

</div>

<p>

Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti

sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus.

Morbi accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius

dictum. Maecenas tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac

velit aliquet, bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus

leo nunc, pretium vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis

dis parturient montes, nascetur ridiculus mus. Donec porttitor tristique sem, dictum

vehicula nisi accumsan eget. Pellentesque habitant morbi tristique senectus et netus.

</p>

<a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a>

<a href="features-p-tables.html" class="btn btn-default ct-btn--rounded text-uppercase">Pricing

Options</a>

</div>

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

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

Was this article helpful ?

Charts

Progress Bars

This theme has 2 types of layout and all you have to do is change one class. Also, everything is done via data attribute.

    <div class="progress">
                    <div class="progress-bar animating" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="ct-progressBar-text">60% Complete</span>

                        <div class="ct-progressBar-tr"></div>
                    </div>
                </div>
    </div>

<span class="ct-progressBar-text">60% Complete</span>

</div>

Stripped progress bar

<div class="progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped animating" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                        <span class="ct-progressBar-text">40% Complete (success)</span>

                        <div class="ct-progressBar-tr"></div>
                    </div>
                </div>
</div>

<span class="ct-progressBar-text">40% Complete (success)</span>

</div>

aria-valuenow: Percentage this bar should have
aria-valuemax: Max value
aria-valuemin: Min value

Was this article helpful ?

Flexslider

Below you will find HTML markup for flexslider:

<div class="flexslider ct-flexslider--controlsVertical ct-flexslider--controlsWhite ct-js-flexslider" data-animations="true" data-height="100%">

(...)

</div>

(...)

</div>

You can change number of flexslider parameters using javascript – learn more about parameters.

Was this article helpful ?

JavaScript

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

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.

Flexslider

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

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

})

}

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 (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 (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});

}

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();

}

Charts.js

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/config.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";

That’s it!

Contact Form

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>

Newsletter Form

HTML Markup:

<h4 class="uppercase motive section-top">Subscribe to Newsletter</h4>
&nbsp;
<div class="successMessage alert alert-success" style="display: none;"><button class="close" type="button" data-dismiss="alert">×</button>
Thank You!</div>
<div class="errorMessage alert alert-danger" style="display: none;"><button class="close" type="button" data-dismiss="alert">×</button>
Ups! An error occured. Please try again later.</div>
<form class="form-inline validateIt" action="../../assets/form/send.php" method="post" data-email-subject="Newsletter Form" data-show-errors="true" data-hide-form="true">
<div class="input-group"><input class="form-control" name="field[]" type="email" placeholder="Enter your email address" />
<input name="msg_subject" type="hidden" value="New Newsletter subscription" />
<span class="input-group-btn">
<button class="btn btn-brick" type="submit">GO</button>
</span></div>
</form>

<h4 class="uppercase motive section-top">Subscribe to Newsletter</h4>

Thank You!</div>

Ups! An error occured. Please try again later.</div>

</span></div>

</form>

Options (can be changed in HTML) :

Mail Subject – just change value in :
Success Message – change successMessage div content
Error Message – change errorMessage div content

Was this article helpful ?

Twitter Feed

This is live twitter feed. This plugin will grab your latest tweets and display them on page.
Configuration: – just edit twitter/config.php file :

 $config = array(
  	'username' => "XXX", //username
  	'limit' => 3, //how many tweets we would like to display?
  	'with_replies' => true, //show replies? true or false
  	'oauth_access_token' => 'TOKEN',
  	'oauth_access_token_secret' => 'TOKEN_SECRET',
  	'consumer_key' => 'KEY',
  	'consumer_secret' => 'KEY_SECRET',
  );

$config = array(

'username' => "XXX", //username

'limit' => 3, //how many tweets we would like to display?

'with_replies' => true, //show replies? true or false

'oauth_access_token' => 'TOKEN',

'oauth_access_token_secret' => 'TOKEN_SECRET',

'consumer_key' => 'KEY',

'consumer_secret' => 'KEY_SECRET',

);

Where can I get these keys, tokens, etc?

Twitter API requires authentication to display tweets from your account.
To twiiter feed work you need to create the ‘application’
and generate 4 special keys for your twitter account via https://dev.twitter.com/apps:
– Consumer key (key)
– Consumer secret (secret)
– Access token (token)
– Access token secret (token_secret)
Video tutorial : “How to create Twitter App”
http://vimeo.com/60891535

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 – Responsive HTML5 Template

HTML Structure

Page structure

CSS Files and Structure

Colors

Main Menu structure

Icons

CSS Files & Structure

Utilities

Features

Media Sections

Parallax Section

Ken Burns Sections

Video Sections

Charts

Progress Bars

Flexslider

JavaScript

Google Map (GMAP3 Plugin)

Flexslider

jquery.appear

fitVids

Charts.js

Contact form

Contact Form

Newsletter Form

Twitter Feed

Sources & Credits

Siver

Estato

Disrupt

We are elite