Installation

Follow the steps below to get started with your Site Template:

Open the Package/HTML Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- HTML/css - Extra Stylesheets Folder
- HTML/include - Required PHP Functions Folder
- HTML/images - Images Folder
- HTML/js - Javacripts Folder
- HTML/style.css - Main Stylesheet File
- HTML/index.html - Index File/Homepage
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Canvas follows a simple coding structure. here is the sample:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

	<!-- Your Stylesheets, Scripts & Title
	============================================= -->
	...

</head>
<body>

	<!-- The Main Wrapper
	============================================= -->
	<div id="wrapper" class="clearfix">

		<!-- Header
		============================================= -->
		<header id="header">

			...

		</header>

		<!-- Site Content
		============================================= -->
		<section id="content">

			<div class="content-wrap">

				<div class="container clearfix">

					...

				</div>

			</div>

		</section>

		<!-- Footer
		============================================= -->
		<footer id="footer" class="dark">

			<div class="container">

				...

			</div>

			<!-- Copyrights
			============================================= -->
			<div id="copyrights">

				<div class="container clearfix">

					...

				</div>

			</div>

		</footer>

	</div>

</body>
</html>

Layout Settings

This Theme Supports both Boxed & Wide Layouts. Adding the class .stretched to the <body> will turn your website into a Wide Layout:

<body class="stretched">

Smooth Scrolling

Canvas enables Smooth Scrolling on Windows Desktop PCs for a Smooth Experience. You can disable it by simply adding the .no-smooth-scroll Class to the <body> Tag.

Favicons & Apple Touch Icons

You can add a Favicon to your Website using the following code:

<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">

You can add Apple Touch Icons to your Website using the following code:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable the Transition, you can simply add .no-transition Class to the <body> Tag.

<body class="no-transition">

You can customize the Transitions of your Pages Load using the following attributes:

data-animation-in - The Animation style on Page Load. Eg. fadeIn
data-animation-out - The Animation style on Page Out. Eg. fadeOut
data-speed-in - The Speed of the Animation in milliseconds on Page Load. Eg. 1500
data-speed-out - The Speed of the Animation in milliseconds on Page Out. Eg. 800
data-loader - Loading Styles of the Animation. Eg. 2. Choose from 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 and 14
data-loader-color - Any HEX Color for the Loader. Eg. #FF0000
data-loader-timeout - Add a TimeOut in milliseconds to end the Page Preloader immaturely. Eg. 4000
data-loader-html - Add Custom HTML Code for your Loader.

<body data-loader="2" data-animation-in="fadeIn" data-speed-in="1500" data-animation-out="fadeOut" data-speed-out="800">

Logo Settings

The Logo Container can be found in the Header Container - #header

<div id="logo">
	<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
</div>

Note The Logo Image's maximum height can be 100px. Also make sure you also add the Dark Logo which provides even more intuitiveness when you switch between Light/Dark Scheme. However, it is optional.

Retina Logo

If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo. Use the code mentioned below instead of the above code:

<div id="logo">
	<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
	<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo"></a>
</div>

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the HEX Color Code in the css/colors.css file & you are good to go. Follow these quick steps to get going:

Make sure you add the css/colors.css stylesheet in your head after the responsive stylesheets.

<head>

	...

	<link rel="stylesheet" href="css/responsive.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

	<!-- Here goes your colors.css
	============================================= -->
	<link rel="stylesheet" href="css/colors.css" type="text/css" />

	...

</head>

Now simply change the HEX Codes according to your requirements.

Dark Scheme

You can also completely change the Contrast of the Website to Dark, simply by adding the .dark Class to the body Tag. You can also add the .dark Class to certain elements like #header, #primary-menu, .section, Slides, #footer & many other elements. This will help you experimenting with different color schemes. The .dark Class will also be very helpful for turning the Texts of a container to light color.

Changing Fonts

Change your Fonts on the Fly as we have included a css/fonts.css file to manage the custom fonts you include with ease. By default, Canvas uses 3 Fonts namely: Raleway, Lato & Crete Round from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.

<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

You can now be able to change the Font Names in the css/fonts.css File.

Theme Customization

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations while updating Canvas to the Latest Version. Simply add all your Custom CSS Codes in the css/custom.css File and link it in the Document <head> after the css/responsive.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

Example:

<head>

	...

	<link rel="stylesheet" href="css/responsive.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

	<!-- Here goes your custom.css
	============================================= -->
	<link rel="stylesheet" href="css/custom.css" type="text/css" />

</head>

Setting up RTL

We have included all the Tools to make your Website completely RTL ready. Simply follow the steps below:

Add the dir="rtl" to the <html> Tag. Example:
```
<html dir="rtl" lang="ar">
```

Add the RTL related CSS in the Document <head>. Example:

<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="SemiColonWeb" />

	<!-- Stylesheets
	============================================= -->
	<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="css/bootstrap-rtl.css" type="text/css" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="style-rtl.css" type="text/css" />
	<link rel="stylesheet" href="css/dark.css" type="text/css" />
	<link rel="stylesheet" href="css/dark-rtl.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons-rtl.css" type="text/css" />
	<link rel="stylesheet" href="css/animate.css" type="text/css" />
	<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

	<link rel="stylesheet" href="css/responsive.css" type="text/css" />
	<link rel="stylesheet" href="css/responsive-rtl.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

	<!-- Document Title
	============================================= -->
	<title>Page | Canvas</title>

</head>

Add the .rtl Class to the <body> Tag. Example:
```
<body class="stretched rtl">
```

Setting up LESS CSS

Step 1:

Change all the following CSS Linking in your <head> Tag:

1. <link rel="stylesheet" href="style.css" type="text/css" />
2. <link rel="stylesheet" href="css/dark.css" type="text/css" />
3. <link rel="stylesheet" href="css/responsive.css" type="text/css" />

To their respective LESS Linking:

1. <link rel="stylesheet/less" href="style.less" type="text/less" />
2. <link rel="stylesheet/less" href="less/dark.less" type="text/less" />
3. <link rel="stylesheet/less" href="less/responsive.less" type="text/less" />

Step 2:

Add the LESS Script just after the js/plugins.js Script Linking in your <head> Tag:
```
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
```
Step 3:

Open the less/variables.less and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the less Folder. It is completely at your discretion only to include the Required LESS Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your style.less File.

Note: LESS will work perfectly fine after compiling, but it can still be extended more. If you have any Suggestions to Improve or Requests to Add New Features to the LESS Files, then please Contact Us from Here.

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

gZip Compression & Browser Caching

This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.

gZip Compression & Browser Caching can be enabled using the .htaccess File on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server.
Image Compression & Optimization

We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:
- Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
- Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
- Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
  For MAC use ImageOptim
  For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
CSS & jQuery Minifications

It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
For CSS use CSS Minifier and For Javascript use Javascript Minifier.
Content Delivery Network

You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.
Fast Web Hosting Servers

A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

Upgrading Canvas: v3.x to v4.0

Canvas v4.0 is a Big Update and requires Changes to the CSS, JS, PHP and HTML Files. We have dramatically Improved Performance in this Version and making some changes were really necessary in order to Increase Flexibility and Stability. We have actually decreased the Size of the CSS Files to some extent without compromising on the Designs and Layouts allowing you more control on the Type of Content you want to Create with Canvas. We definitely understand that Upgrading Canvas from v3.x to v4.0 can be quite a task because of the Multipurpose Nature of Canvas and so we have included the Archived Version of Canvas v3.1.1 in the Package if in any case somethign goes wrong so that you can Rollback. The Full List of Changes are mentioned below:

Note: Always make sure that you have a Complete Backup of your Website before starting to Upgrade Canvas so that you Content is Safe and can be rolled back in case of any issues with Canvas 4.

CSS Files:

#primary-menu

We have updated the Primary Menu and Mega Menus to ensure more Flexibility and Less Code. The Mega Menus now uses the Bootstrap Grid allowing to create Mixed Columns and Widgets. It is recommended that you change the Entire Primary Menu related Code Blocks. If you have made any changes to the Original Code then keep a Backup of the Old Code and change the Codes accordingly comparing the New Codes.
Files Affected: style.css, css/responsive.css, css/dark.css, css/colors.css, css/colors.php
#page-menu

We have updated the Page Menu Codes to handle the Dots Menu more efficiently on Responsive Devices. It is recommended that you change the Entire Page Menu related Code Blocks.
Files Affected: style.css, css/responsive.css, css/dark.css, css/colors.css, css/colors.php
.slider-parallax

We have updated the Slider Parallax Codes to address the flickr issue on Mac OS. It is recommended that you change the Entire Slider Parallax related Code Blocks.
Files Affected: style.css, css/responsive.css
Swiper Slider Base CSS

We have removed the Swiper Slider Base CSS Codes and moved it to a Separate CSS File named css/swiper.css for better handling of Swiper Plugin Updates. It is recommended that you remove this entire Code Blocks. Search for the following code in the style.css File:
```
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}

...
```
Files Affected: style.css
#portfolio

We have updated the Entire Portfolio Code Block including the #portfolio-filter, #portfolio-shuffle and #portfolio. All the IDs has been changed to Classes to allow Unlimited Portfolio Grids and Filters on a Single Page. We have also decreased the CSS Size. It is recommended that you change the Entire Portfolio related Code Blocks.
Files Affected: style.css, css/responsive.css, css/dark.css, css/colors.css, css/colors.php
#shop

We have updated the Entire Shop & Products Code Blocks including the #shop and .product. All the IDs has been changed to Classes to allow Unlimited Shop Grids on a Single Page. We have also decreased the CSS Size. It is recommended that you change the Entire Shop related Code Blocks.
Files Affected: style.css, css/responsive.css
All other Minor Changes has been described in the Changelog Section

PHP Files:

Form Processing and Subscription Files

We have upgraded the PHP Files in the include Folder that handles the Form Email and Subscriptions to allow advanced handling of Data and better SPAM Protection. It now supports JSON Output so now the response shows Message Specific Alerts. It is recommended that you change the Form Processing and Mailchimp Subscription related Files. If you have made any changes to the Original Code then keep a Backup of the Old Code and change the Codes accordingly comparing the New Codes.
Files Affected: All PHP Files in the include Folder.

HTML Files:

JS Files Linking moved to Footer

Keeping performance in mind and Page Loading Speed, we have moved all the JS File Linking to the Footer of the HTML Files just before the js/functions.js linking. This helps in better Page Speed Performance and preventing in Render-Blocking Javascripts. Additionally, do make sure that now all the Inline JS Scripts used for JS Plugin Initialization have to be moved at the bottom too just after the js/functions.js linking.
Files Affected: All HTML Files.

Example:
Mega Menu Content

Mega Menu is now more Flexible than ever before as you can now add Widgets and use Mixed Width Columns powered by the Bootstrap Grid inside the Mega Menu Content.
Files Affected: All HTML Files with Mega Menu.

Example:
Slider Parallax

We have fixed the issue with the Shaky and Flickering Slider Parallax on Safari on Mac OS. In order to fix this we will have to wrap the Slider Content inside another Container .slider-parallax-inner which has Fixed Position and thus this fixes the Flicker. However, currently not all the Headers & Sliders are supported due to the Fixed Position nature of the .slider-parallax-inner Container. It is best supported with Canvas Slider Templates at the moment.
Files Affected: Slider Templates with Transparent Header and Headers without Top Bars. Additionally, Headers with .sticky-style-2 Class is not supported.

Example:
Canvas/Swiper Slider

You will now need to add css/swiper.css in the Document <head> on all the Pages with Canvas/Swiper Slider. Also, the Canvas/Swiper Slider Javascript Initialization Code is not required anymore on the Page since it gets initialized using a Global Function. Please check the Slider > Canvas Slider Section for Full Documeentation.
Files Affected: All HTML Files with Canvas/Swiper Slider.

`Page Menu`

We have updated the Page Menu Link Item Markup slightly to handle the Dots Menu more efficiently on Responsive Devices. All the Link Item Texts inside the Page Menu are now enclosed inside a <div>.
Files Affected: All the HTML Pages with #page-menu.

Before:

<!-- Page Sub Menu
============================================= -->
<div id="page-menu">

	<div id="page-menu-wrap">

		<div class="container clearfix">

			<div class="menu-title">Explore <span>CANVAS</span></div>

			<nav>
				<ul>
					<li class="current"><a href="#">Gallery</a></li>
					<li><a href="#">Features</a></li>
					<li><a href="#">Models</a>
						<ul>
							<li><a href="#">Small Size</a></li>
							<li><a href="#">Normal Size</a></li>
							<li><a href="#">Large Size</a></li>
						</ul>
					</li>
					<li><a href="#">Reviews</a>
						<ul>
							<li><a href="#">Expert Reviews</a></li>
							<li><a href="#">User Reviews</a></li>
						</ul>
					</li>
					<li><a href="#">Compare</a></li>
					<li><a href="#">Build</a></li>
					<li><a href="#">Order</a></li>
				</ul>
			</nav>

		<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>

		</div>

	</div>

</div><!-- #page-menu end -->

After:

<!-- Page Sub Menu
============================================= -->
<div id="page-menu">

	<div id="page-menu-wrap">

		<div class="container clearfix">

			<div class="menu-title">Explore <span>CANVAS</span></div>

			<nav>
				<ul>
					<li class="current"><a href="#"><div>Gallery</div></a></li>
					<li><a href="#"><div>Features</div></a></li>
					<li><a href="#"><div>Models</div></a>
						<ul>
							<li><a href="#"><div>Small Size</div></a></li>
							<li><a href="#"><div>Normal Size</div></a></li>
							<li><a href="#"><div>Large Size</div></a></li>
						</ul>
					</li>
					<li><a href="#"><div>Reviews</div></a>
						<ul>
							<li><a href="#"><div>Expert Reviews</div></a></li>
							<li><a href="#"><div>User Reviews</div></a></li>
						</ul>
					</li>
					<li><a href="#"><div>Compare</div></a></li>
					<li><a href="#"><div>Build</div></a></li>
					<li><a href="#"><div>Order</div></a></li>
				</ul>
			</nav>

		<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>

		</div>

	</div>

</div><!-- #page-menu end -->

Isotope Grids

To simplify things and to initilaize the Isotope on any Grid, you will simply need to add the .grid-container Class to the Container. So, the Isotope Javascript Initialization Code is not required anymore on the Page.
Files Affected: All HTML Files with a Masonry Grid.

Additional Options:
- data-transition - Transition Speed of the Isotope Grid in seconds. Eg. 0.65
- data-layout - Layout of the Isotope Grid. Eg. masonry . More Layout Options
Portfolio

Portfolio Grid now needs the .portfolio Class which allows Unlimited Portfolio Grids on a Single Page. To initilaize the Isotope on the Portfolio Grid, you will simply need to add the .grid-container Class to the .portfolio Container. So, the Isotope Javascript Initialization Code is not required anymore on the Page.
Files Affected: All HTML Files with Portfolio Grid.

Before:
```
<div id="portfolio" class="clearfix">
```
After:
```
<div id="portfolio" class="portfolio grid-container clearfix">
```
Portfolio Filter

Portfolio Filter now needs the .portfolio-filter Class which allows Unlimited Portfolio Filters on a Single Page. To activate the Filter on a Portfolio Grid, you will simply need to add the data-container="#portfolio" Attribute to the .portfolio-filter Element. So, the Isotope Filter Javascript Code is not required anymore on the Page.
Files Affected: All HTML Files with Portfolio Filter.

Example:
```
<ul class="portfolio-filter clearfix" data-container="#portfolio">
```
Portfolio Shuffle

Portfolio Shuffle now needs the .portfolio-shuffle Class which allows Unlimited Portfolio Shuffles on a Single Page. To activate the Shuffle Functionality on a Portfolio Grid, you will simply need to add the data-container="#portfolio" Attribute to the .portfolio-shuffle Element. So, the Isotope Shuffle Javascript Code is not required anymore on the Page.
Files Affected: All HTML Files with Portfolio Shuffle.

Example:
```
<div class="portfolio-shuffle" data-container="#portfolio">
```
Shop

Shop Grid now needs the .shop Class which allows Unlimited Shop Grids on a Single Page. To initilaize the Isotope on the Shop Grid, you will simply need to add the .grid-container Class to the .shop Container. So, the Isotope Javascript Initialization Code is not required on the Page.
Files Affected: All HTML Files with Shop Grid.

Before:
```
<div id="shop" class="clearfix">
```
After:
```
<div id="shop" class="shop grid-container clearfix" data-layout="fitRows">
```
Blog Grid

To initilaize the Isotope on the Blog Grid, you will simply need to add the .grid-container Class to the #posts Container. So, the Isotope Javascript Initialization Code is not required anymore on the Page.
Files Affected: All HTML Files with Blog Grid.

Before:
```
<div id="posts" class="post-grid clearfix">
```
After:
```
<div id="posts" class="post-grid grid-container clearfix" data-layout="fitRows">
```
Blog Masonry Grid

To initilaize the Isotope on the Blog Masonry Grid, you will simply need to add the .grid-container Class to the #posts Container. So, the Isotope Javascript Initialization Code is not required anymore on the Page.
Files Affected: All HTML Files with Blog Masonry Grid.

Before:
```
<div id="posts" class="post-grid post-masonry clearfix">
```
After:
```
<div id="posts" class="post-grid post-masonry grid-container clearfix">
```
Contact Forms

Contact Form markup has been changed slightly to allow unlimited Contact Forms on a Single Page without the hassle of Adding Additional JS Codes for each Contact Form. The Entire Contact Form is now enclosed within the .contact-widget Container and the Contact Form Results container has been replaced.

Before:
```
<div id="contact-form-result" data-notify-type="success" data-notify-msg="<i class=icon-ok-sign></i> Message Sent Successfully!"></div>
```
After:
```
<div class="contact-form-result"></div>
```
The Contact Form Javascript Initialization Code is not required anymore on the Page.
Files Affected: All HTML Files with Contact Forms.
Quick Contact Forms

Quick Contact Form markup has been changed slightly to allow unlimited Quick Contact Forms on a Single Page without the hassle of Adding Additional JS Codes for each Quick Contact Form. The Quick Contact Form Results container has been replaced.

Before:
```
<div id="quick-contact-form-result" data-notify-type="success" data-notify-msg="<i class=icon-ok-sign></i> Message Sent Successfully!"></div>
```
After:
```
<div class="quick-contact-form-result"></div>
```
The Quick Contact Form Javascript Initialization Code is not required anymore on the Page.
Files Affected: All HTML Files with Quick Contact Forms.
Subscription Forms

Subscription Form markup has been changed slightly to allow unlimited Subscription Forms on a Single Page without the hassle of Adding Additional JS Codes for each Subscription Form. The Subscription Form Results container has been replaced.

