Metal 1.2

Mobile Friendly Building & Construction Business Template

• Theme version: 1.2
• Latest update: 11/06/2015
  
  
• Document created: 13/05/2015
• Latest Document updated: 11/06/2015
• by: Zozo Themes
• Email: support@zozothemes.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form or to our Support Center

Use Firebug or Chrome Developer Tools.

Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

Getting an error message? Someone might have seen it too, try a google search for a quick fix.

Explore the live demo for pages ideas and sample code.

- api (Twitter API functions)

- css (Template CSS)

- fonts (Font Faces, Font Awesome, etc..) 

- img (All Images)

- js (Template JS)
	
- php (PHP Helpers - I.E: Contact Us form, Mailchimp Form.)

- rs-plugin (Revolution Slider Bundle.)

- Video (Self Hosted mp4 video.)

The template is based on Bootstrap 3 Framework - http://getbootstrap.com

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
 

Basic HTML Markup

<div class="row">
    <div class="col-md-12">
        Level 1 column
        <div class="row">
            <div class="col-md-6">Level 2</div>
            <div class="col-md-6">Level 2</div>
        </div>
    </div>
</div>

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:

- css/bootstrap.min.css 		- ( Bootstrap Grid & Layout Styles )

- css/font-awesome.min.css 		- ( Font Awesome Icon Styles )

- css/style.css 			- ( Contains Theme styles )

- css/responsive.css 			- ( Responsive styles - This stylesheet contains responsive rules for adapting the template to any resolution, 
									
from desktop to small mobile. )

- css/icons.css 			- ( Collection of social icons... )

- css/hover-dropdown-menu.css   	- ( Menu DropDown Stylings)

- css/revolution-slider.css 		- ( Revolution Slider Stylings )

- css/fancySelect.css 		    	- ( Dropdown css for landing page )

- css/animate.min.css 			- ( Contains Animation Effects )

- css/prettyPhoto.css 			- ( Contains Lightbox Stylings )

- css/color.css 			- ( Contains Page Backgrounds and Other Stylings for Pages )

- css/owl/owl.carousel.css 		- ( Contains slider Stylings )

- css/owl/owl.theme.css 		- ( Contains general Stylings )

- css/owl/owl.transitions.css 		- ( Transitions Color Styles... )

To link any .css files, save it in "css" folder and link in head like this

 <link href="css/your-file.css" rel="stylesheet" type="text/css"> 

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/

The initialization of the elements, libs and features is made by the file main.js, in the JS folder.

- js/jquery.min.js 				- ( Jquery Library )

- js/bootstrap.min.js 				- ( Contains Bootstrap Elements Scripts )

- js/bootstrapValidator.min.js 			- ( Contains Bootstrap form validations )

- js/charts.js 					- ( Contains Chart Scripts )

- js/countdown.js				- ( Contains fun factor counter script )

- js/countdown.js				- ( Contains fun factor counter script )

- js/jquery.appear.js 				- ( Contains Scripts to view elements with animated when an element becomes visible in browser viewport )

- js/jquery.easing.1.3.js 			- ( Contains Smooth Effects Scripts )

- js/isotope.min.js 				- ( Contains Isotope Grid Scripts ( Portfolio & Blog Used ) )

- js/SmoothScroll.js 				- ( Contains Smoothscroll Effects Scripts )

- js/jquery.sticky.js 				- ( Contains Sticky Menu )

- js/jquery.mixitup.min.js 			- ( Contains Animations )

- rs-plugin/js/jquery.themepunch.tools.min.js, 
rs-plugin/js/jquery.themepunch.revolution.min.js
js/revolution-custom.js 			- ( Contains Revolution Slider Scripts )

- js/tweet/carousel.js
js/tweet/scripts.js
js/tweet/tweetie.min.js 			- ( Contains Twitter Feed Slider Scripts )

- js/jquery.prettyPhoto.js 			- ( Contains Lightbox Scripts )

- js/price-filter.js				- ( Price Filter Script )

- js/owl.carousel.min.js			- ( OWL carousel slider Script )

- js/jquery.superslides.js			- ( Super Slider Script )

- js/jquery.mixitup.min.js			- ( Portfolio Filter Script )

- js/hover-dropdown-menu.js			- ( Menu jQuery Script )

- js/jquery.hover-dropdown-menu-addon.js	- ( Menu jQuery Bootstrap Addon Script )

- js/jquery.countTo.js 				- ( Contains Number Counting Scritps )

- js/jquery.parallax-1.1.3.js 			- ( Contains Parallax Background Scritps )

- js/jquery.mb.YTPlayer.js        		- ( Contains Background Video Scritp )

- js/custom.js 					- ( Contains all theme Elements and Features Initialization & Customized Scripts )

To link any .js files, save it in "js" folder and link before </body> tag like this

 <script href="js/your-file.js" type="text/javascript"> 

