ThemeWoodmen Logo

Contact Us

Pluto - Site Template

By ThemeWoodmen
Created: Feb 03, 2014. Last Update: Mar 20, 2014

Thank you for purchasing our site template! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thanks so much!

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

Main menu and Site Logo

      <!-- navbar -->
      <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <!-- main logo -->
            <a class="navbar-brand" href="/"><img src="images/content/logo.png" alt=" "></a>
          </div>
          <div class="navbar-collapse collapse">
            <form class="pull-right header-search" role="form" style="display:none;">
              <fieldset>
                <div class="container">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Type to search...">
                  </div>
                  <button type="submit"><i class="fa fa-search"></i></button>
                </div>
              </fieldset>
            </form>
            <a href="#" id="showHeaderSearch" class="hidden-xs"><i class="fa fa-search"></i></a>
            <ul class="nav navbar-nav navbar-right">
              <!-- dropdown menu -->
              <li class="dropdown active">
                <a href="index.html" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Home</a>
                <ul class="dropdown-menu">
                  <li><a href="index.html">Home</a></li>
                  <li><a href="01-b-pluto-home-v2.html">Home II</a></li>
                  <li><a href="01-c-pluto-home-parallax.html">Home Parallax Slider</a></li>
                  <li><a href="01-d-pluto-home-video.html">Home Parallax Video</a></li>
                </ul>
              </li>
              (..)
              <!-- standard menu item -->
              <li><a href="07-pluto-contact.html">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- / navbar -->
    

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>

Page structure

Below you will find default page structure :

   <!DOCTYPE html>
   <html>
   <head>

   [css]

   </head>
   <body>

     [main menu]

     <section>
       [component1]
       [component2]
     </section>


   <section>
     [component3]
   </section>

     [footer]


   [javascripts]

   </body>
   </html>
 

Section

HTML Markup:

<section class="content-area bg1 brightText makeoverflow" data-btmspace="40" data-topspace="20" data-bg="images/content/home-v1-clients-bg.jpg">
  (..)
</section>

Available parameters:

  • bg1 or bg2 (class) - background color
  • brightText (class) - text will be bright - useful for dark background
  • makeOverflow - setting overflow:hidden for container - useful using animation like slideDownBig
  • data-btmspace - padding from bottom
  • data-topspace - padding from top
  • background image

Internal link - smooth slide

Ease way to create button that (after click) that will slide to div on current page. In href attr put div id with # and additional class "local".
Example:

  <a href="#openings" class="btn btn-primary btn-lg local">Current openings</a>


  (..)
  (..)
  (..)


  <div id="openings">
    [content]
  </div>

Spacer

Instead using br tags you can use spacer.
Additional bootstrap classes like
"visible-lg" (large desktop)
"visible-md (medium desktop)"
"visible-sm" (tablet)
"visible-xs" (phone)
can show spacer only on given resolution.

  <div class="spacer" data-height="70"></div>

Buttons

Default link button has .btn.btn-default class, using other classes you can change button size and color.

      <!-- BUTTONS SIZES -->
      <a href="#" class="btn btn-primary btn-large">Large button</a>
      <a href="#" class="btn btn-primary">Medium button</a>
      <a href="#" class="btn btn-primary btn-small">Small button</a>
      <a href="#" class="btn btn-primary btn-mini">Mini button</a>
      <a href="#" class="btn btn-primary btn-block">Primary</a>

      <a href="#" class="btn btn-default btn-large">Large button</a>
      <a href="#" class="btn btn-default">Medium button</a>
      <a href="#" class="btn btn-default btn-small">Small button</a>
      <a href="#" class="btn btn-default btn-mini">Mini button</a>
      <a href="#" class="btn btn-default btn-block">Primary</a>


    

Accordion