Before:
```
<div id="widget-subscribe-form-result" data-notify-type="success" data-notify-msg=""></div>
```
After:
```
<div class="widget-subscribe-form-result"></div>
```
The Subscription Form Javascript Initialization Code is not required anymore on the Page.
Files Affected: All HTML Files with Subscription Forms.
Canvas Slider Javascript

Canvas Slider Initialization Javascript is no Longer required on the Page, so please remove it. To initilaize the Canvas Slider please refer to the Documentation > Sliders > Canvas Slider Section.
Files Affected: All HTML Files with Canvas Slider.
Owl Carousel Javascript

Owl Carousel Initialization Javascript is no Longer required on the Page, so please remove it. To initilaize the Owl Carousel please refer to the Documentation > Shortcodes > Owl Carousel Section.
Files Affected: All HTML Files with Owl Carousel.

Header Types

You can choose between 7 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element will activate the Header Type. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class	Features	Code Example
`Default`	Default Header with a White Background & Dark text.	<header id="header"> ... </header>
`.dark`	Header with a Dark Background & Light text.	<header id="header" class="dark"> ... </header>
`.transparent-header`	Header with a Transparent Background. This header is effective for showing Sliders or other types of Hero Images on the Top with a Transparent Logo & Menu. You can add the `dark` class for a Light Colored Text.	<header id="header" class="transparent-header"> ... </header>
`.semi-transparent`	Header with a Semi Transparent Background. You can add the `dark` class for a Light Colored Text & a Dark Background.	<header id="header" class="transparent-header semi-transparent"> ... </header>
`.floating-header`	This activates the Floating Header. You can add the `dark` class for a Light Colored Text & a Dark Background.	<header id="header" class="transparent-header floating-header"> ... </header>
`.side-header`	This is a Side Header Left Aligned. Unlike the above Headers, this class should be added to the `body`.	<body class="stretched side-header"> <header id="header"> ... </header> ... </body>
`.open-header`	This is a Side Header Left Aligned which is hidden by default & opens via a Trigger. Unlike the above Headers, this class should be added to the `body`. This class can only be used for the Side Headers. If you want to close the Side Header on scrolling, please add the `.close-header-on-scroll` class to the `body` tag.	<body class="stretched side-header open-header"> <header id="header"> ... </header> ... </body>
`.push-wrapper`	This is a Side Header Left Aligned which is hidden by default & opens via a Trigger. When the Header opens, it also pushes the wrapper to the right. Unlike the above Headers, this class should be added to the `body`. This class can only be used for the Side Headers. If you want to close the Side Header on scrolling, please add the `.close-header-on-scroll` class to the `body` tag.	<body class="stretched side-header open-header push-wrapper"> <header id="header"> ... </header> ... </body>
`.side-header-right`	This is a Side Header Right Aligned. Unlike the above Headers, this class should be added to the `body`. You can easily add the `.open-header` & `.push-wrapper` classes to the `body` tag to make this Side Header follow the above behaviours.	<body class="stretched side-header side-header-right"> <header id="header"> ... </header> ... </body>

Mega Menu

You can use the Mega Menus using the Bootstrap Columns. Try using the Following code:

<nav id="primary-menu">
	<ul>
		<li><a href="index.html"><div>Home</div></a></li>
		<li class="mega-menu"><a href="link.html"><div>Mega Menu</div></a>
			<div class="mega-menu-content style-2 clearfix">
				<ul class="mega-menu-column col-md-3">
					...
				</ul>
				<ul class="mega-menu-column col-md-3">
					...
				</ul>
				<ul class="mega-menu-column col-md-3">
					...
				</ul>
				<ul class="mega-menu-column col-md-3">
					...
				</ul>
			</div>
		</li>
	</ul>
</nav>

Note: Currently only .col-lg-* and .col-md-* are supported.

Widgets in Mega Menu

You can now add some Selected Widgets in Mega Menu. Try using the Following code:

<ul class="mega-menu-column col-md-3">
	<li>
		<div class="widget clearfix">

			<h4>Our Location</h4>

			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d201717.45988409253!2d144.81557611671303!3d-37.81732634202082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4c2b349649%3A0xb6899234e561db11!2sEnvato!5e0!3m2!1sen!2sin!4v1456564509271" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>

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

Note: Widgets/Shortcodes that run on Javascript are not supported except those provided in the mega-menu.html Template. We will continue adding support for more widgets in the Future Versions.

Menu Styles

You can use from a variety of 8 Menu Styles.

Style Class	Description	Code Example
`Default`	Default Menu Style which aligns to the right.	<nav id="primary-menu"> ... </nav>
`.style-2`	Menu aligns beside the Logo.	<nav id="primary-menu" class="style-2"> ... </nav>
`.style-2`	Menu aligns below the Logo Area.	<header id="header" class="sticky-style-2"> ... <div id="header-wrap"> <nav id="primary-menu" class="style-2"> ... </nav> </header-wrap> </header>
`.style-3`	Menu Items with Theme Scheme Background Colors.	<nav id="primary-menu" class="style-3"> ... </nav>
`.style-4`	Menu Items with Theme Scheme Border Colors.	<nav id="primary-menu" class="style-4"> ... </nav>
`.style-5`	Menu Items with Large Icons on top of the Menu Name.	<nav id="primary-menu" class="style-5"> ... </nav>
`.style-6`	Menu Items with a top animating border on Mouse Hover.	<nav id="primary-menu" class="style-6"> ... </nav>
`.sub-title`	Menu Items with Sub Titles.	<nav id="primary-menu" class="sub-title"> ... </nav>
`.sub-title`	Menu aligns below the Logo Area & Menu Items have Sub Titles.	<header id="header" class="sticky-style-3"> ... <div id="header-wrap"> <nav id="primary-menu" class="style-2 sub-title"> ... </nav> </header-wrap> </header>
`.with-arrows`	Menu Items with a Arrows indicating that there is a Dropdown Menu underneath.	<nav id="primary-menu" class="with-arrows"> ... </nav>

Alternate Mobile Menu

You can add an Alternate Mobile Menu to show on Mobile Devices. Simply add a New Menu Code inside the Primary Menu Navigation with the .mobile-primary-menu Class alongside the Existing Menu. Example:

<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">

	<ul>
		....
	</ul>

	<ul class="mobile-primary-menu">
		....
	</ul>

	....

Page Sub Menu

You can use an Additional Sub Menu on any Page for Intra Navigation purposes.

<div id="page-menu">

	<div id="page-menu-wrap">

		<div class="container clearfix">

			<div class="menu-title">Explore <span>CANVAS</span></div>

			<nav class="one-page-menu">
				<ul>
					<li><a href="#" data-href="#header"><div>Start</div></a></li>
					<li><a href="#" data-href="#section-about"><div>About</div></a></li>
					...
				</ul>
			</nav>

			<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>

		</div>

	</div>

</div>

Note: It is recommended that you place the Page Sub Menu code just below the Header.

Dots Sub Menu

You can use a Dots Sub Menu on any Page for Intra Navigation purposes.

<div id="page-menu" class="dots-menu">

	<div id="page-menu-wrap">

		<div class="container clearfix">

			<div class="menu-title">Explore <span>CANVAS</span></div>

			<nav>
				<ul>
					<li><a href="#" data-href="#header"></a><div class="dots-menu-caption">Home</div></li>
					<li><a href="#" data-href="#section-about"></a><div class="dots-menu-caption">About</div></li>
					...
				</ul>
			</nav>

			<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>

		</div>

	</div>

</div>

Note: It is recommended that you place the Dots Sub Menu code just below the Header.

Helper Classes

Use these handy Helper Classes with the Headers making them more flexible than you can imagine.

Helper Class	Description
`.no-sticky`	Disable Stickiness of the Header. Use it on the `header` tag.
`.static-sticky`	Disable Resizing when Headers turn Sticky. Use it on the `header` tag.
`data-sticky-class`	Use a different Header Style when it gets Sticky. This will look something like this: <header class="dark" data-sticky-class="not-dark"> You can use these classes: `.dark`, `.not-dark`, `.semi-transparent`. Remember, if you use the `.semi-transparent` Class, then you'll also need to include the `.transparent` Class.
`.not-dark`	This is a Handy Class, if you want to use Mixins. Suppose, You want to use the Dark Header Style, but dont want the Dropdown Menus to be Dark too, then you can simply add this class to the Primary Menu and you are good to go. Example: <nav id="primary-menu" class="not-dark">

Modifying Header Height

You can change the Default header height of 100px to any other Height according to your Requirements. Simply use the following CSS Codes:

#header,
#header-wrap,
#logo,
#logo img,
#primary-menu:not(.style-2),
#primary-menu:not(.style-2) > ul,
#primary-menu,
#primary-menu ul,
#primary-menu ul li a { height: 100px; }

#primary-menu ul li a { line-height: 100px; }

#primary-menu ul li i { line-height: 99px; }

#primary-menu ul ul,
#primary-menu ul li .mega-menu-content,
#primary-menu ul li.mega-menu .mega-menu-content { top: 100px; }

#primary-menu.sub-title ul li a { padding: 27px 20px 32px; }

#top-search,
#top-cart { margin: 40px 0 40px 15px; }

@media (max-width: 991px) {
	#primary-menu-trigger { top: 25px; }
	#top-search a { margin-top: 40px; }
	#top-search form { height: 100px !important; }
}

Page Titles

Class	Description	Example
`Default`	Default Page Title style with Text aligned Left & Breadcrumbs Right.	<section id="page-title"> <div class="container clearfix"> <h1>Page Title</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>
`.page-title-right`	Page Title style with Text aligned Right & Breadcrumbs Left.	<section id="page-title" class="page-title-right"> <div class="container clearfix"> <h1>Page Title Right</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>
`.page-title-center`	Page Title style with Text & Breadcrumbs aligned Center.	<section id="page-title" class="page-title-center"> <div class="container clearfix"> <h1>Page Title Center</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>
`.page-title-mini`	Page Title style with Mini Title.	<section id="page-title" class="page-title-mini"> <div class="container clearfix"> <h1>Page Title Mini</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>
`.page-title-dark`	Page Title style with Background Color Dark.	<section id="page-title" class="page-title-dark"> <div class="container clearfix"> <h1>Page Title Dark</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>
`.page-title-nobg`	Page Title style with Background Color Transparent.	<section id="page-title" class="page-title-nobg"> <div class="container clearfix"> <h1>Page Title No BG</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>
`.page-title-pattern`	Page Title style with a Background Pattern.	<section id="page-title" class="page-title-pattern"> <div class="container clearfix"> <h1>Page Title with Pattern</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>
`.page-title-parallax`	Page Title style with a Parallax Image.	<section id="page-title" class="page-title-parallax page-title-dark" style="background-image: url('');" data-stellar-background-ratio="0.3"> <div class="container clearfix"> <h1>Page Title Parallax</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>
`.page-title-video`	Page Title style with a HTML5 Video.	<section id="page-title" class="page-title-parallax page-title-dark page-title-video"> <div class="video-wrap"> <video width="100%" src="images/videos/deskwork.mp4" preload="auto" loop autoplay muted></video> <div class="video-overlay"></div> </div> <div class="container clearfix"> <h1>Page Title Video</h1> <span>A Short Page Title Tagline</span> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Shortcodes</a></li> <li class="active">Page Titles</li> </ol> </div> </section>

Columns & Grid

Canvas Grid

.col_full

.col_half

.col_half .col_last

.col_one_third

.col_two_third .col_last

.col_one_fourth

.col_three_fourth .col_last

.col_one_fifth

.col_four_fifth .col_last

.col_two_fifth

.col_three_fifth .col_last

.col_one_sixth

.col_five_sixth .col_last

Bootstrap Grid

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-2

.col-md-6

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

Isotope Initialization

You can initialize Isotope on any Grid Container by simply adding the .grid-container Class on the Container that holds the Grid. This is Best Effective on the Portfolio, Blog & Shop Grids.

Example:

<!-- Portfolio Items
============================================= -->
<div id="portfolio" class="portfolio grid-container clearfix">
	...
</div>

Settings:

data-transition - Transition Speed of the Isotope Grid in seconds. Eg. 0.65
data-layout - Layout of the Isotope Grid. Eg. masonry . More Layout Options

Side Panel

You can add a revealable Side Panel on your Website with Additional Information about your Website. Simply use the Code below:

<div class="body-overlay"></div>

<div id="side-panel" class="dark">

	<div id="side-panel-trigger-close" class="side-panel-trigger"><a href="#"><i class="icon-line-cross"></i></a></div>

	<div class="side-panel-wrap">

		... Your Content

	</div>

</div>

Note: Make sure that you add the Side Panel's Code just after the #wrapper Starts.

Side Panel Position

A Side Panel can be revealed from either Left or Right. The Side Panel is revealed from the Right by default. If you would like to change the Reveal Position of the Side Panel to Left, then you can simply add the .side-panel-left Class to the <body> Tag.

<body class="stretched side-panel-left">

Side Panel Reveal Style

The Side Panel's Reveal style is Overlay by default. If you would like to change the Reveal Style of the Side Panel to Push, then you can simply add the .side-push-panel Class to the <body> Tag.

<body class="stretched side-push-panel">

Go To Top

You can add a Go To Top Trigger on your Page to allow your users to scroll to the Top of the Page anytime they need to. Simply add the code below at the bottom of the page just after the </wrapper> ends:

<div id="gotoTop" class="icon-angle-up"></div>

Settings:

data-offset - Offset from Top when you would like the Go To Top Trigger to appear in pixels. Eg. 300
data-mobile - Enable/Disable Go To Top on Mobile. Eg. true/false
data-speed - Speed of the Go To Top Scrolling in milliseconds. Eg. 800
data-easing - Easing of the Go To Top Scrolling. Eg. easeInQuad

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

.allmargin - Margin of 50px on all sides.
.topmargin - Margin of 50px on the top side.
.bottommargin - Margin of 50px on the bottom side.
.leftmargin - Margin of 50px on the left side.
.rightmargin - Margin of 50px on the right side.
.allmargin-sm - Margin of 30px on all sides.
.topmargin-sm - Margin of 30px on the top side.
.bottommargin-sm - Margin of 30px on the bottom side.
.leftmargin-sm - Margin of 30px on the left side.
.rightmargin-sm - Margin of 30px on the right side.
.allmargin-lg - Margin of 80px on all sides.
.topmargin-lg - Margin of 80px on the top side.
.bottommargin-lg - Margin of 80px on the bottom side.
.leftmargin-lg - Margin of 80px on the left side.
.rightmargin-lg - Margin of 80px on the right side.
.nomargin - No Margin on all sides.
.notopmargin - No Margin on the top side.
.nobottommargin - No Margin on the bottom side.
.noleftmargin - No Margin on the left side.
.norightmargin - No Margin on the right side.
.header-stick - Sticks content with the Header.
.footer-stick - Sticks content with the Footer.
.noborder - No Border on all sides.
.notopborder - No Border on the top side.
.nobottomborder - No Border on the bottom side.
.noleftborder - No Border on the left side.
.norightborder - No Border on the right side.
.nopadding - No Padding on all sides.
.notoppadding - No Padding on the top side.
.nobottompadding - No Padding on the bottom side.
.noleftpadding - No Padding on the left side.
.norightpadding - No Padding on the right side.
.col-padding - Padding of 60px on all sides.
.noradius - No Border Radius.
.noshadow - No Box Shadows.
.nobg - No Backgrounds.
.nobgcolor - No Background Colors.
.noabsolute - Forces Relative Position.
.hidden - Hidden Blocks.
.nothidden - No Hidden Blocks.
.inline-block - Inline Blocks.
.center - Center Aligned Text.
.tright - Right Aligned Text.
.divcenter - Center Aligned DIVs.
.fleft - Left Aligned DIVs.
.fright - Right Aligned DIVs.
.color - Theme Text Color.
.bgcolor - Theme Background Color.
.border-color - Theme Border Color.
.bgicon - Background Icon.
.bganimate - Animates Background Vertically.
.grayscale - Adds a Grayscale Filter to the Images and Colors on Hover.
.imagescale - Adds a Zoom Out Effect on the Image when Hovered.
.t300 - Changes the Font Weight to Light.
.t400 - Changes the Font Weight to Normal.
.t500 - Changes the Font Weight to Medium.
.t600 - Changes the Font Weight to Semi Bold.
.t700 - Changes the Font Weight to Bold.
.ls1 - Adds a Letter Spacing of 1px.
.ls2 - Adds a Letter Spacing of 2px.
.ls3 - Adds a Letter Spacing of 3px.
.ls4 - Adds a Letter Spacing of 4px.
.ls5 - Adds a Letter Spacing of 5px.
.noheight - Changes the Height of the Element to 0px.
.nolineheight - Changes the Line Height of the Element to 0px.
.font-body - Changes the Font Family of the Element equal to the one used for the Body Text.
.font-primary - Changes the Font Family of the Element equal to the one used for the Primary Text.
.font-secondary - Changes the Font Family of the Element equal to the one used for the Secondary Text.

Useful Snippets

We have created some really useful functionality which surely going to make your Website more interactive. Here are a few of them:

Smooth Scrolling to Same Page Sections

With Canvas you can turn pretty-much any Page into a One Page Website, which defines Smart Functionality. You can Point any Link, Button on a Page to an Element ID which on Clicking scrolls to that Element.

You can use this functionality by adding data-scrollto="#html-element-ID" attribute to a Button or a Link. Simply use the following Sample Code to use this functionality:

<a href="#header" data-scrollto="#header" class="button button-3d">Scroll to Header</a>

Note: You should have a Valid & Unique Element ID on the Page where you are planning to use the ScrollTo Functionality.

Responsive Absolute Heights

This is a Very Interesting Feature of Canvas of defining Responsive Heights. But it is recommended that it is used only on the Absolutely positioned elements as the Relatively positioned elements are auto-heights. You can define Responsive Heights for an Element using the data-height attribute:

data-height-lg - Height for Large Devices >=1200px
data-height-md - Height for Medium Devices >=992px to 1199px
data-height-sm - Height for Tablets
data-height-xs - Height for Landscape Mobiles or Phablets
data-height-xxs - Height for Portrait Mobiles

Sample Code:

<div style="position: relative; margin-bottom: -60px;" class="ohidden" data-height-lg="426" data-height-md="567" data-height-sm="470" data-height-xs="287" data-height-xxs="183">
	<img src="images/services/main-fbrowser.png" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="100" alt="Chrome">
	<img src="images/services/main-fmobile.png" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="400" alt="iPad">
</div>

Note: Width of the Image is flexible depending on the Parent Container. Now, the Large Device will have the Default Height of your Image and the other heights can be checked simply by resizing your browser to see the image heights change, so you can define the other heights accordingly. We guess, this will surely serve you well. But do remember, this should only be used on absolutely positioned elements.

Responsive Classes

Now you can add Responsive Classes to an Element that switches on Different Devices. You can define Responsive Classes for an Element using the data-class attribute:

data-class-lg - Classes for Large Devices >=1200px
data-class-md - Classes for Medium Devices >=992px to 1199px
data-class-sm - Classes for Tablets
data-class-xs - Classes for Landscape Mobiles or Phablets
data-class-xxs - Classes for Portrait Mobiles

Sample Code:

<a href="#" class="button" data-class-lg="button-large" data-class-md="" data-class-sm="button-xlarge" data-class-xs="button-small" data-class-xxs="button-mini">Button</a>

Note: Make sure that if you intend to use the Responsive Classes Functionality, then you add the data-class-* Variations for all the Devices, since this will ensure that your Defined Classes are Applied on Window Load of that Particular Device as well.

Slider Types & their Options

Canvas includes 7 Unique Sliders & 20+ Pre-Built Slider Templates for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:

Revolution Slider
Canvas Swiper Slider
Flex Slider
Owl Slider
Camera Slider
Elastic Slider
Nivo Slider

Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs

Canvas Swiper Slider

Usage:

Here is the HTML Code for the Canvas Swiper Slider:

<section id="slider" class="slider-parallax swiper_wrapper full-screen clearfix">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<!--First Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the first slide goes here -->
			</div>

			<!--Second Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the second slide goes here -->
			</div>

			<!--Third Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the third slide goes here -->
			</div>
			<!--Etc..-->
		</div>
	</div>
</section>

Note: You can use the "dark" class on .swiper-slide element, to make the Caption Content & the Header Scheme(only on Transparent Header) "Dark".

Setting Slider Height:

<div id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 400px;">
	...
</div>

Settings:

data-direction - Direction of the Slide Animation. Eg. horizontal/vertical
data-speed - Speed of the Slide Animation in milliseconds. Eg. 500
data-autoplay - Pause Time between Slide's Autoplay Transition in milliseconds. Eg. 5000
data-loop - Enable/Disable Slider Loop. Eg. true/false
data-effect - Slide Effect. Eg. slide/fade/cube/coverflow/flip
data-grab - Enable/Disable Grab Cursor. Eg. true/false
data-video-autoplay - Enable/Disable Video Autoplay. Eg. true/false

To disable the Pagination, Slider Next/Prev Arrows, simply remove the related HTML Codes.

Example:

<section id="slider" class="slider-parallax swiper_wrapper full-screen clearfix" data-speed="600" data-loop="true">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<!--First Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the first slide goes here -->
			</div>

			<!--Second Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the second slide goes here -->
			</div>

			<!--Third Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the third slide goes here -->
			</div>
			<!--Etc..-->
		</div>
	</div>
</section>

Initializing Canvas Swiper Slider using Custom Javascript

Canvas Swiper Sliders are initialized using the Standard Minimal Functionality by default, but there might instances when you would have to Create a Custom Functionality. To use this you can simply add the .customjs Class to #slider Container as this will stop it from using the Default Functionality and allow you to extend the Slider with your own Custom Functionality.

You can find more Canvas Swiper Slider related Settings for Custom JS Initialization here.

Canvas Swiper Slider Documentation

Slider Captions

You can Add Captions to your Slides using a no. of Classes described below:

Caption Class	Description	Works on
`.slider-caption`	Creates a Caption on the Canvas Slider	Canvas Swiper Slider
`.flex-caption`	Creates a Caption on Flex Slider, Owl Slider & Camera Slider	Flex Slider Owl Slider Camera Slider with `.camera-caption`
`.nivo-caption`	Creates a Caption on the Nivo Slider	Nivo Slider
`.ei-title`	Creates a Caption on the Elastic Slider	Elastic Slider
`.slider-caption-right`	Positions the Caption to the Right on the Canvas Swiper Slider	Canvas Swiper Slider
`.slider-caption-center`	Positions the Caption in the Center on the Canvas Swiper Slider	Canvas Swiper Slider
`.slider-caption-top-left`	Positions the Caption to the Top Left on Flex Slider & Owl Slider	Flex Slider Owl Slider
`.slider-caption-top-right`	Positions the Caption to the Top Right on Flex Slider & Owl Slider	Flex Slider Owl Slider
`.slider-caption-bottom-right`	Positions the Caption to the Bottom Right on Flex Slider & Owl Slider	Flex Slider Owl Slider
`.slider-caption-bg`	Provides a Dark background for the Caption on Flex Slider, Owl Slider & Camera Slider	Flex Slider Owl Slider Camera Slider with `.camera-caption`
`.slider-caption-bg` `.slider-caption-bg-light`	Provides a Light background for the Caption on Flex Slider, Owl Slider & Camera Slider	Flex Slider Owl Slider Camera Slider with `.camera-caption`

Slider Helper Classes

We have created some helper classes for the Sliders. Here are a few of them:

.slider-parallax - Enables Parallax Functionality for the Slider Element.
.boxed-slider - Makes the Slider Boxed within the Container.
.full-screen - Makes the Slider Full Screen.
.with-header - Makes the Slider Full Screen with Header Height included. .full-screen class should also be included.

Blog Setup

Posts use Simple Markup. Use the Code Sample below:

<div id="posts">

	<div class="entry clearfix">

		<!-- Post Image -->
		<div class="entry-image">
			<a href="image.jpg" data-lightbox="image"><img class="image_fade" src="image.jpg" alt="Standard Post with Image"></a>
		</div>

		<!-- Post Title -->
		<div class="entry-title">
			<h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
		</div>

		<!-- Post Meta -->
		<ul class="entry-meta clearfix">
			<li><i class="icon-calendar3"></i> 10th February 2014</li>
			<li><a href="#"><i class="icon-user"></i> admin</a></li>
			<li><i class="icon-folder-open"></i> <a href="#">General</a>, <a href="#">Media</a></li>
			<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13 Comments</a></li>
			<li><a href="#"><i class="icon-camera-retro"></i></a></li>
		</ul>

		<!-- Post Content -->
		<div class="entry-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in. Eligendi, deserunt, blanditiis est quisquam doloribus voluptate id aperiam ea ipsum magni aut perspiciatis rem voluptatibus officia eos rerum deleniti quae nihil facilis repellat atque vitae voluptatem libero at eveniet veritatis ab facere.</p>
			<a href="blog-single.html">Read More →</a>
		</div>

	</div>

	...

</div>

Post Types

You can use a 7 different types of Post Types:

Image
Embedded Video
Slider Gallery
Gallery Thumbs
Blockquotes
Link
Status
Embedded Audio

Comment Types

You can use a 3 different types of Comments System on Post Single Pages:

Default
Facebook
Disqus

Facebook Comments

Code Sample for Facebook Comments:

<div id="comments" class="clearfix">

	<h3 id="comments-title"><span><fb:comments-count href="your-post-full-url"></fb:comments-count></span> Comments</h3>

	<!-- Facebook Comments
	============================================= -->
	<div class="fb-comments" data-width="100%" data-href="your-post-full-url" data-numposts="5" data-colorscheme="light"></div>
	<!-- Facebook Comments end -->

</div>

Note: You'll need to place the following code just after the body tag of your HTML document.

<div id="fb-root"></div>
<script>(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId={your-app-id}&version=v2.0";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Disqus Comments

Code Sample for Disqus Comments:

<div id="comments" class="clearfix">

	<h3 id="comments-title">Comments</h3>

	<!-- Disqus Comments
	============================================= -->
	<div id="disqus_thread"></div>
	<script type="text/javascript">
		/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
		var disqus_shortname = 'your-disqus-shortname'; // required: replace example with your forum shortname

		/* * * DON'T EDIT BELOW THIS LINE * * */
		(function() {
			var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
		})();
	</script>
	<!-- Disqus Comments end -->

</div>

Portfolio Setup

Canvas provides a very elegant way to showcase your work. Setting up Portfolio is simple. Please use the following codes:

Setting up Portfolio Filter:

<ul class="portfolio-filter clearfix" data-container="#portfolio">

	<li class="activeFilter"><a href="#" data-filter="*">Show All</a></li>
	<li><a href="#" data-filter=".pf-icons">Icons</a></li>
	<li><a href="#" data-filter=".pf-illustrations">Illustrations</a></li>
	<li><a href="#" data-filter=".pf-uielements">UI Elements</a></li>
	<li><a href="#" data-filter=".pf-media">Media</a></li>
	<li><a href="#" data-filter=".pf-graphics">Graphics</a></li>

</ul>

<div class="portfolio-shuffle" data-container="#portfolio">
	<i class="icon-random"></i>
</div>

Setting up Portfolio Items:

<div id="portfolio" class="portfolio grid-container clearfix">

	<article class="portfolio-item pf-media pf-icons">

		<!-- Portfolio Image -->
		<div class="portfolio-image">
			<a href="portfolio-single.html">
				<img src="images.jpg" alt="Portfolio Title">
			</a>
			<div class="portfolio-overlay">
				<a href="images/portfolio/full/1.jpg" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
				<a href="portfolio-single.html" class="right-icon"><i class="icon-line-ellipsis"></i></a>
			</div>
		</div>

		<!-- Portfolio Description -->
		<div class="portfolio-desc">
			<h3><a href="portfolio-single.html">Portfolio Title</a></h3>
			<span><a href="#">Media</a>, <a href="#">Icons</a></span>
		</div>

	</article>

	...

</div>

In Page AJAX

You can load Portfolio Details on the same Page using AJAX Technique which makes the User Experience more Interactive.

Setting up AJAX Portfolio Wrapper:

<div id="portfolio-ajax-wrap">
	<div id="portfolio-ajax-container"></div>
</div>

<div id="portfolio-ajax-loader"><img src="images/preloader-dark.gif" alt="Preloader"></div>

Note: Place this code before the Portfolio Codes start.

Setting up AJAX Portfolio Items

<article id="portfolio-item-1" data-loader="include/ajax/portfolio-ajax-image.php" class="portfolio-item pf-media pf-icons">
	<div class="portfolio-image">
		<a href="portfolio-single.html">
			<img src="images.jpg" alt="Portfolio Title">
		</a>
		<div class="portfolio-overlay">
			<a href="#" class="center-icon"><i class="icon-line-expand"></i></a>
		</div>
	</div>
	<div class="portfolio-desc">
		<h3><a href="portfolio-single.html">Portfolio Title</a></h3>
		<span><a href="#">Media</a>, <a href="#">Icons</a></span>
	</div>
</article>

The codes for the AJAX Item Details can be found in the file: PACKAGE/HTML/include/ajax

Modal AJAX

You can load Portfolio Details in a Modal using AJAX Technique which makes the User Experience more Interactive.

Setting up Modal AJAX Portfolio Items

<article class="portfolio-item pf-media pf-icons">
	<div class="portfolio-image">
		<a href="portfolio-single.html">
			<img src="images.jpg" alt="Portfolio Title">
		</a>
		<div class="portfolio-overlay">
			<a href="images/portfolio/full/1.jpg" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
			<!-- This is where the Modal AJAX works -->
			<a href="include/ajax/portfolio-single-image.html" data-lightbox="ajax" class="right-icon"><i class="icon-line-expand"></i></a>
		</div>
	</div>
	<div class="portfolio-desc">
		<h3><a href="portfolio-single.html">Portfolio Title</a></h3>
		<span><a href="#">Media</a>, <a href="#">Icons</a></span>
	</div>
</article>

The codes for the Modal AJAX Item Details can be found in the file: PACKAGE/HTML/include/ajax

Infinity Scroll

You can show Unlimited no. of Portfolio Items on a Page using Infinity Scroll.

Add the Following Code after the Portfolio `#portfolio` Container:

<div id="load-next-posts" class="center">
	<a href="portfolio-infinity-scroll-2.html" class="button button-full button-dark button-rounded">Load more...</a>
</div>

Note: Make sure you create a page with name portfolio-infinity-scroll-2.html & place the next Set of Portfolio Items in it. Then the next set will have the name portfolio-infinity-scroll-3.html and so on..

Script for Infinity Scroll:

<script type="text/javascript">

	jQuery(window).load(function(){

		var $container = $('#portfolio');

		$container.isotope({ transitionDuration: '0.65s' });

		$('#portfolio-filter a').click(function(){
			$('#portfolio-filter li').removeClass('activeFilter');
			$(this).parent('li').addClass('activeFilter');
			var selector = $(this).attr('data-filter');
			$container.isotope({ filter: selector });
			return false;
		});

		$('#portfolio-shuffle').click(function(){
			$container.isotope('updateSortData').isotope({
				sortBy: 'random'
			});
		});

		$(window).resize(function() {
			$container.isotope('layout');
		});

		$container.infinitescroll({
			loading: {
				finishedMsg: '<i class="icon-line-check"></i>',
				msgText: '<i class="icon-line-loader icon-spin"></i>',
				img: "images/preloader-dark.gif",
				speed: 'normal'
			},
			state: {
				isDone: false
			},
			nextSelector: "#load-next-posts a",
			navSelector: "#load-next-posts",
			itemSelector: "article.portfolio-item"
		},
		function( newElements ) {
			$container.isotope( 'appended', $( newElements ) );
			var t = setTimeout( function(){ $container.isotope('layout'); }, 2000 );
			SEMICOLON.widget.loadFlexSlider();
			SEMICOLON.portfolio.arrange();
		});

	});

</script>

Introduction

Canvas boasts of a huge number of handy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with Canvas:

Animations
Buttons
Carousels
Charts
Clients
Columns
Counters
Dividers
Icon Boxes
Galleries
Heading Styles
Icon Lists
Labels
Lightboxs
Lists & Panels
Maps
Media Embeds
Modal Boxes
Navigations
Paginations
Pies & Skills
Pricing Boxes
Process Steps
Promo Boxes
Blockquotes
Responsive
Sections
Social Icons
Alert Boxes
Styled Icons
Tables
Tabs
Testimonials
Thumbnails
Toggles

Each of the above mentioned Shortcodes are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.

Animations

Scroll to reveal Animations are latest in the Trends. You can do them too with Canvas. You can use animations on any element you want. Here is the Sample Code:

<div data-animate="fadeInLeft"></div>

You can also use delays for your Animations:

<div data-animate="fadeInLeft" data-delay="500"></div>

Note: Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use:

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Sections & Parallax

Setup content you want to stand out. You can use Light & Dark Sections, Parallax Images or HTML5 Videos as Sections.

Setting up Sections:

Setup your Sections outside the .container element.

Light Section:

<div class="section">
	<div class="container clearfix">

		...

	</div>
</div>

Dark Section:

<div class="section dark">
	<div class="container clearfix">

		...

	</div>
</div>

Setting up Parallax Sections:

Make sure your Parallax Images are of enough Width & Height, preferably 1920x1080 or above.

<div class="section parallax" style="background: url('images/parallax/3.jpg') center center; background-size:cover; padding: 100px 0;" data-stellar-background-ratio="0.3">
	<div class="container clearfix">

		...

	</div>
</div>

Note: If you are experiencing Background Image Repeat in a Parallax Section, then you should use data-stellar-vertical-offset="150" to avoid this. You can change 150 to your desired value.

Setting up HTML5 Video Sections:

You'll need an HD .mp4 & .webm video.

<div class="section dark" style="height: 550px;">

	<div class="container clearfix">

		...

	</div>

	<div class="video-wrap">
		<video poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted>
			<source src='images/videos/deskwork.mp4' type='video/mp4' />
			<source src='images/videos/deskwork.webm' type='video/webm' />
		</video>
		<div class="video-overlay"></div>
	</div>

</div>

Setting up Youtube Background Video Sections:

You can now simply Add Youtube Video as Background Sections similar to the HTML5 Video Sections.

<div class="section yt-bg-player nomargin dark" data-quality="hd1080" data-start="20" data-stop="40" data-video="http://youtu.be/A3PDXmYoF5U" style="height: 600px;">
	<div class="container clearfix">

		...

	</div>
</div>

List of the Youtube Background Video Options:

data-video - The Youtube Video Share URL. Example: http://youtu.be/BCqJGoCMlVc
data-mute - Mute the Audio. Example: true or false
data-ratio - Aspect Ratio of the Video. Example: "4/3" or "16/9"
data-quality - Quality of the Video. Example: "default" or "small", "medium", "large", "hd720", "hd1080", "highres"
data-opacity - Opacity of the Video. Example:
data-container - CSS selector of the DOM element where you want the video background, if not specified it takes the "self".
data-optimize - Will fit the video size into the window size optimizing the view. Example: true or false
data-loop - Loops the Video. Example: true or false
data-volume - Volume of the Audio. Example: 1 to 100
data-start - Set the seconds the video should start at. Example: 10
data-stop - Set the seconds the video should stop at. Example: 30. (If set 0, the video will play till the end)
data-autoplay - Autoplay the Video. Example: true or false
data-fullscreen - Activate the new HTML5 full screen behavior. Example: true or false

Tabs, Toggles & Accordions

You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.

Tabs

Use the below code to display Tabs:

<div class="tabs clearfix" id="tabs">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>

Note: Make sure you add unique IDs for each Tab Container and Tab Items.

Options:

data-speed - The Fade Effect speed for switching between Tabs. Eg. 400 for 0.4 Seconds
data-active - The Order Number of the Tab which you want to activate on initialization. Eg. 2 to activate the Second Tab on Initialization

Example:

<div class="tabs clearfix" id="tabs" data-speed="700" data-active="2">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>

Initializing Tabs using Custom Javascript

Tabs are initialized using the Standard Minimal Functionality by default, but there might instances when you would have to Create a Custom Functionality for the Tabs using some more options of the jQuery UI Tabs Plugin. To use this you can simply add the .customjs Class to .tabs Container as this will stop it from using the Default Functionality and allow you to extend the Tabs with your own Custom Functionality. Here is an example:

<div class="tabs customjs clearfix" id="tabs">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>

<script>
	jQuery(document).ready( function($){
		$( "#tabs" ).tabs({
			collapsible: true,
			event: 'mouseover',
			show: {
				effect: "fade",
				duration: 400
			}
		});
	});
</script>

Full list of Customizable Options can be found at the jQuery UI Tabs API.

Toggles

You can add a Toggle using the Code below:

<div class="toggle">
	<div class="togglet"><i class="toggle-closed icon-ok-circle"></i><i class="toggle-open icon-remove-circle"></i>This is a Toggle Title</div>
	<div class="togglec">This is a Toggle Content</div>
</div>

Options:

data-state - The State of the Toggle. Eg. open to keep the Toggle open by default

Styles:

You can use 2 other styles for the Toggles. Eg. .toggle-bg or .toggle-border

Example:

<div class="toggle toggle-border" data-state="open">
	<div class="togglet"><i class="toggle-closed icon-ok-circle"></i><i class="toggle-open icon-remove-circle"></i>This is a Toggle Title</div>
	<div class="togglec">This is a Toggle Content</div>
</div>

Accordions

You can add a Accordion using the Code below:

<div class="accordion clearfix">

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

</div>

Options:

data-state - The State of the Accordions. Eg. closed to keep all the Accordions closed by default
data-active - The Order Number of the Accordion which you want to activate on initialization. Eg. 2 to activate the Second Accordion on Initialization

Styles:

You can use 2 other styles for the Accordions. Eg. .accordion-bg or .accordion-border

Example:

<div class="accordion accordion-border clearfix" data-active="2">

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

</div>

Responsive Slider

You can add a Responsive Slider on any Page using the Code below:

<div class="fslider">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide"><img src="slide-image.jpg" alt="Slide 1"></div>
			<div class="slide"><img src="slide-image.jpg" alt="Slide 2"></div>
			<div class="slide"><img src="slide-image.jpg" alt="Slide 3"></div>
		</div>
	</div>
</div>

There are Definable Options which can be used to change the Look & Feel of your Sliders:

data-animation - Defines the Animation Style of the Slider. Use slide or fade
data-easing - Easing of the Slide Animation. Eg. easeInQuad
data-direction - Direction of the Slide Animation. Use horizontal or vertical
data-slideshow - Enables/Disables Auto Slideshow. Set to true or false
data-pause - Time Interval between Slide Animations when Auto Slideshow enabled in milliseconds. Eg. 5000 for 5 Seconds
data-speed - Speed of the Slide Animation in milliseconds. Eg. 600 for 0.6 Seconds
data-video - Set to true if a Slide in the Slider contains a Embedded Video
data-smooth-height - Enables/Disables Slider's Smooth height Functionality. Set to true or false
data-pagi - Enables/Disables Slider's Pagination. Set to true or false
data-arrows - Enables/Disables Slider's Arrow Navigation. Set to true or false
data-thumbs - Enables/Disables Slider's Thumb Navigation. Set to true or false. Note: If this is set to true, then you will need to include data-thumb for Each Slide. Eg. data-thumb="your-slide-thumb-image.jpg"

Using Thumbs Scaling

You can use the Scaling Thumbs feature to divide the Thumb's Width into equal widths relative to the Slider's Width. For Example, if your Slider's Width is 800px, then the Thumb's Width for a 4 Columns Grid will be 200px and for a 8 Columns Grid will be 100px and so on...

<div class="fslider flex-thumb-grid grid-6" data-arrows="false" data-animation="fade" data-thumbs="true">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
		</div>
	</div>
</div>

You can use grid-3, grid-5, grid-6, grid-8, grid-10, grid-12 for your Thumbs Grid.

Note: You will need to add the .flex-thumb-grid Class to the .fslider Element along with the Grid's Class. Also, there is no need to use any Class for a 4 Columns Grid since it is set by default.

Owl Carousel

You can add an Owl Carousel on any Page using the Code below:

<div class="owl-carousel image-carousel carousel-widget" data-margin="20" data-nav="true" data-pagi="false" data-items-xxs="2" data-items-xs="3" data-items-sm="4" data-items-md="5">

	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 1"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 2"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 3"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 4"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 5"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 6"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images1.jpg" alt="Image 7"></a>
	</div>

</div>

Settings:

data-items - No. of Items to display in the Carousel. Eg. 5
data-items-lg - No. of Items to display in the Carousel on Desktops/Laptops. Eg. 5
data-items-md - No. of Items to display in the Carousel on Netbooks. Eg. 5
data-items-sm - No. of Items to display in the Carousel on iPads/Tablets. Eg. 4
data-items-xs - No. of Items to display in the Carousel on Mobile Landscape. Eg. 3
data-items-xxs - No. of Items to display in the Carousel on Mobile Portrait. Eg. 2
data-loop - Enable/Disable Loop. Eg. true/false
data-autoplay - Autoplay timer in milliseconds. Eg. 5000
data-speed - Speed of the Carousel Animation in millisconds. Eg. 700
data-nav - Enable/Disable Navigation Arrows. Eg. true/false
data-pagi - Enable/Disable Pagination Dots. Eg. true/false
data-margin - Margin between Carousel Items in pixels. Eg. 15
data-stage-padding Padding on the Edges of the Carousel Container in pixels. - Eg. 20
data-merge - Enable/Disable Item Merging. Eg. true/false
data-start - Item Index to start the Carousel from. Eg. 3
data-rewind - Enable/Disable Carousel Rewind. Eg. true/false
data-slideby - No. of Items to Slide at once. Eg. 2
data-center - Enable/Disable Centering. Eg. true/false
data-lazyload - Enable/Disable Lazyload. Eg. true/false
data-video - Enable/Disable Video Carousel Items. Eg. true/false

Initializing Owl Carousel using Custom Javascript

Owl Carousels are initialized using the Standard Functionality by default, but there might instances when you would have to Create a Custom Functionality. To use this you can simply add the .customjs Class to .carousel-widget Container as this will stop it from using the Default Functionality and allow you to extend the Owl Carousel with your own Custom Functionality.

You can find more Owl Carousel related Settings for Custom JS Initialization here.

Owl Carousel Documentation

Lightbox & Notifications

Setting up Lightboxes:

Adding a data-lightbox attribute to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:

Single Image:

<a href="link-to-lightbox-image.jpg" data-lightbox="image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

Iframe:

<a href="http://yourwebsite.com" data-lightbox="iframe">Your Website in a Lightbox</a>

Video:

<a href="http://www.youtube.com/watch?v=kuceVNBTJio" data-lightbox="iframe">Lightbox Video</a>

Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.

AJAX:

<a href="link-to-ajax-content.html" data-lightbox="ajax">AJAX Content in a Lightbox</a>

Note: It is recommended that you use the .portfolio-ajax-modal Class to wrap your AJAX Content to get it displayed properly. You can also design your AJAX Content in any way using your own Custom CSS.

Gallery:

<div data-lightbox="gallery">
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
</div>

AJAX Gallery:

<div data-lightbox="ajax-gallery">
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
</div>

Showing Lightbox Captions:

To show Captions for your Lightbox Images you will need to add the title Attribute for your Lightbox Links:

<a href="link-to-lightbox-image.jpg" data-lightbox="image" title="Lightbox Image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

Setting up Notifications:

You can setup Custom Notifications for your Website to get attention of your Visitors. A Sample Code to trigger a Notification:

<a href="#" class="btn btn-info" data-notify-type="info" data-notify-msg="<i class=icon-info-sign></i> Welcome to Canvas Demo!" onclick="SEMICOLON.widget.notifications(this); return false;">Show Info</a>

The Notification Shortcode has the following customizable options:

data-notify-position - Defines the Position of the Notification Message. Definable Options are as follows:
- top-right - Shows the Notification Message at the Top Right corner of the screen
- top-left - Shows the Notification Message at the Top Left corner of the screen
- bottom-right - Shows the Notification Message at the Bottom Right corner of the screen
- bottom-left - Shows the Notification Message at the Bottom Left corner of the screen
- top-full-width - Shows the Notification Message at the Top in a Full Width Layout
- bottom-full-width - Shows the Notification Message at the Bottom in a Full Width Layout
data-notify-type - Defines the Type/Color of the Notification Message. Definable Options are as follows:
- info
- error
- success
- warning
data-notify-msg - Sets the Content of the Notification Message in HTML. Eg. <i class=icon-info-sign></i> Welcome to Canvas Demo!
data-notify-close - Shows a Close Button in the Notification Box. Use true or false

You can also Trigger a Custom Notification on a User Defined Action such as Form Submission or Window Load. Here is a Sample Code to achieve this:

<div id="custom-notification-message" data-notify-position="top-right" data-notify-type="info" data-notify-msg="<i class="icon-info-sign"></i> Welcome to Canvas Demo!"></div>

<script type="text/javascript">
	jQuery(window).load( function(){
		SEMICOLON.widget.notifications( jQuery('#custom-notification-message') );
	});
</script>

Note: Remember, SEMICOLON.widget.notifications(); Function only accepts jQuery Selector to get executed properly. So you can turn any HTML Element with a Unique ID to a Notification Element using the Settings mentioned above and call the Notification Function on its HTML ID Selector.

Modal on Load

You can add a Modal that displays on the Page Load to any Page using the following setup:

<div class="modal-on-load" data-target="#myModal1"></div>

<!-- Modal -->
<div class="modal1 mfp-hide" id="myModal1">
	<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
		<div class="center" style="padding: 50px;">
			<h3>A Simple Example of a Text Modal</h3>
			<p class="nobottommargin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus, tenetur obcaecati porro! Expedita nostrum tempora quia provident perspiciatis inventore, autem eaque, quod explicabo, ipsum, facilis aliquid! Sapiente, possimus quo!</p>
		</div>
		<div class="section center nomargin" style="padding: 30px;">
			<a href="#" class="button" onClick="$.magnificPopup.close();return false;">Close this Modal</a>
		</div>
	</div>
</div>

The Modal on Load has the following customizable options:

data-target - The ID of the Modal you want to Target. Example: #myModal1
data-delay - Time in milliseconds by which you want to delay the Display of the Modal.
data-timeout - Time in milliseconds when you want to disable the Modal.
data-animation-in - Animation of the Modal when Display In. Refer Here
data-animation-out - Animation of the Modal when Display Out. Refer Here

Note: To enable Cookies on Modal, simply add the .enable-cookie Class to the .modal-on-load Element.

Code Sample:

<div class="modal-on-load enable-cookie" data-target="#myModal1" data-delay="5000" data-timeout="7000"></div>

<!-- Modal -->
<div class="modal1 mfp-hide" id="myModal1">
	<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
		<div class="center" style="padding: 50px;">
			<h3>A Simple Example of a Text Modal</h3>
			<p class="nobottommargin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus, tenetur obcaecati porro! Expedita nostrum tempora quia provident perspiciatis inventore, autem eaque, quod explicabo, ipsum, facilis aliquid! Sapiente, possimus quo!</p>
		</div>
		<div class="section center nomargin" style="padding: 30px;">
			<a href="#" class="button" onClick="$.magnificPopup.close();return false;">Close this Modal</a>
		</div>
	</div>
</div>

Google Maps

You can add Embedded Google Maps to any Page using the following setup:

Step 1:

Add the Google Maps Specific Scripts in the <head> Tag below the js/plugins.js script linking:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>

Step 2:

Add a div which will contain your Google Map:

<div id="google-map1" style="height: 250px;" class="gmap"></div>

Step 3:

Add the Google Maps script with your Specific Options just below your Google Map div to initialize your Google Maps:

<script type="text/javascript">

	$('#google-map1').gMap({

		 address: 'Melbourne, Australia',
		 maptype: 'ROADMAP',
		 zoom: 14,
		 markers: [
			{
				address: "Melbourne, Australia"
			}
		 ],
		 doubleclickzoom: false,
		 controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: true,
			 scaleControl: false,
			 streetViewControl: false,
			 overviewMapControl: false
		 }

	});