Colors

The style generator was made to support unlimited skin colors, for that we use Color Generator to process the CSS dynamically with any color and you can implement easily.
After you done customizing your color skin you may want to grab the generated code and save it as a file and replace old one in the folder: /css/customizer/home-pages-customizer.css
 

Layout Style

The template has two different layout modes, Fullwidth, Wide and Boxed.

The fullwidth one is the default option, if you want to use the Boxed version, add the following class in the <body>:

<body class="boxed">

The fullwidth one is the default option, if you want to use the Wide version, add the following class in the <body>:

<body class="wide">

You can also customize the background color or image.
 

Fonts

To change the embedded font, please take a look in the head part of the website and you will find this tag:

 <link href="http://fonts.googleapis.com/css?family=Arimo:300,400,700,400italic,700italic" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css">

To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.

Font Awesome Icons

Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.

If you need more information, please visit this site: http://fontawesome.io/

HTML Markup:

<i class="fa fa-edit"></i>
<i class="fa fa-search"></i>
...

Icomoon

Icomoon icon library features only the very best icon sets out there. All of our icons are designed on a precise pixel grid.

If you need more information, please visit this site: https://icomoon.io

Here have full list of Icomoon Icons: Icomoon Icons List

My Icons

We have collection of @font-face iconset that you can change size and color of the icons using CSS.

Here have full list of MyIcons: MyIcons List

HTML Markup:

<i class="fa myicon-eye"></i>
<i class="fa myicon-toggle"></i>
...

Home Page Sliders

    
Revolution Slider

This is one of the best slider plugins we have seen so far.

"Slider Revolution is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. On top of that, Slider Revolution is fully responsive and mobile optimized and can take on any dimensions."

More details on http://themes.themepunch.com/?theme=revolution_jq

Content Sliders

Owl Carousel Slider is the slider you'll find in the content.
Owl Carousel Slider is a Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. You can find more documentaion here http://owlgraphic.com/owlcarousel/

The variations of the slider is defined by data-effect attribute, which extends the default plugin options.

HTML Markup:

<div class="owl-carousel custom-styles" data-effect="fade" data-autoplay="4000">
    <div class="item">        
    	...       
    </div>
</div>

data-effect: Animation Effect for Slides ( Values: backSlide, fade, fadeUp, goDown )

data-autoplay: Autoplay of Slides ( Values: 4000 or true or false )

Typed Text is the slider you'll find in the content.
Typed Text is a simple animated Typing effects. You can find more documentaion here http://www.mattboldt.com/demos/typed-js/

HTML Markup:

<span class="element" data-elements="Great Way to Present your App, Premium HTML5 Template, Powerful Bootstrap Theme Forever"></span>

The filter is driven by PrettyPhoto script.

For more information check the documentation.

Prettyphoto

The filter is driven by the Isotope script - http://isotope.metafizzy.co/

Here's an example of usage:

Filter Options:

<ul class="prettyprint lang-html linenums">
    <li><a href="#" data-filter="all" class="filter active">All Works</a></li>
    <li><a href="#" data-filter=".web-design">Web Design</a></li>
    <li><a href="#" data-filter=".graphic-design">Graphic Design</a></li>
    <li><a href="#" data-filter=".ecommerce">eCommerce</a></li>
</ul>

Filter Data:

<div id="mix-container" class="portfolio-grid">
               
<!-- Item 1 -->
              
<div class="grids col-xs-12 col-sm-4 col-md-3 mix all web" style="display: inline-block;">
     
<div class="grid">
                        
<img src="img/sections/portfolio/1.jpg" width="400" height="273" alt="Recent Work" class="img-responsive">
 
<div class="figcaption">
 
<div class="caption-block">
   
<h4>Name Of Work</h4>
           
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  
</div>
            
<!-- Image Popup-->
          
<a href="img/sections/portfolio/1.jpg" data-rel="prettyPhoto[portfolio]">
  
<i class="fa fa-search"></i>
         
</a> 
                
<a href="portfolio-single.html">
       
<i class="fa fa-link"></i>
              
</a></div>
              
</div>
       
</div>
      
<!-- Item 1 Ends-->
     
.....
		

	</div>

</div>

Contact Form

Regarding contact form as main part of Contact Us section, only thing you need to do is to setup your email address.
To do this, please open "php/form.php" file and change this line:

$to = 'support@zozothemes.com';

Mailchimp Subscription

Once you have the MailChimp account you have to configure the subscription file with your APIKey and ListID.
To do this, please open "php/subscription.php" file and change the variables:

Get Mailchimp API key - http://kb.mailchimp.com/article/where-can-i-find-my-api-key
Get your Mailchimp LIST ID - http://kb.mailchimp.com/article/how-can-i-find-my-list-id