Accordion is a vertically stacked list of items. Each item can be "expanded" or "stretched"
to reveal the content associated with that item. Please remember that div "panel-group"
should have unique id (for example accordion, and also each item should have
unique id (#panel1 and #panel2).
To open one "accordion panel" just add "in" class to "panel-collapse collapse" element.
HTML Markup:

     <div class="panel-group" id="accordion">
       <div class="panel panel-default">
         <div class="panel-heading">
           <h4 class="panel-title">
             <a data-toggle="collapse" data-parent="#accordion" href="#panel1">
               Problems solving
             </a>
           </h4>
         </div>
         <div id="panel1" class="panel-collapse collapse in">
           <div class="panel-body">
             Maecenas placerat arcu purus. Aliquam eget pulvinar purus, vel vehicula lorem. In eu tortor lectus. Phasellus non lacus nec mauris gravida viverra ut id est. Morbi vel urna in mauris interdum dapibus at
             sodales velit.
           </div>
         </div>
       </div>
       <div class="panel panel-default">
         <div class="panel-heading">
           <h4 class="panel-title">
             <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#panel2">
               Systems monitoring
             </a>
           </h4>
         </div>
         <div id="panel2" class="panel-collapse collapse">
           <div class="panel-body">
             Integer quis tristique arcu. Ut convallis purus purus, ut facilisis lorem pulvinar sit. Curabitur ullamcorper purus non auctor consectetur.
           </div>
         </div>
       </div>
       <div class="panel panel-default">
         <div class="panel-heading">
           <h4 class="panel-title">
             <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#panel3">
               Affect management
             </a>
           </h4>
         </div>
         <div id="panel3" class="panel-collapse collapse">
           <div class="panel-body">
             Duis quis elit hendrerit, tempor magna ac, adipiscing ligula. Maecenas neque nibh, vehicula ut neque at, scelerisque mollis enim.
           </div>
         </div>
       </div>
     </div>
     <!-- / panel-group -->
   

Progress bars

Bar where you can set your skill level. Just set data-percentage value.
HTML markup:

      <div class="progress">
        <span class="pro-skill pull-left">Photoshop</span>
        <span class="pro-level pull-right">Pro</span>

        <div class="progress-bar" role="progressbar" aria-valuenow="95" data-percentage="95" aria-valuemin="0" aria-valuemax="100">
        </div>
      </div>
      <div class="progress">
        <span class="pro-skill pull-left">Illustrator</span>
        <span class="pro-level pull-right">Very good</span>

        <div class="progress-bar" role="progressbar" aria-valuenow="80" data-percentage="80" aria-valuemin="0" aria-valuemax="100">
        </div>
      </div>
    

Pricing Tables

You can show your price plan by using price tables. There are 2 types of boxes.

Example HTML markup:

      <div class="priceBox text-center">
        <div class="inner">
          <h3>Standard</h3>

          <div>
            <sup>$</sup><em>30</em><sub>/mo</sub>
          </div>
          <a href="#" class="btn btn-primary">Get Started</a>
        </div>
        <span>30 GB storage</span>
        <span>200 GB bandwidth</span>
        <span>10 email accounts</span>
        <span>10 MySQL databases</span>
        <span>3 support tickets per month</span>
      </div>

      <!-- type 2 -->
      <div class="priceBox type2 text-center">
        <div class="inner">
          <i class="fa fa-umbrella"></i>

          <h3>Basic</h3>

          <div>
            <sup>$</sup><em>10</em><sub>/mo</sub>
          </div>
        </div>
        <span>10 GB storage</span>
        <span>100 GB bandwidth</span>
        <span>1 email accounts</span>
        <span>1 MySQL databases</span>
        <span>1 support tickets per month</span>
        <a href="#" class="btn btn-primary">Get Started</a>
      </div>
    

Vertical Tabs

You can click tabs to swap between content that is divided into logical sections. Remember that each nav-pill item and tab-content item should have unique id (for example #tab1 and #tab2, #tab3).
Active tab-pane have additional "active in" classes.
HTML markup:

      <div class="row">
        <div class="col-md-3">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#tab1" data-toggle="tab">Design</a></li>
            <li><a href="#tab2" data-toggle="tab">Engineering</a></li>
            <li><a href="#tab3" data-toggle="tab">Product</a></li>
            <li><a href="#tab4" data-toggle="tab">Community</a></li>
            <li><a href="#tab5" data-toggle="tab">Operations</a></li>
            <li><a href="#tab6" data-toggle="tab">Expansion</a></li>
            <li><a href="#tab7" data-toggle="tab">Legal & public policy</a></li>
          </ul>
        </div>
        <div class="col-md-9">
          <div class="tab-content">
            <div class="tab-pane active fade in" id="tab1">
              tab content here
            </div>
            <div class="tab-pane fade" id="tab2">
              tab content here
            </div>
            <div class="tab-pane fade" id="tab3">
              tab content here
            </div>
            <div class="tab-pane fade" id="tab4">
              tab content here
            </div>
            <div class="tab-pane fade" id="tab5">
              tab content here
            </div>
            <div class="tab-pane fade" id="tab6">
              tab content here
            </div>
            <div class="tab-pane fade" id="tab7">
              tab content here
            </div>
          </div>
        </div>
      </div>
      <!-- / row -->

    

Icons

We've included 360+ font icons.


HTML markup:

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

One pager

00-pluto-single-page.html is onepager.
Additional plugins are included :

  • jQuery Easing - adding effect to scrolling
  <!-- one pager only -->
  <script src="js/jquery.easing.1.3.min.js"></script>
  

It contains different menu:

  • menu items have link with hash
  • logo have data-logo attr, which is logo that will appear after scrolling page
    in our case this this is color logo.
  <!-- navbar -->
  <nav class="navbar navbar-default navbar-fixed-top navbar-transparent" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/" data-logo="images/content/logo.png"><img src="images/content/logo-onepager.png" alt=" "></a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#start">Start</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- / navbar -->

After click, menu item will slide to section with proper ID.
For example : link with href #blog will slide to div with blog id:

  <section class="content-area bg1" id="blog">
    (..)
  </section>

Ajax Portfolio Items

Notice: Ajax requires to upload all files on the server, locally it won't work.

On one pager, in "Portfolio" section we use Ajax Portfolio. When user is clicking on thumbnail we fetch portfolio details without refreshing the page.
Each thumbnail have additional class "getAjaxItem" :

  <div class="galleryItem web">
    <a href="00-b-work-ajax.html" class="area-hover getAjaxItem">
      <div class="vertical-parent">
        <div class="vertical-child">
          <span class="cat-links">Identity, Web</span>
          <h4 class="entry-title">Project name goes here</h4>
        </div>
      </div>
    </a>
    <a href="00-b-work-ajax.html" class="getAjaxItem"><img src="images/content/home-v2-works-02.jpg" alt=" "></a>
  </div>

00-b-work-ajax.html includes example content,
description will be fetched from #ajaxContent div :

  <div id="ajaxContent">
    (..)
  </div>

So basically you can create separate pages for every portfolio thumbnail, for example :
00-b-work-ajax-1.html
00-b-work-ajax-2.html
00-b-work-ajax-3.html ..

And update galleryItem links.

Project with lightbox

Instead ajax description you can show big thumbnail, just use following html (where href is big thumbnail that will be shown in lightbox) :

<div class="galleryItem identity">
  <a href="images/content/home-v2-works-01.jpg" class="area-hover imgpopup">
    <div class="vertical-parent">
      <div class="vertical-child">
        <span class="cat-links">Identity, Web</span>
        <h4 class="entry-title">Project with Lightbox</h4>
      </div>
    </div>
  </a>
  <a href="images/content/home-v2-works-01.jpg" class="imgpopup"><img src="images/content/home-v2-works-01.jpg" alt=" "></a>
</div>

CSS Files and Structure

We've included :

  • /css/bootstrap.css (Bootstrap library styles)
  • /css/style.css
Additonal styles (requires for components such sliders/ icons / form elements etc.)
  • /css/animate.css

style.css contains theme styles.
Table of content:

  • FONTS
  • TYPOGRAPHY
  • BUTTONS
  • NAVBAR
  • FORMS
  • ELEMENTS
  • SECTIONS
  • PARALLAX
  • ICON BOX
  • PERSON BOX
  • TIMER COUNTER
  • TIMELINE
  • ACCORDION
  • PROGRESS BAR
  • PORTFOLIO
  • BLOG
  • FLICKR
  • BREADCRUMB
  • FOOTER
  • GOOGLE MAP
  • DESCRIPTION LIST
  • MEDIA OBJECT
  • TABS
  • PRICEBOX
  • TABLE
  • LIST STYLED
  • 404 PAGE
  • PLUGINS
  • ANIMATE.CSS
  • FLEXSLIDER
  • MAGNIFIC POPUP
  • ISOTOPE
  • media queries, adjustments
    • @media (max-width: 1300px) {}
    • @media (max-width: 1200px) {}
    • @media (max-width: 992px) {}
    • @media (max-width: 768px) {}
    • @media (max-width: 480px) {}

Color Variations

You can change motive color and adapt design to suits your needs.

  CSS Motive Styles are placed in /css/motive.css file.

Just replace main color with your own and add it at the bottom of css file.

Javascript

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

  1. Bootstrap 3.03 framework (powerful front-end framework for faster and easier web development)
  2. jQuery 1.10.2 (A fast javascript library that simplifies how to traverse HTML documents, handle events, perform animations.)
  3. jQuery.appear - plugin to call a function when an element appears
  4. jQuery countTo - plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.
  5. FitVids 1.0.3 - plugin for fluid width video embeds.
  6. Magnific Popup - v0.9.9 - responsive lightbox & dialog script with focus on performance and providing best experience for user with any device
  7. jquery.mb.YTPlayer.js - Youtube video as background
  8. TimelineJS - Beautifully crafted timelines that are easy and intuitive to use.
  9. Isotope v1.5.25 - An exquisite jQuery plugin for magical layouts
  10. Flexslider 2.2.0
  11. GMAP3 5.1.1 - plugin to use google maps
  12. Retina.js v1.1.0 - retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays

Isotope plugin

On Portfolio page we use Isotope. This plugin filters work items with a nice animation
Documentation: plugin homepage

Portfolio gallery

You can choose between 5 (default),4 or 3 columns. Just add class ".col-3" or ".col-4" to #galleryContainer
And by adding ".withSpaces" class - there will be spaces between items.
Filters defined in href attributes classes to filter, by adding this class to "galleryItem" this item will be shown on filter button click.

This is HTML markup we use:

      <ul id="galleryFilters" class="option-set clearfix list-unstyled list-inline">
        <li><a href="#filter=*" class="btn btn-default btn-primary">View all works</a></li>
        <li><a href="#filter=.web" class="btn btn-default">Web</a></li>
        <li><a href="#filter=.identity" class="btn btn-default">Identity</a></li>
        <li><a href="#filter=.print" class="btn btn-default">Print</a></li>
      </ul>

      <div id="galleryContainer" class="clearfix withSpaces col-3 animated" data-fx="fadeInLeft">
        <div class="galleryItem identity">
          <article class="portfolio-item">
            <div class="portfolio-thumbnail">
              <a href="#"><img src="images/content/works-01.jpg" alt=" "></a>
              <a href="#" class="overlay-img"><span class="overlay-ico"><i class="fa fa-plus"></i></span></a>
            </div>
            <div class="entry-meta">
              <span class="cat-links"><a href="#">Identity</a>, <a href="#">Web</a></span>
            </div>
            <h4 class="entry-title"><a href="#">Project name goes here</a></h4>
          </article>
          <!-- / portfolio-item -->
        </div>
        (..)
        <div class="galleryItem web">
          <article class="portfolio-item">
            <div class="portfolio-thumbnail">
              <a href="#"><img src="images/content/works-02.jpg" alt=" "></a>
              <a href="#" class="overlay-img"><span class="overlay-ico"><i class="fa fa-plus"></i></span></a>
            </div>
            <div class="entry-meta">
              <span class="cat-links"><a href="#">Identity</a>, <a href="#">Web</a></span>
            </div>
            <h4 class="entry-title"><a href="#">Project name goes here</a></h4>
          </article>
          <!-- / portfolio-item -->
        </div>
      </div>
      <!-- / galleryContainer -->
    

and js:

      if (($.Isotope) && ($('#galleryContainer').length > 0)) {
     		// gallery isotope

     		jQuery(window).load(function () {

     			var $container = jQuery('#galleryContainer'), // object that will keep track of options
     							isotopeOptions = {}, // defaults, used if not explicitly set in hash
     							defaultOptions = {
     								filter: '*',
     								itemSelector: '.galleryItem',
     								sortBy: 'original-order',
     								layoutMode: 'sloppyMasonry',
     								sortAscending: true,
     								resizable: false, // disable normal resizing
     								// set columnWidth to a percentage of container width
     								masonry: { }
     							};


     			$(window).smartresize(function () {
     				$container.isotope({
     					// update columnWidth to a percentage of container width
     					masonry: { }
     				});
     			});

     			// set up Isotope
     			$container.isotope(defaultOptions);

     			var $optionSets = jQuery('#galleryFilters'), isOptionLinkClicked = false;

     			// switches selected class on buttons
     			function changeSelectedLink($elem) {
     				// remove selected class on previous item
     				$elem.parents('.option-set').find('.btn-primary').removeClass('btn-primary');
     				// set selected class on new item
     				$elem.addClass('btn-primary');
     			}

        (..)
      // complete code in js/main.js
     	}
    

Flexslider

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

  • data-height="560"
  • data-direction="horizontal"
  • data-animation="fade"
  • data-loop="true"
  • data-smooth="false"
  • data-slideshow="true"
  • data-speed="15000"
  • data-animspeed="550"
  • data-controls="true"
  • data-dircontrols="true"

Elements in slider content can be animated, just add "animated" class to element and data-fx="type-of-animation".
Available animations : http://daneden.github.io/animate.css/

Documentation: plugin homepage

This is HTML markup we use:

     <section class="flexslider std-slider" data-height="560" data-direction="horizontal" data-animation="fade" data-loop="true" data-smooth="false" data-slideshow="true" data-speed="15000" data-animspeed="550" data-controls="true" data-dircontrols="true">
       <ul class="slides">
         <li data-bg="images/content/home-v1-slider-01.jpg">
           <div class="container">
             <div class="inner">
               <div class="row">
                 <div class="col-md-6">
                   <h2 class="animated" data-fx="fadeInDown">Create something totally awesome</h2>

                   <p class="animated" data-fx="flipInX">Morbi id euismod quam, nec scelerisque quam. Etiam nulla laoreet blandit erat eu lacinia. Nunc eu lacinia elit. Phasellus nec pharetra nunc, ut tempor lacus.</p>
                   <a href="#" class="btn btn-primary btn-lg animated" data-fx="fadeInUp">Purchase Template</a>
                   <a href="#" class="btn btn-default btn-lg animated" data-fx="fadeInUp">Learn More</a>
                 </div>
                 <div class="col-md-6"></div>
               </div>
             </div>
           </div>
         </li>
         <li data-bg="images/content/home-v2-slider-01.jpg">
           <div class="container">
             <div class="inner">
               <div class="text-center">
                 <h2 class="page-title animated" data-fx="fadeInDown">Pluto HTML Template</h2>

                 <h2 class="animated" data-fx="flipInY">CREATE SOMETHING TOTALLY AWESOME</h2>
                 <a href="#" class="btn btn-default btn-lg animated" data-fx="fadeInUp">Purchase Template</a>
               </div>
             </div>
           </div>
         </li>
       </ul>
     </section>
     <!-- / flexslider -->
   

and js:


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

		if (($().flexslider)&&($(".flexslider").length>0)) {

			$('.flexslider.std-slider').each(function () {
				var $this = $(this);

				// initialize
				$this.find(".slides > li").each(function () {
					var $slide_item = $(this);
					var bg = validatedata($slide_item.data('bg'), false);
					if (bg) {
						$slide_item.css('background-image', 'url("' + bg + '")');
					}
					$slide_item.css('min-height', $this.attr('data-height') + "px");

					// hide slider content due to fade animation
					$slide_item.find(".inner").hide();

					$slide_item.find(".inner [data-fx]").each(function () {
						$(this).removeClass("animated");
					})
				})

				var direction = validatedata($this.attr('data-direction'), "horizontal");
				var animation = validatedata($this.attr('data-animation'), "slide");
				var loop = validatedata(parseBoolean($this.attr("data-loop")), false);
				var smooth = validatedata(parseBoolean($this.attr("data-smooth")), false);
				var slideshow = validatedata(parseBoolean($this.attr("data-slideshow")), false);
				var speed = validatedata(parseInt($this.attr('data-speed')), 7000);
				var animspeed = validatedata(parseInt($this.attr("data-animspeed")), 600);
				var controls = validatedata(parseBoolean($this.attr('data-controls')), false);
				var dircontrols = validatedata(parseBoolean($this.attr('data-dircontrols')), false);

				$this.flexslider({
					direction: direction,        //String: Select the sliding direction, "horizontal" or "vertical"
					animation: animation,              //String: Select your animation type, "fade" or "slide"
					animationLoop: loop,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
					smoothHeight: smooth,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
					slideshow: slideshow,                //Boolean: Animate slider automatically
					slideshowSpeed: speed,           //Integer: Set the speed of the slideshow cycling, in milliseconds
					animationSpeed: animspeed,            //Integer: Set the speed of animations, in milliseconds

					// Primary Controls
					controlNav: controls,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
					directionNav: dircontrols,             //Boolean: Create navigation for previous/next navigation? (true/false)

					pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
					prevText: " ",           //String: Set the text for the "previous" directionNav item
					nextText: " ",
					useCSS: false,

					// Callback API
					start: function () {
						setTimeout(function () {
							$this.find(".slides > li.flex-active-slide .inner").each(function () {
								var $content = $(this);
								if (!$.browser.msie) {
									$content.closest(".inner").show();
								} else {
									$content.closest(".inner").fadeIn(300);
								}
							});
							$this.find(".slides > li.flex-active-slide .inner [data-fx]").each(function () {
								var $content = $(this);
								$content.addClass($content.data('fx')).show().addClass("animated activate");
							})
						}, 600);

					},
					before: function () {

						$this.find(".slides > li.flex-active-slide .inner [data-fx]").each(function () {
							var $content = $(this);
							$content.closest(".inner").fadeOut(400);
							$content.removeClass($content.data('fx')).removeClass("animated activate");
						})
					},           //Callback: function(slider) - Fires asynchronously with each slider animation
					after: function () {
						setTimeout(function () {
							$this.find(".slides > li.flex-active-slide .inner").each(function () {
								var $content = $(this);
								if (!$.browser.msie) {
									$content.closest(".inner").show();
								} else {
									$content.closest(".inner").fadeIn(300);
								}
							});
							$this.find(".slides > li.flex-active-slide .inner [data-fx]").each(function () {
								var $content = $(this);
								$content.addClass($content.data('fx')).show().addClass("animated activate");
							})
						}, 150);
					},            //Callback: function(slider) - Fires after each slider animation completes
					end: function () {
					},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
					added: function () {
					},            //{NEW} Callback: function(slider) - Fires after a slide is added
					removed: function () {
					}           //{NEW} Callback: function(slider) - Fires after a slide is removed
				});
			});

Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
Documentation: here

  <!-- open video in popup -->
  <a href="http://www.youtube.com/watch?v=HJ2F7eptn_A" class="popup-iframe">
    <img src="images/content/home-v1-blog-03.jpg" alt=" ">
  </a>


  <!-- open big image in popup -->
  <a href="images/content/home-v2-works-01-big.jpg" class="imgpopup">
    <img src="images/content/home-v2-works-01.jpg" alt=" ">
  </a>

and js :

  if ($().magnificPopup) {

 		$(".popup-iframe").magnificPopup({
 			disableOn: 700,
 			type: 'iframe',
 			mainClass: 'mfp-fade',
 			removalDelay: 160,
 			preloader: false,
 			fixedContentPos: false
 		});

 		$('.imgpopup').magnificPopup({
 			type: 'image',
 			closeOnContentClick: true,
 			closeBtnInside: false,
 			fixedContentPos: false,
 			mainClass: 'mfp-fade', // class to remove default margin from left and right side
 			image: {
 				verticalFit: true
 			}
 		});
 	}

Google Map (GMAP3 Plugin)

This is google map with custom marker,
We load the API https://maps.googleapis.com/maps/api/js library into a page asynchronously (js/main.js)
you can define couple parameters:

  • data-location - address to show
  • data-height - map height
  • data-offset - by how many map should be repositioned from marker center point

It uses gmap3 plugin.
Documentation: here
HTML Markup:

  <div class="mapOuter">
    <div class="googleMap" data-location="Junipers Blvd. 380 Queens, NY 11379, USA" data-height="410" data-offset="0"></div>
  </div>

and js :

      /* google map */

      function gmap_init() {
          var styles = [{
              featureType: "all",
              stylers: [{ saturation: -100 }]
          }];

          // Create a new StyledMapType object, passing it the array of styles,
          // as well as the name to be displayed on the map type control.
          var styledMap = new google.maps.StyledMapType(styles,
                  {name: "Monochromatic"});

          // Create a map object, and include the MapTypeId to add
          // to the map type control.
          var mapOptions = {
              center: new google.maps.LatLng(51.523759,-0.158364),
              zoom: 16,
              scrollwheel: false,
              draggable: true,
              disableDoubleClickZoom: 1,

              mapTypeControlOptions: {
                  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
              }

          };

          var map = new google.maps.Map(document.getElementById("google-map-1"),
                  mapOptions);

          var marker = new google.maps.Marker({
              position: mapOptions.center,
              map: map,
              title:"We are here",
              icon: "images/google-maps-marker.png"
          });
          //Associate the styled map with the MapTypeId and set it to display.
          map.mapTypes.set('map_style', styledMap);
          map.setMapTypeId('map_style');
      }
      // function call
      if (typeof google === 'object' && typeof google.maps === 'object') {
      	gmap_init();
      }

    

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/

  $('.withAnimation .animated').appear(function () {
			var $this = $(this);
			$this.each(function () {
				$this.addClass('activate');
				$this.addClass($this.data('fx'));
			});
		}, {accX: 50, accY: -150});

countTo

jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.
Documentation: https://github.com/mhuggins/jquery-countTo

HTML Markup:

  <div class="timerCounter">
    <span class="timerVal" data-from="0" data-to="426" data-speed="4000" data-refresh-interval="50"></span>
    <span class="timerDesc">Successfully completed projects</span>
  </div>

and js:

  $('.timerCounter').appear(function () {
			$('.timerVal').each(function () {
				$(this).countTo();
			})
		})

fitVids

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

HTML Markup:

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

and js:

  if (($().fitVids)&&($(".responsiveVideo").length>0)) {
 		$(".responsiveVideo").fitVids();
 	}

Background Video

We use mb.YTPlayer 1.0 - An open source jQuery component to easily build your custom Youtube® player or to use a Youtube® video as background for your page.
Documentation: plugin homepage
Important notice!
On mobile devices there is video fallback (just embeded iframe) - div with class 'fallbackVideo'
To enable background video on certain page :

  • add class "preloader" to body
  • paste empty div with id "ct_preloader" after body

Available options:

  • opacity: 1 //(int) 0 → Set the opacity of the player;
  • mute: true //(boolean) mute the audio;
  • showControls: true // or false If you set the player as background you can show controls adding this parameter;
  • ratio: ‘4/3’ or “16/9” to set the aspect ratio of the movie;
  • quality: ‘default’ or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”;
  • containment: (string) the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element;
  • optimizeDisplay: true (boolean) will fit the video size into the window size optimizing the view;
  • loop: true (boolean) or false loops the movie once ended.
  • vol: 1 to 100 (number) set the volume level of the video.
  • startAt: 20 (int) Set the seconds the video should start at.
  • autoplay: true (boolean) or false play the video once ready.
  • showYTLogo: true (boolean) Show or hide the YT logo and the link to the original video URL.
  • showControls: true (boolean) Show or hide the controls bar at the bottom of the page.

  <div class="videoSection parallaxEffect" data-property="{videoURL:'http://youtu.be/9xkoBY83HD0',containment:'.videoSection .innerVideo',startAt:35,mute:true,autoPlay:true,loop:true,opacity:1,optimizeDisplay: true, showControls: false,quality: 'hd720', title:' '}">
  <!-- fallback video -->
  <div class="fallbackVideo" style="display:none;">
    <iframe width="560" height="315" src="//www.youtube.com/embed/9xkoBY83HD0" frameborder="0" allowfullscreen> </iframe>
  </div>
    <div class="innerVideo"></div>

    <section class="flexslider std-slider center-controls" style="display:none;" data-height="700" data-direction="vertical" data-animation="fade" data-loop="true" data-smooth="false" data-slideshow="true" data-speed="11000" data-animspeed="550" data-controls="true" data-dircontrols="true">
      <ul class="slides">
        <li>
          <div class="container">
            <div class="inner">
              <div class="text-center">
                <h2 class="page-title animated" data-fx="fadeInDownBig">Parallax Background Video</h2>
                <h2 class="animated" data-fx="bounceIn">CREATE SOMETHING TOTALLY AWESOME</h2>
                <a href="#" class="btn btn-default btn-lg animated" data-fx="fadeInUpBig">Buy Now</a>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="container">
            <div class="inner">
              <div class="text-center">
                <h2 class="page-title animated" data-fx="fadeInDown">Pluto HTML Template</h2>
                <h2 class="animated" data-fx="flipInY">CLEAN, MULTIPURPOSE DESIGN</h2>
                <a href="#" class="btn btn-default btn-lg animated" data-fx="fadeInLeft">Purchase Template</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </section>
    <!-- / flexslider -->
  </div>
  <!-- / videoSection -->

and js:

  /* ======================== */
 	/* === VIDEO BACKGROUND === */

 	// helper function

 	$.fn.isOnScreen = function () {
 		var win = $(window);
 		var viewport = {
 			top: win.scrollTop(),
 			left: win.scrollLeft()
 		};
 		viewport.right = viewport.left + win.width();
 		viewport.bottom = viewport.top + win.height();
 		var bounds = this.offset();
 		bounds.right = bounds.left + this.outerWidth();
 		bounds.bottom = bounds.top + this.outerHeight();
 		return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
 	};

  if (($().mb_YTPlayer) && ($(".videoSection").length > 0)) {
 		if ($.browser.mobile) {
 			// disable on mobile
 			$(".videoSection").hide();
 			$("#ct_preloader").fadeOut(600);

 		} else {

 			if(isiPad) {
 				$("#ct_preloader").fadeOut(600);
 				$(".fallbackVideo").fitVids().show();
 			} else {

 			$(".videoSection").mb_YTPlayer();
 			$('.videoSection').on("YTPStart", function () {
 				setTimeout(function () {
 					$("#ct_preloader").fadeOut(300);
 					$(".videoSection").find(".flexslider").fadeIn(1000);
 				}, 1050);
 			})
 			// if wait long - hide preloader
 			setTimeout(function () {
 				$("#ct_preloader").fadeOut(300);
 			}, 9000);

 			// chrome parallax section fix
 			if ($('.videoSection.parallaxEffect').isOnScreen()) {
 				$('.videoSection.parallaxEffect .innerVideo').css("position", "fixed");
 			} else {
 				$('.videoSection.parallaxEffect .innerVideo').css("position", "absolute");
 			}
 			$(window).on('scroll', function () {
 				if ($('.videoSection.parallaxEffect').isOnScreen()) {
 					$('.videoSection.parallaxEffect .innerVideo').css("position", "fixed");
 				} else {
 					$('.videoSection.parallaxEffect .innerVideo').css("position", "absolute");
 				}
 			});

 			$('.videoSection.parallaxEffect').each(function () {
 				var $this = $(this);
 				$this.siblings(":not([data-bg], .navbar-default)").css({
 					"position": "relative",
 					"z-index": "1"
 				})

 			})

 			} // end not ipad
 		}
 	}

timelineJS

There are lots of timeline tools on the web but they are almost all either hard on the eyes or hard to use. Create timelines that are at the same time beautiful and intuitive for users
TimelineJS is great for pulling in media from different sources. Just throw in a link from Youtube, Vimeo or Wikipedia.
Documentation: https://github.com/NUKnightLab/TimelineJS

How to paste timeline element ?
Just paste:

<div id="timeline-embed"></div>

How to add new events ?
Just fill in \js\timeline\source\timeline.json file, example content :

  {
  	"timeline": {
  		"headline": "About us",
  		"type": "default",
  		"text": "Nunc ac ultricies lorem, eu tristique nunc. Aliquam porttitor, lacus eget tristique vulputate, erat mi varius lectus, nec adipiscing mi ligula sit amet justo. Quisque bibendum id erat venenatis.",
  		"asset": {
  			"media": "images/content/intro.jpg",
  			"credit": "",
  			"caption": ""
  		},
  		"startDate": "2013,2,26",
  		"date": [
  			{
  				"startDate": "2013,04,6",
  				"headline": "Vimeo Video",
  				"text": "Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.",
  				"asset": {
  					"media": "http://vimeo.com/48717374",
  					"thumbnail": "images/content/clients-logo-05.png",
  					"credit": "",
  					"caption": ""
  				}
  			},
  			{
  				"startDate": "2013,05,12",
  				"headline": "Our second office",
  				"text": "Nunc ac ultricies lorem, eu tristique nunc. Aliquam porttitor, lacus eget tristique vulputate, erat mi varius lectus, nec adipiscing mi ligula sit amet justo. Quisque bibendum id erat venenatis.",
  				"asset": {
  					"media": "images/content/about-v2-timeline-8.jpg",
  					"thumbnail": "images/content/clients-logo-06.png",
  					"credit": "",
  					"caption": ""
  				}
  			},
  			{
  				"startDate": "2013,06,30",
  				"endDate": "2013,08,01",
  				"headline": "Wikipedia",
  				"text": "Some text description goes here",
  				"asset": {
  					"media": "http://en.wikipedia.org/wiki/Typography",
  					"thumbnail": "images/content/clients-logo-01.png"
  				}
  			},
  			{
  				"startDate": "2013,09,6",
  				"headline": "YouTube Video",
  				"text": "Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.",
  				"asset": {
  					"media": "http://www.youtube.com/watch?v=HJ2F7eptn_A",
  					"credit": "",
  					"caption": ""
  				}
  			},
  			{
  				"startDate": "2013,11,1",
  				"headline": "Google Map",
  				"text": "Excepteur sint occaecat cupidatat non proident sunt.",
  				"asset": {
  					"media": "https://maps.google.com/maps?hl=pl-PL&ll=40.716582,-73.885873&spn=0.004911,0.008256&t=k&gl=US&mapclient=apiv3&z=18",
  					"thumbnail": "images/content/clients-logo-02.png"
  				}
  			}
  		]
  	}
  }

and js:

  if ($("#timeline-embed").length > 0) {

 		createStoryJS({
 			width: '100%',
 			height: '600',
 			source: 'js/timeline/source/timeline.json',
 			embed_id: 'timeline-embed',               //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
 			start_at_end: false,                          //OPTIONAL START AT LATEST DATE
 			start_at_slide: '2',                            //OPTIONAL START AT SPECIFIC SLIDE
 			start_zoom_adjust: '2',                            //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
 			hash_bookmark: false,                           //OPTIONAL LOCATION BAR HASHES
 			debug: false,                           //OPTIONAL DEBUG TO CONSOLE
 			lang: 'en',                           //OPTIONAL LANGUAGE
 			maptype: 'HYBRID',                   //OPTIONAL MAP STYLE
 			css: 'js/timeline/css/timeline.css',     //OPTIONAL PATH TO CSS
 			js: 'js/timeline/js/timeline-min.js'    //OPTIONAL PATH TO JS
 		});
 	}

retina.js

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.


For example, if you have an image on your page that looks like this:

    <img src="/images/my_image.png" />
  

The script will check your server to see if an alternative image exists at this path:

  "/images/my_image@2x.png"
  

Documentation: http://retinajs.com/

PSD Files

There are 18 PSD files included in the project.

  • 00-pluto-single-page.psd
  • 01-a-pluto-home.psd
  • 01-a-pluto-home-hovers.psd
  • 01-b-pluto-home-v.2.psd
  • 02-pluto-about.psd
  • 03-pluto-portfolio.psd
  • 04-pluto-portfolio-single.psd
  • 05-pluto-blog.psd
  • 06-pluto-blog-single.psd
  • 07-pluto-contact.psd
  • 08-pluto-404.psd
  • 02-b-pluto-about-v2.psd
  • 04-b-pluto-portfolio-single-horizontal.psd
  • 05-b-pluto-blog-masonry.psd
  • 07-b-pluto-contact-v2.psd
  • 08-pluto-pricing.psd
  • 09-pluto-jobs.psd
  • 10-pluto-jobs-single.psd

Each PSD file is of course layered, layers are groupped into directories. If you'd like to change anything in the page layout, please put jpg/png image in HTML/img directory.

Typography

In this theme we use OPEN SANS font :

  • font weight: 400
  • font weight: 600
  • font weight: 700
These line of code include fonts : (placed in style.css file: )
@font-face{
  font-family: 'Open Sans';
  src: url('../css/font/OpenSans-Regular-webfont.eot');
  src: url('../css/font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../css/font/OpenSans-Regular-webfont.woff') format('woff'), url('../css/font/OpenSans-Regular-webfont.ttf') format('truetype'), url('../css/font/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
  font-weight: 400;
  font-style: normal;

}
@font-face{
  font-family: 'Open Sans';
  src: url('../css/font/OpenSans-Semibold-webfont.eot');
  src: url('../css/font/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../css/font/OpenSans-Semibold-webfont.woff') format('woff'), url('../css/font/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../css/font/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
  font-weight: 600;
  font-style: normal;

}
@font-face{
  font-family: 'Open Sans';
  src: url('../css/font/OpenSans-Bold-webfont.eot');
  src: url('../css/font/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../css/font/OpenSans-Bold-webfont.woff') format('woff'), url('../css/font/OpenSans-Bold-webfont.ttf') format('truetype'), url('../css/font/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
  font-weight: 700;
  font-style: normal;

}

As alternative you can embed font directly from Google Font Webservice :

  @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

More info:
http://www.google.com/fonts/specimen/Open+Sans
http://www.fontsquirrel.com/fonts/open-sans

Contact / Newsletter Form

Template comes with ready to use Contact Form and Newsletter Form. Before you start using it, please make sure your server:

  • uses PHP 5.2+
  • your web server (like Apache) is configured to listen on directory form

Configuration

All needed files are in /form directory.
Remember to include <script src="form/js/form.js"></script> on page.
To configure form just edit form/config.php and change e-mails to your own :

  $recipientEmail = 'recipient@mail.com';
  $recipientName = 'Recipient Name';

Success Message, Error Message can be changed in HTML (successMessage and errorMessage divs).
Form has additional option (set as data attributes):

  • data-email-subject="Contact Form" (e-mail subject)
  • data-show-errors="true" (set true to show php errors)
  • data-hide-form="false" (set to true to hide form after submit)

That's it!

Contact Form

HTML Markup:

  <div class="contactForm">
    <div class="successMessage alert alert-success alert-dismissable" style="display: none">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      Thank You! E-mail was sent.
    </div>
    <div class="errorMessage alert alert-danger alert-dismissable" 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 class="liveForm" role="form" action="form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" data-hide-form="false">
      <fieldset>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">Name <span>(Required)</span></label>
              <input type="text" required name="field[]" class="form-control">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">Email <span>(Required)</span></label>
              <input type="email" required name="field[]" class="form-control">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Subject</label>
              <input type="text" name="field[]" class="form-control">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Message <span>(Required)</span></label>
              <textarea name="field[]" required class="form-control" rows="5"></textarea>
            </div>
          </div>
        </div>
        <input type="submit" class="btn btn-primary" value="Send Message">
      </fieldset>
    </form>
  </div>

How to add more fields to form ?

Just add another form-group section,
for example :

  <div class="form-group">
    <label for="field4">Phone</label>
    <input type="text" required name="field[]" class="form-control" id="field4" >
  </div>
  

How to send e-mails to GMAIL account ?

Just go to /form/config.php and uncommented all section (then provide yout SMTP server settings) :

  /**
   * For GMAIL configuration please use this values:
   *
   * $mail->Host = "smtp.gmail.com"; // SMTP server
   * $mail->Username = "mail@gmail.com"; // SMTP account username
   * $mail->Password = "yourpassword"; // SMTP account password
   * $mail->Port = 465; // set the SMTP port for the GMAIL server
   * $mail->SMTPSecure = "ssl";
   *
   * More configuration options available here: https://code.google.com/a/apache-extras.org/p/phpmailer/wiki/ExamplesPage
   */

  /**
   * SERVER CONFIG
   */

  /**
   * Config for SMTP server - uncomment if you don't want to use PHP mail() function
   **/

  /**
   * $mail->Host = "mail.yourdomain.com."; // sets the SMTP server
   * $mail->Username = "username"; // SMTP account username
   * $mail->Password = "password"; // SMTP account password
   * $mail->SMTPAuth = true; // enable SMTP authentication - true if username and password required
   * $mail->Port = 587; // set the SMTP port (usually 587, or 465 when SSL)
   * $mail->IsSMTP(); uncomment it to enable smtp
   * $mail->SMTPDebug = $debug ? 2 : 0; // debug messages - set debug to false on production!
   */
  

Newsletter Form

HTML Markup:

  <div class="newsletterForm">
    <div class="successMessage alert alert-success alert-dismissable" style="display: none">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      Thank You! E-mail was sent.
    </div>
    <div class="errorMessage alert alert-danger alert-dismissable" 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 class="liveForm" role="form" action="form/send.php" method="post" data-email-subject="Newsletter Form" data-show-errors="true" data-hide-form="true">
      <fieldset>
        <article class="table-content animated" data-fx="flipInY">
          <section class="table-row">
            <div class="table-cell">
              <h1 class="widget-title">Get the newsletter</h1>
            </div>
            <div class="table-cell">
              <label class="sr-only">Your e-mail address</label>
              <input type="email" name="field[]" class="form-control" placeholder="Your email address">
            </div>
            <div class="table-cell">
              <input type="submit" class="btn btn-primary" value="Subscribe">
            </div>
          </section>
        </article>
      </fieldset>
    </form>
  </div>

Options (can be changed in HTML) :

  • Success Message - div with class "successMessage"
  • Error Message - div with class "errorMessage"
  • data-email-subject="Contact Form" (e-mail subject)
  • data-show-errors="true" (set true to show php errors)
  • data-hide-form="false" (set to true to hide form after submit)

Twitter settings

Twitter Feed requires web server (like Apache) with PHP.
All Twitter Feed files are placed in /twitter directory
Remember to include file /twitter/js/jquery.tweet.js at the page.
Tweets are fetched to div using javascript automatically.


New Twitter API requires authentication to display tweets from your account.
To make Twitter 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 : http://vimeo.com/60891535

Configuration is placed in /twitter/config.php
here you have to set 4 generated keys and twitter account username:

$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',
);

HTML Markup (standard tweet list):

  • data-limit - how many tweets you want to display
  <div class="tweets_display" data-limit="1"></div>


Sources and Credits

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



Once again, thank you so much for purchasing this theme. If you have any questions, feel free to email me via my user page contact form.