</script>

Adding Custom Styled Maps:

You can add beautifully designed Custom Styled Google Maps to your Web Projects by simply setting the styles: [] in your Google Maps Script:

<script type="text/javascript">

	$('#google-map1').gMap({

		 address: 'Melbourne, Australia',
		 maptype: 'ROADMAP',
		 zoom: 14,
		 markers: [
			{
				address: "Melbourne, Australia"
			}
		 ],
		 doubleclickzoom: false,
		 controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: true,
			 scaleControl: false,
			 streetViewControl: false,
			 overviewMapControl: false
		 },
		 styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]

	});

</script>

Tip: A List of Amazingly Styled Maps can be found at Snazzy Maps.

Adding Multiple Map Markers

You can add Multiple Markers, up to 10(as allowed by Google) using the following Code:

<script type="text/javascript">

	$('#google-map1').gMap({

		 address: 'Melbourne, Australia',
		 maptype: 'ROADMAP',
		 zoom: 14,
		 markers: [
			{
				address: "Melbourne, Australia"
			},
			{
				address: "Sydney, Australia"
			},
			{
				address: "Perth, Australia"
			}
		 ],
		 doubleclickzoom: false,
		 controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: true,
			 scaleControl: false,
			 streetViewControl: false,
			 overviewMapControl: false
		 },
		 styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]

	});

</script>

Full List of Options you can set:

var options = {
	controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: true,
			 scaleControl: true,
			 streetViewControl: true,
			 overviewMapControl: true
		 },
	scrollwheel: false,
	maptype: 'TERRAIN',
	markers: [
		{
			latitude: -2.2014,
			longitude: -80.9763,
		},
		{
			address: "Guayaquil, Ecuador",
			html: "My Hometown",
			icon: {
				image: "images/gmap_pin_grey.png",
				iconsize: [26, 46],
				iconanchor: [12,46]
			}
		}
	],
	icon: {
		image: "http://www.google.com/mapfiles/marker.png",
		shadow: "http://www.google.com/mapfiles/shadow50.png",
		iconsize: [20, 34],
		shadowsize: [37, 34],
		iconanchor: [9, 34],
		shadowanchor: [19, 34]
	},
	latitude: -2.282,
	longitude: -80.272,
	zoom: 10,
	styles: []
}

Countdown

You can add a Countdown Timer to any Page using the following setup:

<div id="countdown-example"></div>

<script>
	jQuery(document).ready( function($){
		var newDate = new Date(2015, 5, 15);
		$('#countdown-example').countdown({until: newDate});
	});
</script>

Also, the date is in Javascript Format: (YYYY, M, DD) and the Javascript formats the Month as following:

0 as January
1 as February
2 as March
3 as April
4 as May
5 as June
6 as July
7 as August
8 as September
9 as October
10 as November
11 as December

So if you want your Countdown Date to be setup on 15th June, 2015 then your Countdown Date in Javascript Format will be Date(2015, 5, 15).

Icons