$api = new MCAPI('your_api_key');
$list_id = "your_list_id";

One notice: this will be functional only on your server, php file can not be executed on your local computer.

We have most social media icons with the template: Social Icons List

Check Brand Icons section

To add new social links, change coding like this:

<span class="pe-so-yahoo-2"></span>

Replace "#" and add your social page link.

Twitter API v1 is now deprecated (https://dev.twitter.com/blog/api-v1-is-retired), so here's what you need to do to update your website. - Now Twitter feed needs to authenticate with Twitter OAuth, API V1.1. Step 1 – Setup a Twitter Application
 

• -Visit https://dev.twitter.com/apps/ and sign in using your Twitter username and password. This doesn’t have to be the username or password of the stream you need access to, just a Twitter account you control.
• -Select ‘Create new application’ and enter the application details.
  • -The name and description can be anything you like really, but you can’t use ‘Twitter’ in the name.
  • -The website field can be your main website and doesn’t have to be the site where your Twitter feed or feeds are located.
  • -Callback URL can be left blank
• -Enter the CAPTCHA info and click create
• -On the next details screen, click ‘create my access token’. You may need to refresh the page after a few seconds if it doesn’t appear automatically.
• -Make a note of the Consumer key, Consumer secret, Access token and Access token secret as highlighted below.

 

 
Step 2 – PHP Configuration Open up the file api/config.php and go ahead substituting the keys( CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_SECRET ).

To add Map into your section, get Latitude and Longtitude for your address and replace in data attributes
 

<div style="height: 376px; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);" 
class="map-canvas"
data-zoom="12" 
data-lat="-35.2835" 
data-lng="149.128" 
data-title="Autin" 
data-type="roadmap" 
data-hue="#ffc400" 
data-content="Company Name<br> Contact: +012 (345) 6789<br> info@youremail.com">
</div>

Add your latitude in data-lat and longtitude in data-lng and add your popup content in data-content.

Once you have the Flickr, PInterest, Instagram, Dribbble, Picasa, Youtube account you have to configure your username with js/custom.js file.
To do this, please open "js/custom.js" file and change the variables in function socialstream() from line number: 490

Flickr

$('.flickr-feed').socialstream({
	socialnetwork: 'flickr',
	limit: 12,
	username: 'your-username'
})

Pinterest

$('.pinterest-feed').socialstream({
	socialnetwork: 'pinterest',
	limit: 12,
	username: 'your-username'
})

Instagram

$('.instagram-feed').socialstream({
	socialnetwork: 'instagram',
	limit: 12,
	username: 'your-username'
})

Dribbble

$('.dribbble-feed').socialstream({
	socialnetwork: 'dribbble',
	limit: 12,
	username: 'your-username'
})

Picasa

$('.picasa-feed').socialstream({
	socialnetwork: 'picasa',
	limit: 12,
	username: 'your-username'
})

Youtube

$('.youtube-feed').socialstream({
	socialnetwork: 'dribbble',
	limit: 12,
	username: 'your-username'
})

You can add some Animations / Transitions to the elements which fires when an element scrolls into view, it's pretty simple to use and you can add it in any element.
 

Usage:

<div data-animation="bounceIn" data-animation-delay="200">
    ...
</div>

Heads up: The Attribute data-appear-animation-delay is Optional and is set in Miliseconds.

The animation can be set to:

• flash
• shake
• bounce
• tada
• swing
• wobble
• wiggle
• pulse
• fadeIn
• fadeInUp
• fadeInDown
• fadeInLeft
• fadeInRight
• fadeInUpBig
• fadeInDownBig
• fadeInLeftBig
• fadeInRightBig
• bounceIn
• bounceInUp
• bounceInDown
• bounceInLeft
• bounceInRight
• rotateIn
• rotateInUpLeft
• rotateInDownLeft
• rotateInUpRight
• rotateInDownRight

To remove animation from an element, just remove data-appear-animation and data-appear-animation-delay attributes.

The images included in preview are for demonstration purposes and should always be replaced with your own work.

Images: http://depositphotos.com/
Fonts:
    Google Fonts - http://www.google.com/webfonts
    Icons Font-face - http://fontawesome.io/, https://icomoon.io/, http://livicons.com/

Scripts:
    jQuery - http://www.jquery.com/
    Bootstrap 3 - http://getbootstrap.com/
    Revolution Slider - http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
    Isotope Jquery plugin - http://isotope.metafizzy.co
    Modernizr - http://modernizr.com/
    Owl Carousel - http://owlgraphic.com/owlcarousel
    Jquery Easing - http://gsgd.co.uk/sandbox/jquery/easing/
    PrettyPhoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
    Stellar.JS- http://markdalgleish.com/projects/stellar.js/
    Jquery Appear - https://github.com/bas2k/jquery.appear/

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions.

Zozo Themes