icon-line-eye
icon-line-paper-clip
icon-line-mail
icon-line-toggle
icon-line-layout
icon-line-link
icon-line-bell
icon-line-lock
icon-line-unlock
icon-line-ribbon
icon-line-image
icon-line-signal
icon-line-target
icon-line-clipboard
icon-line-clock
icon-line-watch
icon-line-air-play
icon-line-camera
icon-line-video
icon-line-disc
icon-line-printer
icon-line-monitor
icon-line-server
icon-line-cog
icon-line-heart
icon-line-paragraph
icon-line-align-justify
icon-line-align-left
icon-line-align-center
icon-line-align-right
icon-line-book
icon-line-layers
icon-line-stack
icon-line-stack-2
icon-line-paper
icon-line-paper-stack
icon-line-search
icon-line-zoom-in
icon-line-zoom-out
icon-line-reply
icon-line-circle-plus
icon-line-circle-minus
icon-line-circle-check
icon-line-circle-cross
icon-line-square-plus
icon-line-square-minus
icon-line-square-check
icon-line-square-cross
icon-line-microphone
icon-line-record
icon-line-skip-back
icon-line-rewind
icon-line-play
icon-line-pause
icon-line-stop
icon-line-fast-forward
icon-line-skip-forward
icon-line-shuffle
icon-line-repeat
icon-line-folder
icon-line-umbrella
icon-line-moon
icon-line-thermometer
icon-line-drop
icon-line-sun
icon-line-cloud
icon-line-cloud-upload
icon-line-cloud-download
icon-line-upload
icon-line-download
icon-line-location
icon-line-location-2
icon-line-map
icon-line-battery
icon-line-head
icon-line-briefcase
icon-line-speech-bubble
icon-line-anchor
icon-line-globe
icon-line-box
icon-line-reload
icon-line-share
icon-line-marquee
icon-line-marquee-plus
icon-line-marquee-minus
icon-line-tag
icon-line-power
icon-line-command
icon-line-alt
icon-line-esc
icon-line-bar-graph
icon-line-bar-graph-2
icon-line-pie-graph
icon-line-star
icon-line-arrow-left
icon-line-arrow-right
icon-line-arrow-up
icon-line-arrow-down
icon-line-volume
icon-line-mute
icon-line-content-right
icon-line-content-left
icon-line-grid
icon-line-grid-2
icon-line-columns
icon-line-loader
icon-line-bag
icon-line-ban
icon-line-flag
icon-line-trash
icon-line-expand
icon-line-contract
icon-line-maximize
icon-line-minimize
icon-line-plus
icon-line-minus
icon-line-check
icon-line-cross
icon-line-move
icon-line-delete
icon-line-menu
icon-line-archive
icon-line-inbox
icon-line-outbox
icon-line-file
icon-line-file-add
icon-line-file-subtract
icon-line-help
icon-line-open
icon-line-ellipsis
icon-type
icon-box
icon-archive
icon-envelope
icon-email
icon-files
icon-printer2
icon-folder-add
icon-folder-settings
icon-folder-check
icon-wifi-low
icon-wifi-mid
icon-wifi-full
icon-connection-empty
icon-battery-full
icon-settings
icon-arrow-left
icon-arrow-up
icon-arrow-down
icon-arrow-right
icon-reload
icon-download
icon-tag
icon-trashcan
icon-search
icon-zoom-in
icon-zoom-out
icon-chat
icon-clock
icon-printer
icon-home
icon-flag
icon-meter
icon-switch
icon-forbidden
icon-phone-landscape
icon-tablet
icon-tablet-landscape
icon-laptop
icon-camera
icon-microwave-oven
icon-credit-cards
icon-map-marker
icon-map
icon-support
icon-newspaper2
icon-barbell
icon-stopwatch
icon-atom
icon-image
icon-cube
icon-bars
icon-chart
icon-pencil
icon-measure
icon-eyedropper
icon-file-settings
icon-file-add
icon-file
icon-align-left
icon-align-right
icon-align-center
icon-align-justify
icon-file-broken
icon-browser
icon-windows
icon-window
icon-folder
icon-connection-25
icon-connection-50
icon-connection-75
icon-connection-full
icon-list
icon-grid
icon-stack3
icon-battery-charging
icon-battery-empty
icon-battery-25
icon-battery-50
icon-battery-75
icon-refresh
icon-volume
icon-volume-increase
icon-volume-decrease
icon-mute
icon-microphone
icon-microphone-off
icon-book
icon-checkmark
icon-checkbox-checked
icon-checkbox
icon-paperclip
icon-chat-1
icon-chat-2
icon-chat-3
icon-comment
icon-calendar
icon-bookmark
icon-email2
icon-heart
icon-enter
icon-cloud
icon-book2
icon-star
icon-lock
icon-unlocked
icon-unlocked2
icon-users
icon-user
icon-users2
icon-user2
icon-bullhorn
icon-share
icon-screen
icon-phone
icon-phone-portrait
icon-calculator
icon-bag
icon-diamond
icon-drink
icon-shorts
icon-vcard
icon-sun
icon-bill
icon-coffee
icon-tv2
icon-newspaper
icon-stack
icon-syringe
icon-health
icon-bolt
icon-pill
icon-bones
icon-lab
icon-clipboard
icon-mug
icon-bucket
icon-select
icon-graph
icon-crop
icon-heart2
icon-cloud2
icon-star2
icon-pen
icon-diamond2
icon-display
icon-paperplane
icon-params
icon-banknote
icon-vynil
icon-truck
icon-world
icon-tv
icon-sound
icon-video
icon-trash
icon-user3
icon-key
icon-search2
icon-settings2
icon-camera2
icon-tag2
icon-lock2
icon-bulb
icon-location
icon-eye
icon-bubble
icon-stack2
icon-cup
icon-phone2
icon-news
icon-mail
icon-like
icon-photo
icon-note
icon-clock2
icon-data
icon-music
icon-megaphone
icon-study
icon-lab2
icon-food
icon-t-shirt
icon-fire
icon-clip
icon-shop
icon-calendar2
icon-wallet
icon-duckduckgo
icon-lkdto
icon-delicious
icon-paypal
icon-flattr
icon-android
icon-eventful
icon-smashmag
icon-gplus
icon-wikipedia
icon-lanyrd
icon-calendar-1
icon-stumbleupon
icon-bitcoin
icon-w3c
icon-foursquare
icon-html5
icon-ie
icon-call
icon-grooveshark
icon-ninetyninedesigns
icon-forrst
icon-digg
icon-spotify
icon-reddit
icon-guest
icon-blogger
icon-cc
icon-dribbble
icon-evernote
icon-flickr
icon-google
icon-viadeo
icon-instapaper
icon-weibo
icon-klout
icon-linkedin
icon-meetup
icon-vk
icon-rss
icon-skype
icon-twitter
icon-youtube
icon-vimeo
icon-windows2
icon-aim
icon-yahoo
icon-chrome
icon-email3
icon-macstore
icon-myspace
icon-podcast
icon-cloudapp
icon-dropbox
icon-ebay
icon-facebook
icon-github
icon-github-circled
icon-googleplay
icon-itunes
icon-plurk
icon-songkick
icon-lastfm
icon-gmail
icon-pinboard
icon-soundcloud
icon-tumblr
icon-eventasaurus
icon-wordpress
icon-yelp
icon-intensedebate
icon-eventbrite
icon-scribd
icon-posterous
icon-stripe
icon-opentable
icon-cart
icon-print
icon-dwolla
icon-appnet
icon-statusnet
icon-acrobat
icon-drupal
icon-buffer
icon-pocket
icon-bitbucket
icon-lego
icon-login
icon-stackoverflow
icon-hackernews
icon-xing
icon-instagram
icon-angellist
icon-quora
icon-openid
icon-steam
icon-amazon
icon-disqus
icon-plancast
icon-appstore
icon-gowalla
icon-pinterest
icon-fivehundredpx
icon-glass
icon-music2
icon-search3
icon-envelope2
icon-heart3
icon-star3
icon-star-empty
icon-user4
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in2
icon-zoom-out2
icon-off
icon-signal
icon-cog
icon-trash2
icon-home2
icon-file2
icon-time
icon-road
icon-download-alt
icon-download2
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh2
icon-list-alt
icon-lock3
icon-flag2
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag3
icon-tags
icon-book3
icon-bookmark2
icon-print2
icon-camera3
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left2
icon-align-center2
icon-align-right2
icon-align-justify2
icon-list2
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil2
icon-map-marker2
icon-adjust
icon-tint
icon-edit
icon-share2
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left2
icon-arrow-right2
icon-arrow-up2
icon-arrow-down2
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire2
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar3
icon-random
icon-comment2
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-bar-chart
icon-twitter-sign
icon-facebook-sign
icon-camera-retro
icon-key2
icon-cogs
icon-comments
icon-thumbs-up
icon-thumbs-down
icon-star-half
icon-heart-empty
icon-signout
icon-linkedin-sign
icon-pushpin
icon-external-link
icon-signin
icon-trophy
icon-github-sign
icon-upload-alt
icon-lemon
icon-phone3
icon-check-empty
icon-bookmark-empty
icon-phone-sign
icon-twitter2
icon-facebook2
icon-github2
icon-unlock
icon-credit
icon-rss2
icon-hdd
icon-bullhorn2
icon-bell
icon-certificate
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
icon-group
icon-link
icon-cloud3
icon-beaker
icon-cut
icon-copy
icon-paper-clip
icon-save
icon-sign-blank
icon-reorder
icon-list-ul
icon-list-ol
icon-strikethrough
icon-underline
icon-table
icon-magic
icon-truck2
icon-pinterest2
icon-pinterest-sign
icon-google-plus-sign
icon-google-plus
icon-money
icon-caret-down
icon-caret-up
icon-caret-left
icon-caret-right
icon-columns
icon-sort
icon-sort-down
icon-sort-up
icon-envelope-alt
icon-linkedin2
icon-undo
icon-legal
icon-dashboard
icon-comment-alt
icon-comments-alt
icon-bolt2
icon-sitemap
icon-umbrella
icon-paste
icon-lightbulb
icon-exchange
icon-cloud-download
icon-cloud-upload
icon-user-md
icon-stethoscope
icon-suitcase
icon-bell-alt
icon-coffee2
icon-food2
icon-file-alt
icon-building
icon-hospital
icon-ambulance
icon-medkit
icon-fighter-jet
icon-beer
icon-h-sign
icon-plus-sign2
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-desktop
icon-laptop2
icon-tablet2
icon-mobile
icon-circle-blank
icon-quote-left
icon-quote-right
icon-spinner
icon-circle
icon-reply
icon-github-alt
icon-folder-close-alt
icon-folder-open-alt
icon-expand-alt
icon-collapse-alt
icon-smile
icon-frown
icon-meh
icon-gamepad
icon-keyboard
icon-flag-alt
icon-flag-checkered
icon-terminal
icon-code
icon-reply-all
icon-star-half-full
icon-location-arrow
icon-crop2
icon-code-fork
icon-unlink
icon-question
icon-info
icon-exclamation
icon-superscript
icon-subscript
icon-eraser
icon-puzzle
icon-microphone2
icon-microphone-off2
icon-shield
icon-calendar-empty
icon-fire-extinguisher
icon-rocket
icon-maxcdn
icon-chevron-sign-left
icon-chevron-sign-right
icon-chevron-sign-up
icon-chevron-sign-down
icon-html52
icon-css3
icon-anchor
icon-unlock-alt
icon-bullseye
icon-ellipsis-horizontal
icon-ellipsis-vertical
icon-rss-sign
icon-play-sign
icon-ticket
icon-minus-sign-alt
icon-check-minus
icon-level-up
icon-level-down
icon-check-sign
icon-edit-sign
icon-external-link-sign
icon-share-sign
icon-compass
icon-collapse
icon-collapse-top
icon-expand
icon-euro
icon-gbp
icon-dollar
icon-rupee
icon-yen
icon-renminbi
icon-won
icon-bitcoin2
icon-file3
icon-file-text
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-thumbs-up2
icon-thumbs-down2
icon-youtube-sign
icon-youtube2
icon-xing2
icon-xing-sign
icon-youtube-play
icon-dropbox2
icon-stackexchange
icon-instagram2
icon-flickr2
icon-adn
icon-bitbucket2
icon-bitbucket-sign
icon-tumblr2
icon-tumblr-sign
icon-long-arrow-down
icon-long-arrow-up
icon-long-arrow-left
icon-long-arrow-right
icon-apple
icon-windows3
icon-android2
icon-linux
icon-dribbble2
icon-skype2
icon-foursquare2
icon-trello
icon-female
icon-male
icon-gittip
icon-sun2
icon-moon
icon-archive2
icon-bug
icon-renren
icon-weibo2
icon-vk2
icon-line2-user-female
icon-line2-user-follow
icon-line2-user-following
icon-line2-user-unfollow
icon-line2-trophy
icon-line2-screen-smartphone
icon-line2-screen-desktop
icon-line2-plane
icon-line2-notebook
icon-line2-moustache
icon-line2-mouse
icon-line2-magnet
icon-line2-energy
icon-line2-emoticon-smile
icon-line2-disc
icon-line2-cursor-move
icon-line2-crop
icon-line2-credit-card
icon-line2-chemistry
icon-line2-user
icon-line2-speedometer
icon-line2-social-youtube
icon-line2-social-twitter
icon-line2-social-tumblr
icon-line2-social-facebook
icon-line2-social-dropbox
icon-line2-social-dribbble
icon-line2-shield
icon-line2-screen-tablet
icon-line2-magic-wand
icon-line2-hourglass
icon-line2-graduation
icon-line2-ghost
icon-line2-game-controller
icon-line2-fire
icon-line2-eyeglasses
icon-line2-envelope-open
icon-line2-envelope-letter
icon-line2-bell
icon-line2-badge
icon-line2-anchor
icon-line2-wallet
icon-line2-vector
icon-line2-speech
icon-line2-puzzle
icon-line2-printer
icon-line2-present
icon-line2-playlist
icon-line2-pin
icon-line2-picture
icon-line2-map
icon-line2-layers
icon-line2-handbag
icon-line2-globe-alt
icon-line2-globe
icon-line2-frame
icon-line2-folder-alt
icon-line2-film
icon-line2-feed
icon-line2-earphones-alt
icon-line2-earphones
icon-line2-drop
icon-line2-drawer
icon-line2-docs
icon-line2-directions
icon-line2-direction
icon-line2-diamond
icon-line2-cup
icon-line2-compass
icon-line2-call-out
icon-line2-call-in
icon-line2-call-end
icon-line2-calculator
icon-line2-bubbles
icon-line2-briefcase
icon-line2-book-open
icon-line2-basket-loaded
icon-line2-basket
icon-line2-bag
icon-line2-action-undo
icon-line2-action-redo
icon-line2-wrench
icon-line2-umbrella
icon-line2-trash
icon-line2-tag
icon-line2-support
icon-line2-size-fullscreen
icon-line2-size-actual
icon-line2-shuffle
icon-line2-share-alt
icon-line2-share
icon-line2-rocket
icon-line2-question
icon-line2-pie-chart
icon-line2-pencil
icon-line2-note
icon-line2-music-tone-alt
icon-line2-music-tone
icon-line2-microphone
icon-line2-loop
icon-line2-logout
icon-line2-login
icon-line2-list
icon-line2-like
icon-line2-home
icon-line2-grid
icon-line2-graph
icon-line2-equalizer
icon-line2-dislike
icon-line2-cursor
icon-line2-control-start
icon-line2-control-rewind
icon-line2-control-play
icon-line2-control-pause
icon-line2-control-forward
icon-line2-control-end
icon-line2-calendar
icon-line2-bulb
icon-line2-bar-chart
icon-line2-arrow-up
icon-line2-arrow-right
icon-line2-arrow-left
icon-line2-arrow-down
icon-line2-ban
icon-line2-bubble
icon-line2-camcorder
icon-line2-camera
icon-line2-check
icon-line2-clock
icon-line2-close
icon-line2-cloud-download
icon-line2-cloud-upload
icon-line2-doc
icon-line2-envelope
icon-line2-eye
icon-line2-flag
icon-line2-folder
icon-line2-heart
icon-line2-info
icon-line2-key
icon-line2-link
icon-line2-lock
icon-line2-lock-open
icon-line2-magnifier
icon-line2-magnifier-add
icon-line2-magnifier-remove
icon-line2-paper-clip
icon-line2-paper-plane
icon-line2-plus
icon-line2-pointer
icon-line2-power
icon-line2-refresh
icon-line2-reload
icon-line2-settings
icon-line2-star
icon-line2-symbol-female
icon-line2-symbol-male
icon-line2-target
icon-line2-volume-1
icon-line2-volume-2
icon-line2-volume-off
icon-line2-users
icon-et-mobile
icon-et-laptop
icon-et-desktop
icon-et-tablet
icon-et-phone
icon-et-document
icon-et-documents
icon-et-search
icon-et-clipboard
icon-et-newspaper
icon-et-notebook
icon-et-book-open
icon-et-browser
icon-et-calendar
icon-et-presentation
icon-et-picture
icon-et-pictures
icon-et-video
icon-et-camera
icon-et-printer
icon-et-toolbox
icon-et-briefcase
icon-et-wallet
icon-et-gift
icon-et-bargraph
icon-et-grid
icon-et-expand
icon-et-focus
icon-et-edit
icon-et-adjustments
icon-et-ribbon
icon-et-hourglass
icon-et-lock
icon-et-megaphone
icon-et-shield
icon-et-trophy
icon-et-flag
icon-et-map
icon-et-puzzle
icon-et-basket
icon-et-envelope
icon-et-streetsign
icon-et-telescope
icon-et-gears
icon-et-key
icon-et-paperclip
icon-et-attachment
icon-et-pricetags
icon-et-lightbulb
icon-et-layers
icon-et-pencil
icon-et-tools
icon-et-tools-2
icon-et-scissors
icon-et-paintbrush
icon-et-magnifying-glass
icon-et-circle-compass
icon-et-linegraph
icon-et-mic
icon-et-strategy
icon-et-beaker
icon-et-caution
icon-et-recycle
icon-et-anchor
icon-et-profile-male
icon-et-profile-female
icon-et-bike
icon-et-wine
icon-et-hotairballoon
icon-et-globe
icon-et-genius
icon-et-map-pin
icon-et-dial
icon-et-chat
icon-et-heart
icon-et-cloud
icon-et-upload
icon-et-download
icon-et-target
icon-et-hazardous
icon-et-piechart
icon-et-speedometer
icon-et-global
icon-et-compass
icon-et-lifesaver
icon-et-clock
icon-et-aperture
icon-et-quote
icon-et-scope
icon-et-alarmclock
icon-et-refresh
icon-et-happy
icon-et-sad
icon-et-facebook
icon-et-twitter
icon-et-googleplus
icon-et-rss
icon-et-tumblr
icon-et-linkedin
icon-et-dribbble
icon-medical-i-womens-health
icon-medical-i-waiting-area
icon-medical-i-volume-control
icon-medical-i-ultrasound
icon-medical-i-text-telephone
icon-medical-i-surgery
icon-medical-i-stairs
icon-medical-i-radiology
icon-medical-i-physical-therapy
icon-medical-i-pharmacy
icon-medical-i-pediatrics
icon-medical-i-pathology
icon-medical-i-outpatient
icon-medical-i-mental-health
icon-medical-i-medical-records
icon-medical-i-medical-library
icon-medical-i-mammography
icon-medical-i-laboratory
icon-medical-i-labor-delivery
icon-medical-i-immunizations
icon-medical-i-imaging-root-category
icon-medical-i-imaging-alternative-pet
icon-medical-i-imaging-alternative-mri
icon-medical-i-imaging-alternative-mri-two
icon-medical-i-imaging-alternative-ct
icon-medical-i-fire-extinguisher
icon-medical-i-family-practice
icon-medical-i-emergency
icon-medical-i-elevators
icon-medical-i-ear-nose-throat
icon-medical-i-drinking-fountain
icon-medical-i-cardiology
icon-medical-i-billing
icon-medical-i-anesthesia
icon-medical-i-ambulance
icon-medical-i-alternative-complementary
icon-medical-i-administration
icon-medical-i-social-services
icon-medical-i-smoking
icon-medical-i-restrooms
icon-medical-i-restaurant
icon-medical-i-respiratory
icon-medical-i-registration
icon-medical-i-oncology
icon-medical-i-nutrition
icon-medical-i-nursery
icon-medical-i-no-smoking
icon-medical-i-neurology
icon-medical-i-mri-pet
icon-medical-i-interpreter-services
icon-medical-i-internal-medicine
icon-medical-i-intensive-care
icon-medical-i-inpatient
icon-medical-i-information-us
icon-medical-i-infectious-diseases
icon-medical-i-hearing-assistance
icon-medical-i-health-services
icon-medical-i-health-education
icon-medical-i-gift-shop
icon-medical-i-genetics
icon-medical-i-first-aid
icon-medical-i-dermatology
icon-medical-i-dental
icon-medical-i-coffee-shop
icon-medical-i-chapel
icon-medical-i-cath-lab
icon-medical-i-care-staff-area
icon-medical-i-accessibility
icon-medical-i-diabetes-education
icon-medical-i-hospital
icon-medical-i-kidney
icon-medical-i-ophthalmology
icon-medical-womens-health
icon-medical-waiting-area
icon-medical-volume-control
icon-medical-ultrasound
icon-medical-text-telephone
icon-medical-surgery
icon-medical-stairs
icon-medical-radiology
icon-medical-physical-therapy
icon-medical-pharmacy
icon-medical-pediatrics
icon-medical-pathology
icon-medical-outpatient
icon-medical-ophthalmology
icon-medical-mental-health
icon-medical-medical-records
icon-medical-medical-library
icon-medical-mammography
icon-medical-laboratory
icon-medical-labor-delivery
icon-medical-kidney
icon-medical-immunizations
icon-medical-imaging-root-category
icon-medical-imaging-alternative-pet
icon-medical-imaging-alternative-mri
icon-medical-imaging-alternative-mri-two
icon-medical-imaging-alternative-ct
icon-medical-hospital
icon-medical-fire-extinguisher
icon-medical-family-practice
icon-medical-emergency
icon-medical-elevators
icon-medical-ear-nose-throat
icon-medical-drinking-fountain
icon-medical-diabetes-education
icon-medical-cardiology
icon-medical-billing
icon-medical-anesthesia
icon-medical-ambulance
icon-medical-alternative-complementary
icon-medical-administration
icon-medical-accessibility
icon-medical-social-services
icon-medical-smoking
icon-medical-restrooms
icon-medical-restaurant
icon-medical-respiratory
icon-medical-oncology
icon-medical-nutrition
icon-medical-nursery
icon-medical-no-smoking
icon-medical-neurology
icon-medical-mri-pet
icon-medical-interpreter-services
icon-medical-internal-medicine
icon-medical-intensive-care
icon-medical-inpatient
icon-medical-information-us
icon-medical-infectious-diseases
icon-medical-hearing-assistance
icon-medical-health-services
icon-medical-health-education
icon-medical-gift-shop
icon-medical-genetics
icon-medical-first-aid
icon-medical-dental
icon-medical-coffee-shop
icon-medical-chapel
icon-medical-cath-lab
icon-medical-care-staff-area
icon-medical-registration
icon-medical-dermatology

Widgets Setup

Widgets are simple & easy to setup, completely flexible & can be used anywhere on a page. Here's a sample code:

<div class="widget clearfix">
	<h4>Widget Title</h4>
	...
</div>

List of Included Widgets:

Links
Flickr Photostream
Dribbble Shots
Instagram Feed
Posts List
Twitter Feed
Tabbed Widgets
Carousel
Subscribers
Social Icons
Testimonials
Quick Contact
Tags Cloud
Video Embeds
Raw Text/HTML

Info: Most widgets are easy to use & understand and can be checked on the Sidebar Pages, while some tricky ones are explained below.

Flickr Widget

You can show your Flickr Photos from a Username or Group anywhere on your website, simply by writing a Single Line of Code. Some of the important attributes you'll require while setting up this widget are listed below:

data-id - The ID of your Username/Group. Can be obtained from here. Example: 613394@N22
data-count - No. of Images you want to be retrieved. Example: 12
data-type - Type of the ID you have entered. Example: group/user

Code Sample:

<div id="flickr-widget" class="flickr-feed masonry-thumbs" data-id="613394@N22" data-count="16" data-type="group" data-lightbox="gallery"></div>

Dribbble Widget

You can show your Dribbble Shots from a Username anywhere on your website, simply by writing a Single Line of Code. Some of the important attributes you'll require while setting up this widget are listed below:

data-user - The Username from which you want to retrieve shots. You'll need to provide a username only if your data-type is user/follows. Example: envato
data-count - No. of Images you want to be retrieved. Example: 12
data-type - Type of the Shots you want to retrieve. Example: user/follows/list
data-list - Type of List you want to retrieve. You'll need to provide this only if your data-type is list. Example: popular/everyone/debuts

Code Sample:

<div id="dribbble-widget" class="dribbble-shots masonry-thumbs" data-user="envato" data-count="16" data-type="user"></div>

Instagram Widget

You can show your Instagram Photos from a Username/Tags anywhere on your website, simply by writing a Single Line of Code. Some of the important attributes you'll require while setting up this widget are listed below:

data-user - The User ID of your Instagram Account from which you want to retrieve shots. You'll need to provide a User ID only if your data-type is user. Find your Account's User ID from here: http://www.otzberg.net/iguserid/ . Example: 269801886
data-count - No. of Images you want to be retrieved. Example: 12
data-type - Type of the Photos you want to retrieve. Example: user/tag/popular
data-tag - Tag of the Photos you want to retireve. You'll need to provide a tag only if your data-type is tag. Example: beautiful/nature/morning etc.
data-sortBy - Sort your retrieved Photos using these Parameters. Example: none/most-recent/least-recent/most-liked/least-liked/most-commented/least-commented/random
data-resolution - Choose your Image Resolution. Example: thumbnail/low_resolution/standard_resolution

Code Sample:

<div id="instagram-photos" class="instagram-photos masonry-thumbs col-5" data-user="269801886" data-count="15" data-type="user"></div>

Note: Make sure that you always have a Unique ID for your Instagram Feed or they will not run at all.

Twitter Widget

You can show your Twitter Feed from a Username anywhere on your website. Some of the important attributes you'll require while setting up this widget are listed below:

username - The Username from which you want to retrieve tweets. Example: envato
count - No. of Twwets you want to be retrieved. Example: 3

Code Sample:

<ul class="iconlist twitter-feed" data-username="envato" data-count="2">
	<li></li>
</ul>

Twitter Feed Avatars

You can also show the Twitter User Avatars on a Twitter Feed. Code Sample:

<ul class="iconlist twitter-feed twitter-feed-avatar" data-username="envato" data-count="2">
	<li></li>
</ul>

Code Sample for a Twitter Feeds Scroller:

<div class="fslider customjs testimonial twitter-scroll twitter-feed" data-username="envato" data-count="2" data-animation="slide" data-arrows="false">
	<i class="i-plain i-large color icon-twitter nobottommargin" style="margin-right: 20px;"></i>
	<div class="flexslider" style="width: auto;">
		<div class="slider-wrap">
			<div class="slide"></div>
		</div>
	</div>
</div>

Twitter oAuth Authentication Setup

The new Twitter API v1.1 no longer supports unauthenticated User Timeline calls so you'll have to now authenticate to OAuth so that you can show your Twitter Feeds on your Websites. Follow the instructions below to setup your authentication:

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.
1. The name and description can be anything you like really, but you can't use 'Twitter' in the name.
2. The website field can be your main website and doesn't have to be the site where your Twitter feed or feeds are located.
3. 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.

Follow these steps after you create your Twitter APP successfully as described above:

Open the include/twitter/tweets.php file.

Enter your Twitter APP Details as mentioned below:

$consumerkey = ""; // Twitter App - Consumer Key for OAuth
$consumersecret = ""; // Twitter App - Consumer Secret for OAuth
$accesstoken = ""; // Twitter App - Access Token for OAuth
$accesstokensecret = ""; // Twitter App - Access Token Secret for OAuth

and Save the file.

Note Remember to set the permissions of the include/twitter/cache folder to 755 so that the Twitter Feed cache files can be saved otherwise your Twitter Feeds won't work.

Contact Forms & Mailchimp Subscriptions

You can setup Contact Forms & Mailchimp Subscriptions anywhere on your Website by simply Copy/Pasting the Sample Code present in the HTML Files.

Options:

data-alert-type - Type of Alert after Form Submission. Example: inline/notify
data-loader - Type of Processing Loader when the Submit Button is Clicked. Example: button/form

Contact Forms

Just change your Email Address in the include/sendemail.php or include/quickcontact.php File to start receiving Form Responses.

$toemails[] = array(
	'email' => 'username@website.com', // Your Email Address
	'name' => 'Your Name' // Your Name
);

How to Setup Multiple Email Address?
For each New Email Address to which you want the Form Response to be delivered simply duplicate the Above Code on a new Line.

reCaptcha Settings

To setup reCaptcha Form Protection, you will need to obtain a Set of Site/Secret Keys from the Google reCaptcha Website. Then follow the Steps below to Setup the Keys for your Form:

Add the following code to your Form and set up the Site Key:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="your-recaptcha-site-key-here"></div>

Find the following code in the include/sendemail.php or include/quickcontact.php File and add your Secret Key:

// Add this only if you use reCaptcha with your Contact Forms
$recaptcha_secret = 'your-recaptcha-secret-key-here'; // Your reCaptcha Secret

Not receiving Form Emails?

If you are not receiving Emails from your Forms then chances are that your Server Configuration doesn't support PHP mail() function. But you can use SMTP Authentication. Just find the following line of code:

$mail = new PHPMailer();

Add this after the above line:

$mail->IsSMTP();
$mail->Host = "mail.yourdomain.com";
$mail->SMTPDebug = 2;
$mail->SMTPAuth = true;
$mail->Port = 26;
$mail->Username = "yourname@yourdomain.com";
$mail->Password = "yourpassword";

MailChimp Subscriptions Setup

To setup your Mailchimp Newsletter Signup Form, you will have to add your API Key & your List ID to include/subscribe.php File.

$apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-us5'; // Your MailChimp API Key
$listId = 'xxxxxxxx'; // Your MailChimp List ID

To add a Subscriber to a Different List ID, you can simply replace the Form Action to the following code:

<form action="include/subscribe.php?list=your-list-id" ...

Google Custom Search Setup

To setup your Google Custom Search, you will have to add your cx key in the search.html File. Login to Google Custom Search to get your Search Engine cx key. After obtaining your cx key, Open the search.html and change the following cx value:

var cx = '006140480002229796823:xbltpcavzi0';

Images

Mockups

PSDs

Download PSDs

Note: If you need the Default Mockups PSD Files used in the Canvas Template, you can Download them here

jQuery

CSS & Fonts

Bootstrap
Animation
Font-Awesome (Font Icons)
Icomoon (Font Icons)
Linecons (Font Icons)
Feather (Font Icons)
Google Fonts
Raleway Font
Crete Round Font
Lato Font

PHP

Version 4.0.1

Released on 19th March, 2016

Fixed:

Issue with Masonry Thumbs not aligning properly on Full Width Grids
Issue with Owl Sliders not displaying on Slider Areas
Issue with Page Sub Menu inside Content Area not getting Sticky properly
Issue with Side Panel Push Open Issue with .slider-parallax-inner
Issue with One Page Menu Scrolling on Mobile Devices
Issue with Sub Menu Background Hover on Mobile Devices

Changed Files:

CSS
- style.css
  - Code Update #side-panel related Code Blocks
  - Code Update #page-menu.sticky-page-menu related Code Blocks
- one-page/onepage.css
  - Code Update #side-panel related Code Blocks
- css/responsive.css
  - Code Update #primary-menu ul ul li:hover > a Code Block
jQuery
- js/functions.js
  - Code Update setFullColumnWidth: function( element ) Function Block
  - Code Update onePageScroll: function() Function Block
  - Code Update sliderParallaxDimensions: function() Function Block
  - Code Update carousel: function() Function Block

Version 4.0

Released on 1st March, 2016

Note: We have made Lot of CSS/HTML/JS Changes and Rebuilt some of the Components from scratch for Unmatchable Flexibility & Speed Improvements. Please refer to Documentation > Start > Upgrading from v3 to v4 Section for Complete List of Changes. For small code changes, it is recommended that you use a File Compare Software.

Added:

Ability to Add Selected Widgets in Mega Menus
Ability to add Mixed Column Mega Menus
Ability to Add Unlimited Portfolios on a Single Page with Filters
Ability to Add Unlimited Shops on a Single Page
Global Function for Activating Isotope & Filter on any Grid
Speed Improvements, Javascript Optimizations & Less File Sizes
2 Custom Inner Pages for the Travel Demo
Shortcode for Date & Time Pickers
Shortcode for Bootstrap Editable Fields
Shortcode for Bootstrap File Uploads
Shortcode for Range Sliders
Shortcode for Star Ratings
Shortcode for Select Picker & Select Boxes
Shortcode for Styled Toggle Switcher, Radio and Checkboxes
Bootstrap TypeAhead Component
Data Tables Component
20+ Contact Form Templates with Google reCaptcha, File Uploads & Inline Submission Alerts
Option to Display a Alternate Menu in Mobile Devices
Facebook Video & HTML5 Video Embed Examples
Option to Add Multiple Email Address for Form Emails
Global Function for Owl Carousel for Easy Carousel Initialization
Global Function for Canvas Slider for Easy Slider Initialization
Global Function for Contact Forms
Global Function for Quick Contact Forms
Global Function for Subscription Forms
Contact, Quick Contact and Subscription Forms now show Message Specific Alerts
Added New Placeholder Images in Package for Better Development
GoToTop New Options for Easily Modifying Settings
Option to Enable/Disable GoToTop on Mobile Devices
Option to Show Avatars in Twitter Feeds
Boxed Layout Template in the Package
XXL Size for Styled Icons
Option to Show Arrows in Main Level Primary Menu for Dropdowns
Option to enable Element Animate Out

Updated:

Bootstrap Updated to v3.3.6
Swiper Slider Plugin Updated to Latest Version
Revolution Slider Updated to Latest Version
Owl Carousel Plugin Updated to Latest Version
Magnific Popup Plugin Updated to Latest Version
jQuery Validation Plugin Updated to Latest Version
jQuery UI Updated to Latest Version
Toastr Plugin Updated to Latest Version
Morphext Plugin Updated to Latest Version
MB YTPlayer Plugin Updated to Latest Version
Instafeed Plugin Updated to Latest Version
Jribbble Plugin Updated to Latest Version
Flex Slider Plugin Updated to Latest Version
Mailchimp API Updated to v3.0
Dribbble Widget Function

Fixed:

Issue with Slider Parallax on Canvas Slider on Mac OS
Issue with Sticky Menu & Sticky PageMenu on Page Reload on the Middle of the Page
Issue with Background Position of Parallax Images on Mobile Devices
Issue with Youtube BG Video not working in Canvas Slider
Issue with Backward/Forward Cache on Safari Browsers
Issue with Dribbble Widget not working
Issue with .mpost on Smart Phone Devices
Issue with Post Grid Row Alignment on Responsive Devices
Issue with Multi Line Toggle and Accordion Titles
Issue with Video Placeholder Image on Mobile Devices for Canvas Slider
Issue with Side Panel disabling Body Scroll on Android Devices
Issue with Scroll To Highlighting Function
Issue with Google Maps with Transparent Headers on Mobile Devices
Issue with Windows Mobile Menu Trigger Icon visibility on Mobile Devices
Issue with Auto Height on Flex Slider Fade Effect
Issue with Side Navigation Arrow alignment
Issue with Notifications Trigger & Visibility
Issue with Page Menu Sticky on Mobile Devices
Issue with Copyrights Positioning
Issue with Nav Tree Current Item Child Links

Changed Files:

CSS
- style.css
  - Code Update .slider-parallax CSS Block
  - Code Update #primary-menu CSS Block
  - Code Update .sticky-header CSS Block
  - Code Update #portfolio CSS Block updated and renamed to .portfolio
  - Code Update #shop CSS Block updated and renamed to .shop
  - Added .i-xxlarge Code Block
  - Code Update .nav-tree li.current > ul CSS Block
  - Code Update #copyrights CSS Block
  - Code Update .toggle CSS Block
  - Added .twitter-feed-avatar CSS Block
  - Added .widget p CSS Block
  - Added .mobile-primary-menu CSS Block
  - Code Update .mobile-parallax CSS Block
- css/responsive.css
  - Code Update Updated All the Codes
- css/bootstrap.css
  - Code Update Updated to the Latest Version
- css/dark.css
  - Code Update Updated All the Codes
- css/colors.css
  - Code Update Updated All the Codes
jQuery
- js/functions.js
  - Code Update Updated all the Codes for more Robustness
- js/plugins.js
  - Code Update Bootstrap to Latest Version
  - Code Update Swiper Slider Plugin to Latest Version
  - Code Update Owl Carousel Plugin to Latest Version
  - Code Update Magnific Popup Plugin to Latest Version
  - Code Update jQuery Validation Plugin to Latest Version
  - Code Update jQuery UI Plugin to Latest Version
  - Code Update Toastr Plugin to Latest Version
  - Code Update Morphext Plugin to Latest Version
  - Code Update Instafeed Plugin to Latest Version
  - Code Update Jribbble Plugin to Latest Version
  - Code Update Flex Slider Plugin to Latest Version
HTML
- Code Update Updated All the HTML Files
PHP
- Code Update Updated All the PHP Form Processing and Subscription Files
LESS
- Code Update Updated All the LESS Files

Version 3.1.1

Released on 12th December, 2015

Added:

XMAS Demo

Fixed:

Issue with Revolution Slider on Home Shop Template
Issue with Revolution Slider on One Page Templates with Revolution Slider
Issue with Slider Text and Mobile Image on Home App Showcase Template
Issue with Duplicate <head> Tag and Thumbnails Filter on Revolution Slider Templates
Issue with Incorrect CSS Files Linking in menu-5.html Template
Issue with FlexSlider Thumbs Auto-Size
Issue with .i-overlay Icon Placement
Issue with One Page Menu with Side Headers

Changed Files:

CSS
- style.css
  - Code Update .flex-control-nav.flex-control-thumbs li, .flex-control-nav.flex-control-thumbs li img Code Block
  - Code Update .i-overlay i Code Block
- css/responsive.css
  - Removed .full-screen:not(.force-full-screen) .container.vertical-middle Code Block from @media (max-width: 991px) Media Query Breakpoint
- css/colors.css
  - Code Update #page-menu ul ul Added to background-color
- css/colors.php
  - Code Update #page-menu ul ul Added to background-color

LESS

less/sliders.less

Code Update Following Code Block:

.fslider {
	&.flex-thumb-grid {
		.flex-control-nav {
			&.flex-control-thumbs

less/shortcodes/styled-icons.less
- Code Update .i-overlay > i Code Block

less/responsive.less

Removed Following Code Block:

.full-screen {
	&:not(.force-full-screen) {
		.container {
			&.vertical-middle {
				width: 750px !important;
			}
		}
	}
}

jQuery
- js/functions.js
  - Code Update onePageCurrentSection: function() Function Block
  - Code Update SEMICOLON.documentOnReady > windowscroll: function() Function Block updated with pageMenuOffset Related Codes
HTML
- demo-xmas.html
  - Added XMAS Demo Layout
- index-shop.html
  - Code Update Fixed Issue with Revolution Slider
- one-page/op-revolution-fullwidth.html
  - Code Update Fixed Issue with Revolution Slider
- one-page/op-revolution-fullscreen.html
  - Code Update Fixed Issue with Revolution Slider
- menu-5.html
  - Code Update Fixed Issue with Incorrect CSS Files Linking
- index-app-showcase.html
  - Code Update Fixed Issue with Slider Text and Mobile Image
- rs-demo-*.html
  - Code Update Fixed Issue with Duplicate <head> Tag and Thumbnails Filter

Version 3.1

Released on 28th November, 2015

Note: Revolution Slider Plugin Upgrades requires some Code Changes. You may need to rebuild your Revolution Sliders. Please refer to the Revolution Slider Documentation to check what codes needs to be changed or use the Revolution Slider Templates included in the Package.

Added:

80+ Premium Slider Templates for Revolution Slider
Dropdown Menu functionality for Page SubMenus
Page SubMenus can now be Individually Sticky and not dependant on the Primary Header

Updated:

Revolution Slider to Latest Version

Changed:

Parallax Plugin only initializes if Parallax Element present on the Page
Cookie Notification Function added to js/functions.js

Fixed:

Issue with Sticky Footer on Boxed Layout
Issue with DropDown Arrows on Top Bar Links
Issue with Sticky Header Background Color on Touch Devices
Issue with Cookie Notification Bar blinking on Page Load
Issue with Dark Style Cookie Notification Bar

Changed Files:

CSS
- style.css
  - Added #page-menu related codes
  - Added .device-lg.sticky-footer:not(.stretched) #footer and .device-md.sticky-footer:not(.stretched) #footer Code Block
  - Code Update .top-links li i.icon-angle-down Code Block
- css/dark.css
  - Code Update .dark #cookie-notification Code Block
jQuery
- js/functions.js
  - Code Update parallax: function() Function Block updated
  - Code Update menufunctions: function() Function Block updated
  - Code Update SEMICOLON.documentOnReady > windowscroll: function() Function Block updated
  - Code Update stickyMenu: function( headerOffset ) Code Block
  - Added stickyPageMenu: function( pageMenuOffset ) Code Block
  - Added SEMICOLON.header.stickyPageMenu(); to SEMICOLON.header > init: function() Function Block
  - Code Update parallax: function() Function Block updated
  - Added $cookieNotification = $('#cookie-notification') to Variable List
  - Added cookieNotify: function() Code Block
  - Added SEMICOLON.widget.cookieNotify(); to SEMICOLON.widget > init: function() Code Block
  - Code Update revolutionSliderMenu: function( onWinLoad ) Function Block
- js/plugins.js
  - Code Update
HTML
- rs-demo-*.html
  - Added 80+ Premium Slider Templates for Revolution Slider
- page-submenu.html
  - Code Update DropDown Examples Added to Page SubMenu
- cookies.html
  - Code Update Cookie Notification Bar codes updated
Plugins
- include/rs-plugin
  - Code Update All the Revolution Slider Plugin files updated to the Latest Version

Version 3.0.1

Released on 10th November, 2015

Added:

Mixed Lightbox Gallery Example
Negative Height Offset for Full Screen
Appointments Form Processing PHP File added in Package Files

Updated:

FitVids Plugin updated to Latest Version
Superfish Plugin updated to Latest Version
InstaFeed Plugin updated to Latest Version
Countdown Plugin updated to Latest Version
EasyPieChart Plugin updated to Latest Version
Morphext Plugin updated to Latest Version
Infinite Scroll Plugin updated to Latest Version
PHPMailer Plugin updated to Latest Version

Fixed:

Issue with Rounded Skills not loading properly if already in view
Issue with iPad View in Media Agency Demo
Issue with Semi Transparent Dark Header while Header Sticky on Window Load
Issue with Page SubMenu top positioning when Header Static Sticky
Issue with Full Screen FlexSlider on Travel and Wedding Demos

Changed Files:

CSS
- style.css
  - Added #header.static-sticky ~ #page-menu.sticky-page-menu #page-menu-wrap { top: 100px; }
- css/responsive.css
  - Added .sticky-responsive-menu #header-wrap in @media (max-width: 991px) Media Query Breakpoint
- demos/media-agency/media-agency.css
  - Added .device-sm #wrapper CSS Line
jQuery
- js/functions.js
  - Code Update roundedSkill: function() Function Block updated
  - Code Update fullscreen: function() Function Block updated
  - Code Update swiperSliderMenu: function( onWinLoad ) Function Block updated
  - Code Update revolutionSliderMenu: function( onWinLoad ) Function Block updated
  - Code Update headerSchemeChanger: function( activeSlide, onWinLoad ) Function Block updated
  - Code Update SEMICOLON.documentOnLoad > init: function() Function Block and replaced
```
SEMICOLON.slider.swiperSliderMenu();
SEMICOLON.slider.revolutionSliderMenu();
```
    with
```
SEMICOLON.slider.swiperSliderMenu(true);
SEMICOLON.slider.revolutionSliderMenu(true);
```
- js/plugins.js
  - Code Update FitVids Plugin updated to Latest Version
  - Code Update Superfish Plugin updated to Latest Version
  - Code Update InstaFeed Plugin updated to Latest Version
  - Code Update Countdown Plugin updated to Latest Version
  - Code Update EasyPieChart Plugin updated to Latest Version
  - Code Update Morphext Plugin updated to Latest Version
  - Code Update Infinite Scroll Plugin updated to Latest Version
HTML
- lightbox.html
  - Code Update Examples Updates
- demo-medical.html
  - Code Update Appointment Form codes
- demo-travel.html
  - Code Update Flex Slider Markup Codes
- index-wedding.html
  - Code Update Flex Slider Markup Codes
PHP
- include/phpmailer
  - Code Update PHPMailer Plugin updated to Latest Version
- demos/medical/include
  - Added Appointments Form PHP Processing File
LESS
- less/header.less
  - Code Update #primary-menu ul ul a
  - Added #header.static-sticky ~ #page-menu.sticky-page-menu #page-menu-wrap { top: 100px; }
- less/responsive.less
  - Added .sticky-responsive-menu #header-wrap in @media (max-width: 991px) Media Query Breakpoint

Version 3.0

Released on 28th September, 2015

Added:

New Demo for Medical
New Demo for Media Agency
New 10+ One-Page Related Demo Layouts
5+ Window onLoad Modal Examples
100+ Core PSD Files
Option to show Alternate Logo for Sticky Header and Mobile Devices
Side Panel Examples
Sticky Footer and 1 New Footer Layout
Primary Menu Sub Menu Items now supports Multi-Line Text
More Options for Instagram Widget Photos Retreival
Inline Content Lightbox Type
Cookie Notification Bar
Option to add Icon Color for Social Icons
Option to Disable Smooth Scroll
Responsive Class Functionality
Navigation Tree now supports OnHover Functionality
Option to Define Time Out to Disable Page Loading Transition
Primary Menu now Supports Lightbox Links
Option to Disable Thumbs/Pagination Dots Reveal Animation on FlexSlider
Option to Highlight Section when data-scrollto Destination reached
Smooth Height Enable/Disable Option for Flex Slider
Testimonials Grid 1 Layout
New Helper Classes for Faster Editing
Option to define Custom Caption Position for Canvas Slider
Documentation for Side Panel
Documentation for Modal on Load
Documentation for Responsive Classes
Documentation for Favicons and Apple Touch Icons

Updated:

Bootstrap Updated to v3.3.5
IsoTope Plugin to Latest Version
RTL Files for New Base Files
Documentation for Instagram Widget

Changed:

.light Class to .dark Class in the Calendar Related Files for better Consistency
Page Submenu Styling
Moved all the Helper Classes from one-page/onepage.css to Main style.css for Global Access
Removed Responsive Device Support for Maximum Scale

Fixed:

Issue with PageTransition triggering on Same Page # Links
Minor Issue with .vertical-middle Class Inline Styling
Issue with .css3-spinner > .css3-spinner-ball-pulse-sync Alignment
Issue with .countdown-inline Text Transform property
Issue with Start/Stop parameters of the Youtube Background Player
Issue with Instagram Feeds not retrieving feeds from the correct username
Issue with Primary Menu Sub Menu Item texts overlapping
Issue with Button in Mobile Devices in contact-5.html Template
Issue with Portfolio Parallax Items on Mobile Devices
Issue with Bootstrap Pagination Links Color
Issue with Bootstrap Nav Pills Active Background Color not matching with Theme Color
Issue with Contact Form Processing Files when using Custom Buttons

Changed Files:

CSS
- style.css
  - Code Update #page-menu nav li a CSS Block updated
  - Added .sticky-footer Related Codes
  - Code Update #primary-menu ul ul a CSS Block
  - Code Update #primary-menu ul li .mega-menu-content.style-2 ul a CSS Block
  - Code Update .css3-spinner > .css3-spinner-ball-pulse-sync Block Updated
  - Added #cookie-notification Related Codes
  - Added .testimonials-grid.grid-1 li Related Codes
  - Code Update .countdown-inline CSS Block. changed .text-transform property to inherit
  - Added body:not(.device-sm):not(.device-xs):not(.device-xxs) #primary-menu.style-2.center > ul CSS Block
  - Added New Helper Classes: .lowercase, .capitalize, .nott, .image-scale, .grayscale CSS Blocks
  - Added All the Helper Classes from one-page/onepage.css
  - Added Codes related to .pagination
  - Added Codes related to .si-text-color
- one-page/onepage.css
  - Added .testimonials-lg Related Codes
  - Code Update Updated #header.full-header.border-full-header Related Codes
  - Code Update .button.button-border.button-circle renamed to .button.button-circle
  - Removed All the Helper Classes and moved them to the Main style.css
- css/calendar.css
  - Code Update Renamed .light Class to .dark Class
- css/dark.css
  - Added #cookie-notification Related Codes
- css/fonts.css
  - Added New Helper Classes: .font-primary, .font-secondary & .font-body
- css/colors.css
  - Added Codes related to .pagination
  - Added Codes related to .nav-pills > li.active > a
jQuery
- js/functions.js
  - Code Update pageTransition: function() Function Block updated
  - Code Update lightbox: function() Function Block updated and option for Inline Lightbox added
  - Code Update youtubeBgVideo: function() Function Block updated
  - Code Update animations: function() Function Block updated and added if( element.parents('.fslider.no-thumbs-animate').length > 0 ) { return true; }
  - Code Update linkScroll: function() Function Block updated
  - Code Update navTree: function() Function Block updated
  - Code Update verticalMiddle: function() Function Block updated
  - Added stickyFooter: function() Function Block Added to SEMICOLON.initialize
  - Added SEMICOLON.initialize.stickyFooter(); added to SEMICOLON.documentOnResize > init: function() and SEMICOLON.documentOnLoad > init: function()
  - Added modal: function() Function Block Added to SEMICOLON.initialize
  - Added SEMICOLON.initialize.modal(); added to SEMICOLON.documentOnLoad > init: function()
  - Added dataResponsiveClasses: function() Function Block Added to SEMICOLON.initialize
  - Added SEMICOLON.initialize.dataResponsiveClasses(); added to SEMICOLON.initialize > init: function() and SEMICOLON.documentOnResize > init: function()
  - Code Update loadFlexSlider: function() Function Block
  - Renamed SEMICOLON.header.darkLogo() Function to SEMICOLON.header.logo()
  - Renamed darkLogo: function() Function to logo: function() and Function Block updated
  - Added $parallaxPortfolioEl related Codes
  - Code Update captionPosition: function() Function Block. $slider.find('.slider-caption') Updated to $slider.find('.slider-caption:not(.custom-caption-pos)')
  - Code Update onePageCurrentSection: function() Code Block
- js/plugins.js
  - Added jQuery Colors Plugin
  - Code Update Animsition to Latest Version
  - Code Update Flex Slider to Latest Version
  - Code Update Youtube BG Player to Latest Version
  - Code Update Isotope to Latest Version
  - Code Update Smooth Scroll Plugin
  - Added Instafeed Plugin
  - Removed Spectagram Plugin
  - Added Cookie Plugin
PHP
- css/colors.php
  - Added Codes related to .pagination
  - Added Codes related to .nav-pills > li.active > a
- All Form Related PHP Files
  - Code Update $_SERVER['REQUEST_METHOD'] == 'POST'
HTML
- demo-medical.html
  - Added New Niche Demo
- demo-media-agency.html
  - Added New Niche Demo
- responsive-class.html
  - Added New Template
- logo-changer.html
  - Added New Template
- modal-onload.html
  - Added New Template
- modal-onload-iframe.html
  - Added New Template
- modal-onload-cookie.html
  - Added New Template
- modal-onload-subscribe.html
  - Added New Template
- modal-onload-common-height.html
  - Added New Template
- side-panel.html
  - Code Update Enhanced Example for better understanding of Side Panels
- side-panel-light.html
  - Added New Template
- side-panel-right-overlay.html
  - Added New Template
- side-panel-left-overlay.html
  - Added New Template
- side-panel-left-push.html
  - Added New Template
- cookie.html
  - Added New Template
- sticky-footer.html
  - Added New Template
- footer-7.html
  - Added New Template
- preloaders.html
  - Added New Template
- lightbox.html
  - Code Update Added Inline Lightbox type Code
- events-calendar.html
  - Code Update Renamed .light Class to .dark Class
- index-events.html
  - Code Update Renamed .light Class to .dark Class
- contact-5.html
  - Code Update Responsive Issue for Button Click here to Send an Email

Version 2.5

Released on 10th June, 2015

Added:

RTL Layout Compatibility
Side Panel Trigger from any Linking Element
Side Panel can now open from Left/Right Sides
Side Panel now supports Push or Overlay on open
New Page Loading Animations
Option to add any Color to Page Loading Animations
Option to add Unique List IDs per Subscription Form for Mailchimp
Campaign Monitor Subscription Forms
Template for Jobs Form accepting File Uploads
Option to make the Page SubMenu Invidually Sticky
Option to Initialize Flex Slider with Custom jQuery
Option to have a Custom Class for Responsive Headers
Centralised Template for all the Widgets
Much Easier & Faster way to create Twitter Feeds including Lists & Sliders

Updated:

Updated jQuery
Bootstrap to v3.3.4
jQuery IsoTope Plugin
Youtube Video Plugin
Animate.css Plugin
jQuery Chart Plugin
Animsition Plugin
Documentation for Subscription Forms
Documentation for Side Panel

Changed:

Simplified Twitter Feed Code Structure
Parallax Function Call Options

Fixed:

Issue with Sticky Menu extra removeStickyness()
Side Panel Better Browser Compatibility
Page SubMenu glitch on Responsive Devices
Issue with Header Offset returning jQuery Error when there is no Header present
Issue with Sub Title Menu separators
Issue with Full Screen Slider Parallax on LESS Setup

Changed Files:

CSS
- style.css
  - Code Update #portfolio.portfolio-parallax .portfolio-item .portfolio-image CSS Block updated and background-attachment: fixed; added to it
  - Added #header.no-sticky ~ #page-menu.sticky-page-menu #page-menu-wrap CSS Block
  - Code Update #side-panel related codes
  - Added .css3-spinner related codes
- css/responsive.css
  - Added #page-menu #page-menu-wrap CSS Block
- css/bootstrap.css
  - Code Update Updated to the Latest Version
- css/animate.css
  - Code Update Updated to the Latest Version
- css/dark.css
  - Added .css3-spinner related codes
jQuery
- js/functions.js
  - Code Update Removed extra check of SEMICOLON.header.removeStickyness(); from stickyMenu: function( headerOffset ) Function Block >
  - Code Update removeStickyness: function() Function Block
  - Code Update sidePanel: function() Function Block
  - Code Update loadFlexSlider: function() Function Block and changed $('.fslider').find('.flexslider'); to $('.fslider:not(.customjs)').find('.flexslider');
  - Added twitterFeed: function() Function Block
  - Added SEMICOLON.widget.twitterFeed(); Function Call to init: function() Function Block of the SEMICOLON.widget Function Set
  - Added responsiveMenuClass: function() Function Block
  - Added SEMICOLON.header.responsiveMenuClass(); to SEMICOLON.documentOnLoad > init: function()
  - Code Update windowscroll: function() Function Block. Replaced var headerOffset and var headerWrapOffset with new Code
  - Code Update pageTransition: function() Function Block
  - Code Update menufunctions: function() Function Block
  - Code Update parallax: function() Function Block
  - Code Update fullScreen: function() Function Block
- js/plugins.js
  - Code Update jQuery to Latest Version
  - Code Update Bootstrap to Latest Version
  - Code Update Youtube jquery.mb.YTPlayer to Latest Version
  - Code Update Isotope to Latest Version
  - Code Update Animsition to Latest Version
  - Code Update ChartsJS to Latest Version
HTML
- jobs-file.html
  - Added New Template
- widgets.html
  - Added New Template
- All Files with Twitter Feed
  - Code Update Twitter Feed Code Structure
- All Files with Side Panel
  - Code Update Added the .side-panel-trigger Class to the Side Panel Trigger Elements
PHP
- include/subscribe.php
  - Added $listId = $_GET['list']; for accepting different List ID per Subscription Form
- include/subscribe-cm.php
  - Added API Integration for Campaign Monitor for adding Subscribers
  - Added campaign-monitor Folder to include Folder
LESS
- less/header.less
  - Code Update Side Panel related Codes

Version 2.1

Released on 1st April, 2015

Added:

New Demo for Construction
New Demo for Travel
New Demo for Minimal Agency
Multi Level Navigation Tree Widget
New Tab Styles
Option for Justify Tabs
Options to define Columns for Masonry Thumbs in Responsive Mode
Bordered Transparent Full Header for One Page Module
Auto Detect Content Size to always keep Footer at the Bottom

Changed:

Improvements to Side Panel on Boxed Layouts
Improvements to Portfolio Description Overlay on Window Resize

Fixed:

Issue with Sticky Header on iPad Landscape Orientation on One Page
Issue with Tooltips shifting position of Certain Elements
Issue with Portfolio Parallax Images flickering on Certain Browsers
Issue with Side Panel Scrolling on Mac
Issue with Responsiveness of Description Buttons
Issue with Additional Icons inside Icon Lists
Issue with Featured Box Icon Effects in LESS Files

Changed Files:

CSS
- style.css
  - Code Update #portfolio.portfolio-parallax .portfolio-item .portfolio-image CSS Block updated and background-attachment: fixed; added to it
  - Code Update #side-panel related codes
  - Added Codes related to .nav-tree
  - Added Codes related to .tabs-alt, .tabs-tb and .tabs-bb
  - Removed Code Block:
```
.gmap .gmnoprint,
.gmap .gm-style-cc { display: none !important; }
```
- css/colors.css
  - Added Codes related to .tabs-tb and .tabs-bb
  - Added Codes related to .nav-tree
- css/font-icons.css
  - Code Update .iconlist Class Updated to allow Additional Icons inside List Texts
- css/fonts.css
  - Added Codes related to .nav-tree
- css/dark.css
  - Added Codes related to .nav-tree
- css/responsive.css
  - Added Codes related to .button-desc inside @media (max-width: 767px) Media Query
- one-page/onepage.css
  - Added Codes related to .border-full-header
jQuery
- js/functions.js
  - Code Update !SEMICOLON.isMobile.any() check removed from stickyMenu: function( headerOffset ) Function Block
  - Code Update Updated the extra: function() Function Block and changed $('[data-toggle="tooltip"]').tooltip(); to $('[data-toggle="tooltip"]').tooltip({container: 'body'});
  - Added SEMICOLON.portfolio.portfolioDescMargin(); to SEMICOLON.documentOnResize > init: function()
  - Added tabsJustify: function() Function Block
  - Added SEMICOLON.widget.tabsJustify(); added to SEMICOLON.documentOnResize > init: function() and SEMICOLON.widget > init: function()
  - Code Update defineColumns: function( element ) Function Block
  - Added navTree: function() to SEMICOLON.widget
  - Added SEMICOLON.widget.navTree(); to SEMICOLON.widget > init: function()
  - Added stickFooterOnSmall: function() to SEMICOLON.initialize
  - Added SEMICOLON.initialize.stickFooterOnSmall(); to SEMICOLON.documentOnLoad > init: function()
HTML
- demo-construction.html
  - Added New Demo Layout
- demo-travel.html
  - Added New Demo Layout
- demo-agency.html
  - Added New Demo Layout
- side-panel.html
  - Code Update Added Multi Level Navigation Tree Widget to Side Panel
- tabs.html
  - Code Update New Tab Styles Added
PHP
- css/colors.php
  - Added Codes related to .tabs-tb and .tabs-bb
  - Added Codes related to .nav-tree
LESS
- less/header.less
  - Code Update Side Panel related Codes
- less/shortcodes/feature-box.less
  - Code Update All the Codes updated to fix issue with Featured Box Icon Effects
- less/shortcodes/tabs.less
  - Added Codes related to .tabs-alt, .tabs-tb and .tabs-bb
- less/widgets.less
  - Added Codes related to .nav-tree
- less/dark.less
  - Added Codes related to .nav-tree

Version 2.0

Released on 27th February, 2015

Added:

30 Dedicated One Page Templates
HTML5 Video Placeholder for Mobile Devices
Better Support for Team Overlay Social Icons
Dedicated Mobile Menu for Windows Mobile Devices
Option to Define Sticky Header Offset
Option to disable to Pause on Hover for Flex Slider
Option to add more than one image in Masonry Thumbs data-big

Changed:

Improvements to Side Panel
Improvements to Slider Parallax
Improvements to Common Height Functionality
Improvements to HTML5 Video Functionality

Fixed:

Issue with Widget Paragraphs resizing Lead Texts
Issue with .uppercase Class
Issue with Vertical middle Functionality
Issue with Small Centered Featured Box
Issue with Menus on Windows Mobile Devices
Issue with Parallax Image Initialization

Changed Files:

CSS
- style.css
  - Code Update :not(.lead) CSS check for .widget p
  - Code Update !important added to .uppercase Class
  - Code Update left: 0; added to .vertical-middle Class
  - Code Update Codes related to Side Panel Updated
  - Added .video-placeholder CSS Block
  - Removed #primary-menu li:hover > ul { display: block; }
  - Added .feature-box.fbox-center.fbox-small CSS Block
  - Code Update .team-overlay .social-icon CSS Block Updated
- css/responsive.css
  - Added Codes related to .windows-mobile-menu
jQuery
- js/functions.js
  - Code Update Updated the stickyMenu: function( headerOffset ) Function Block
  - Removed SEMICOLON.widget.parallax(); from SEMICOLON.widget > init: function()
  - Added SEMICOLON.widget.parallax(); to SEMICOLON.documentOnLoad > init: function()
  - Code Update Updated the sliderParallax: function() Function Block
  - Code Update Updated the windowscroll: function() Function Block
  - Code Update Updated the verticalMiddle: function() Function Block
  - Code Update Updated the loadFlexSlider: function() Function Block
  - Code Update Updated the maxHeight: function() Function Block
  - Added Added the commonHeight: function() Function Block
  - Code Update Updated the setFullColumnWidth: function() Function Block
  - Code Update Updated the html5Video: function() Function Block
- js/plugins.js
  - Added jQuery Transit Plugin
  - Code Update Bootstrap Plugin Block Updated

Version 1.4

Released on 4th February, 2015

Added:

Sticky Responsive Menu
Fade Animation for Lightbox
4 New Login/Register Page Layouts
Cart Page Layout
Checkout Page Layout
AJAX Jobs Form for the Career Page
AJAX RSVP Form for the Wedding Homepage
Support for Static Sticky Headers
Support for adding Styled Google Maps
Additional Options for One Page Menu Scrolling Functionality
Additional Options for Same Page Scrolling Functionality
Easier Tabs Initialization
Option to define Toggle State
Option to define which Accordion to open by default
Added .nocolor CSS check for Heading Spans
Added Custom Google Map Functionality in maps.html Template

Updated:

Bootstrap to Version 3.3.2
Swiper Plugin Updated to Latest Version
jQuery Form Plugin Updated to Latest Version
jQuery Validation Plugin Updated to Latest Version
jQuery Isotope Plugin Updated to Latest Version
jQuery GMap Plugin Updated to Latest Version
Updated Documentation

Changed:

Mailchimp API URL Logic for Auto-Detection of Datacenter based on the API Key
Offset Position Detection logic

Fixed:

Issue with Parallax Offset Calculation in Slider Parallax Functionality on Transparent Headers
Issue with resizing of Parallax Images in Page Title Parallax feature on Mobile Devices
Issue with Canvas Slider 3,4 and 5 Columns
Issue with Icon Line Height on Revolution Slider Arrows on Index Shop
Issue with DIV inside H1 Hierarchy in index-corporate-4.html Template
Issue with some of the Package Images not opening in Photoshop
Media Query Typing Error in less/responsive.less

Changed Files:

CSS
- style.css
  - Added .static-sticky CSS check to support Static Sticky Header. Search for :not(.static-sticky) to update the related codes
  - Added .accordion-lg CSS Code Blocks
  - Added .input-group-lg > .input-group-addon CSS Code Block to fix the Line Height Issue
  - Added .tparrows.preview2:after CSS Code Block to fix the Line Height Issue on Revolution Slider Arrows on Index Shop
  - Added .nocolor CSS Check for Header Spans
- css/responsive.css
  - Added .responsive-sticky-header CSS Code Blocks for Responsive Sticky Menu
- css/colors.css
  - Added .nocolor CSS Check for Header Spans
- css/bootstrap.css
  - Code Update Codes Updated to V3.3.2
- css/magnific-popup.css
  - Added .mfp-fade Code Blocks for Fade Animation of Magnific Popup
jQuery
- js/functions.js
  - Code Update Updated the stickyMenu: function( headerOffset ) Function Block
  - Code Update Updated the windowscroll: function() Function Block
  - Added $header.hasClass('transparent-header') check in the sliderParallaxOffset: function() Function Block
  - Added $parallaxPageTitleEl = $('.page-title-parallax')
  - Added $parallaxPageTitleEl.addClass('mobile-parallax'); in the parallax: function() Function Block
  - Code Update Updated the onePageScroll: function() Function Block
  - Code Update Updated the linkScroll: function() Function Block
  - Added Added tabs: function() Function Block
  - Code Update Updated the toggles: function() Function Block
  - Code Update Updated the accordions: function() Function Block
  - Added $onePageMenuEl.length check to $window.scrolled Code Block
  - Added onePageGlobalOffset Variable
  - Code Update Updated the onePageCurrentSection: function() Function Block
- js/plugins.js
  - Code Update Bootstrap Plugin Block Updated
  - Code Update Swiper Plugin Block Updated
  - Code Update jQuery Form Plugin Block Updated
  - Code Update jQuery Validation Plugin Block Updated
  - Code Update jQuery Isotope Plugin Block Updated
- js/jquery.gmap.js
  - Code Update Updated & Customized Google Maps API3 jQuery Code to allow Custom Styled Maps
HTML
- static-sticky.html
  - Added New Layout Added
- responsive-sticky.html
  - Added New Layout Added
- cart.html
  - Added New Layout Added
- checkout.html
  - Added New Layout Added
- index-wedding.html
  - Code Update RSVP Form Section updated
- index-corporate-4.html
  - Code Update Updated .text-rotater Code Block
- login-register-2.html
  - Added New Layout Added
- login-register-3.html
  - Added New Layout Added
- login-1.html
  - Added New Layout Added
- login-2.html
  - Added New Layout Added
- slider-canvas-3.html
  - Code Update Changed jQuery(document).ready(function($) to jQuery(window).load(function() in the Swiper Slider Section
- slider-canvas-4.html
  - Code Update Changed jQuery(document).ready(function($) to jQuery(window).load(function() in the Swiper Slider Section
- slider-canvas-5.html
  - Code Update Changed jQuery(document).ready(function($) to jQuery(window).load(function() in the Swiper Slider Section
- All the Pages with the Tabs Shortcode except Side Navigation & Process Steps
  - Removed Tab Initialization Script as a Global Function has been added for this
PHP
- css/colors.php
  - Added .nocolor CSS Check for Header Spans
- include/subscribe.php
  - Added $datacenter Variable
  - Code Update $submit_url Updated the Mail Chimp API URL logic
- include/jobs.php
  - Added Codes for Jobs Form Processing
- include/rsvp.php
  - Added Codes for RSVP Form Processing
LESS
- less/typography.less
  - Added .nocolor CSS Check for Header Spans
- less/header.less
  - Added .static-sticky CSS check to support Static Sticky Header. Search for :not(.static-sticky) to update the related codes
- less/sliders.less
  - Added .tparrows.preview2:after CSS Code Block to fix the Line Height Issue on Revolution Slider Arrows on Index Shop
- less/responsive.less
  - Added .responsive-sticky-header CSS Code Blocks for Responsive Sticky Menu
  - Code Update Added @ to media only screen and (min-width: 480px) and (max-width: 767px)
- less/extras.less
  - Added .input-group-lg > .input-group-addon CSS Code Block to fix the Line Height Issue
- less/shortcodes/toggles-accordions.less
  - Added .accordion-lg CSS Code Blocks

Version 1.3.1

Released on 12th January, 2015

Added:

Example for Canvas Slider - Autoplay
Example for Canvas Slider - Video Button onClick Play/Pause
Example for Canvas Slider - Pagination

Fixed:

Import mislinking in responsive.less & dark.less Files
Issue with Side Panel Content Scrolling on Touch Devices
Issue with Touch Compatibility of Mobile Menus on Windows Mobiles
Issue with Button Resizing in the Revolution Slider on Responsive Devices
Issue with Color Switching for Overlay Menu

Updated:

Revolution Slider to Latest Version v4.6.4
Updated Superfish Plugin to Latest Version
Updated Chartsjs to Latest Version
Updated Magnific Popup to Latest Version
Header LESS CSS
Documentation

Changed Files:

CSS
- style.css
  - Added .tp-banner .button { height: auto !important; } in Revolution Slider Section to fix Button Resizing on Responsive Devices
  - Added body.side-push-panel.device-touch Code Block
- css/colors.css
  - Added Codes related to .overlay-menu
- css/colors.php
  - Added Codes related to .overlay-menu
- css/magnific-popup.css
  - Code Update Complete Code Update to Latest Version
HTML
- Added slider-canvas-autoplay.html
- Added slider-canvas-video-event.html
- Added slider-canvas-pagination.html
LESS
- less/dark.less
  - Code Update Changed the Import Linking
- less/header.less
  - Added Side Panel related Styles
- less/responsive.less
  - Code Update Changed the Import Linking
- less/sliders.less
  - Added .tp-banner .button { height: auto !important; } in Revolution Slider Section to fix Button Resizing on Responsive Devices
jQuery
- js/plugins.js
  - Code Update Superfish Plugin Block Updated
  - Code Update Chartsjs Plugin Block Updated
  - Code Update Magnific Popup Plugin Block Updated
include/rs-plugin
- Folder Update Updated the Complete Folder

Version 1.3

Released on 17th December, 2014

Added:

Side Panel Area
Minimal Overlay Menu
New Loading Styles for the Page Loading Transitions
Gallery Support for AJAX Lightbox
Fading Feature for the Canvas Slider slider-canvas-fade.html
LESS Files
Added Overlay Compatibility to Full Google Maps for Transparent Headers

Updated:

Video Order: webm video source placed above mp4 video source for better caching of the Video Files in the Modern Browsers & this will eventaully reduce your Server's Bandwidth Usage. Tested this on our Own Servers.
Bootstrap to V3.3.1
Page Loading Transitions Script
Removed only screen property from Media Queries in CSS Files
Documentation

Fixes:

Issue with Post Content & Sidebar floats in Responsive Devices
z-Index Issue with Toastr Notifications
Issue with Menu Style 5 Icons Font Sizing on Responsive Devices
Smooth Scrolling Disabled on unnecessary Devices & Browsers.
Issue with Header Extras in Firefox & Internet Explorer
Issue with Sticky Menu Classes
Issues with Body Overflow in Lightbox AJAX Type which prevents Double Scrollbars

Changed Files:

CSS
- style.css
  - Added Loading Styles in the Page Transitions section .css3-spinner
  - Added Styles related to .overlay-menu
  - Added #header.transparent-header + #google-map for Transparent Headers Compatibility
  - Added Styles related to body.side-push-panel, #side-panel-trigger & #side-panel-trigger-close
  - Code Update Increased z-index Value changed for #toast-container
  - Code Update Update .header-extras li .he-text
  - Removed only screen property from Media Queries
- css/responsive.css
  - Added Styles related to #side-panel-trigger & #side-panel-trigger-close
  - Code Update Fixed float issue of the .postcontent & .sidebar sections in responsive devices less than 992px @media only screen and (max-width: 991px)
  - Code Update Added !important to font-size attribute in #primary-menu.style-5 > ul > li > a i
  - Removed only screen property from Media Queries
- css/bootstrap.css
- css/dark.css
  - Added Styles related to #side-panel-trigger & #side-panel-trigger-close
  - Added Styles related to .overlay-menu
  - Removed only screen property from Media Queries
- Added LESS Files in the less Folder.
  - Added style.less
HTML
- All the HTML Files with HTML5 Videos
  - Code Update Updated Source Video order & placed webm video source above the mp4 video source
- side-panel.html
- slider-canvas-fade.html
jQuery
- js/functions.js
  - Added Loader Styles variable to the pageTransition: function() Block
  - Added lightbox: function() > $lightboxAjaxGalleryEl.magnificPopup which adds AJAX Lightbox Gallery support
  - Added sidePanel: function() block
  - Added SEMICOLON.header.sidePanel(); to SEMICOLON.header > init: function()
  - Added overlayMenu: function() block
  - Added SEMICOLON.header.overlayMenu(); to SEMICOLON.header > init: function() &aamp; SEMICOLON.documentOnResize > init: function()
  - Added if (!$(event.target).closest('#side-panel').length) { $body.toggleClass('side-panel-open', false); } to $(document).on('click', function(event)
  - Code Update menufunctions: function() Block Updated to calculate Overlay Menu Height & align it in the middle of the window
  - Code Update stickyMenuClass: function() Block Updated to add/remove Sticky Menu Classes more accurately
  - Code Update lightbox: function() > $lightboxAjaxEl.magnificPopup Block Updated to prevent Document Body to show scrollbars when Lightbox AJAX Modal is opened. This fixes the Double Scrollbar Issue
- js/plugins.js
  - Added loadingHtml option to the Animsition Plugin
  - Code Update Updated ssc_init() Block
  - Code Update Updated Animsition Plugin
  - Code Update Updated Bootstrap Plugin
- js/canvas.slider.fade.js

Version 1.2.2

Released on 14th November, 2014

Fixes:

Issue with IE & Mobile Browsers displaying Blank Page
Issue with Top Social's Text Width handling

Changed Files:

CSS
- css/animate.css
  - Removed Media Query Condition @media only screen and (min-width: 768px)
jQuery
- js/functions.js
  - Code Update topsocial: function()
  - Removed SEMICOLON.header.topsocial(); from SEMICOLON.header > init: function()
  - Added SEMICOLON.header.topsocial(); to SEMICOLON.documentOnLoad > init: function()

Version 1.2.1

Released on 13th November, 2014

Added:

Ability to use Custom Speed Duration & Animation Style for Page Load Transitions
Ability to use any Animate.css Transition for Page Loading Transitions

Updated:

Bootstrap to V3.3
Page Load Transitions now uses Native CSS3 Animations from the animate.css library
Documentation

Fixes:

Blog Masonry 3 Full Responsive Issue
Issue with $subject variable in sendemail.php File
Fixed Wrong Links of Portfolio Masonry in the Menus
Fixed Issues with Footer Quick Contact Form in footer-2.html & footer-3.html Files
Fixed some Z-Indexes for Menus

Changed Files:

CSS
- style.css
- css/responsive.css
- css/dark.css
- css/bootstrap.css
HTML
- footer-2.html
- footer-3.html
PHP
- include/sendemail.php
jQuery
- js/plugins.js
- js/functions.js

Version 1.2

Released on 6th November, 2014

Added:

Month/Date Sections for Blog Timeline Full Width
Infinity Scroll for Blog Timeline
Added ability to use any animation from the animate.css library on Text Rotaters
Added colors.php file for easy theme color setup
Added fonts.css for Easy Custom Font Management
More Documentation Info

Fixes:

Blog Timeline Entry Position Issue
Blog Timeline issues on Responsive Devices
Posts Entry Meta Icon Display issues on Responsive Devices
Issue with Sub-Title Menu Dividers on the First Menu Item
IE Display Issue with Text Rotators
Issue with iconlist color importance
Issues with jQuery Widgets
Fixed an Issue with Mobile Primary Menus on Android Devices

Changed Files:

CSS
- style.css
- css/responsive.css
- css/dark.css
- css/colors.css
- css/colors.php
- css/fonts.css
HTML
- blog-timeline.html
- blog-timeline-2.html
- index-corporate-4.html
- static-parallax.html
- headings-dropcaps.html
jQuery
- js/plugins.js
- js/functions.js

Version 1.1

Released on 30th October, 2014

Added:

HTML5 Youtube Video Backgrounds that can be added as a Video Background for any Element.
Added a Class .no-transition to be added to the body Tag to disable Page Loading Transition.
Revolution Slider Documentation

Fixes:

Responsive Sub Menu Width Issue on Full Header
Shopping Cart Dark Scheme Issue
Icon List Color Scheme Issue
One Page Team Layout Issue
Index Shop Bottommost Subscription Section Layout Issue
Landing Page 5 Overlay Form Layout Issue
App Showcase minor Improvements
Heading Blocks Not Dark Issue
Fixed Issue with Vertical Middle in Responsive Devices
Heading Block Text Size on Responsive Device
Primary Menu Sub Title - Sub Menu Font Size Issue

Changed Files:

CSS
- style.css
- css/responsive.css
- css/dark.css
- css/colors.css
HTML
- index.html
- index-onepage.html
- index-onepage-2.html
- index-shop.html
- landing-5.html
- index-app-showcase.html
- sections.html
jQuery
- js/functions.js
- js/plugins.js

Initial Release V1.0

Released on 22nd October, 2014

Installation

HTML Structure

Layout Settings

Smooth Scrolling

Favicons & Apple Touch Icons

Page Loading Transitions

Logo Settings

Retina Logo

Color Schemes

Dark Scheme

Changing Fonts

Theme Customization

Example:

Setting up RTL

Setting up LESS CSS

Step 1:

Step 2:

Step 3:

Website Optimization Tips

gZip Compression & Browser Caching

Image Compression & Optimization

CSS & jQuery Minifications

Content Delivery Network

Fast Web Hosting Servers

Upgrading Canvas: v3.x to v4.0

CSS Files:

#primary-menu

#page-menu

.slider-parallax

Swiper Slider Base CSS

#portfolio

#shop

PHP Files:

Form Processing and Subscription Files

HTML Files:

JS Files Linking moved to Footer

Example:

Mega Menu Content

Example:

Slider Parallax

Example:

Canvas/Swiper Slider

Page Menu

Before:

After:

Isotope Grids

Additional Options:

Portfolio

Before:

After:

Portfolio Filter

Example:

Portfolio Shuffle

Example:

Shop

Before:

After:

Blog Grid

Before:

After:

Blog Masonry Grid

Before:

After:

Contact Forms

Before:

After:

Quick Contact Forms

Before:

After:

Subscription Forms

Before:

After:

Canvas Slider Javascript

Owl Carousel Javascript

Header Types

Mega Menu

Widgets in Mega Menu

Menu Styles

Alternate Mobile Menu

Page Sub Menu

`#primary-menu`

`#page-menu`

`.slider-parallax`

`Swiper Slider Base CSS`

`#portfolio`

`#shop`

`Form Processing and Subscription Files`

`JS Files Linking moved to Footer`

`Mega Menu Content`

`Slider Parallax`

`Canvas/Swiper Slider`

`Page Menu`

`Isotope Grids`

`Portfolio`

`Portfolio Filter`

`Portfolio Shuffle`

`Shop`

`Blog Grid`

`Blog Masonry Grid`

`Contact Forms`

`Quick Contact Forms`

`Subscription Forms`

`Canvas Slider Javascript`

`Owl Carousel Javascript`

Add the Following Code after the Portfolio `#portfolio` Container: