Installation

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

  1. Open the Package/HTML Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. 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.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Using Niche Demos

Canvas makes creating Websites a very easy process and it becomes even more easier with the inclusion of Niche Demos. Niche Demos are premade concepts of different categories of Websites requiring minimal setup with a faster turnaround time. All the Niche Demos run on the native style.css and css/js Files. You can find the Main Homepages of the Niche Demos in the Package/HTML Folder with the names: demo-{niche}.html Template.

To setup the Niche Demos you will need the following Folders/Files:

  • css/ Folder
  • images/ Folder (However, you can delete the Images inside this Folder according to your Preference, but don’t delete the images/icons/ Folder)
  • include/ Folder (However, you can delete the rs-plugin/ Folder if the Niche Demos does not use the Revolution Slider)
  • js/ Folder
  • demos/{niche}/ Folder
  • style.css File

You can simply delete the other files depending on what you want to use. Additionally, you simply rename the demo-{niche}.html File to index.html File so that this file is viewed as your Default Homepage. That's All! You can now start Editing the Files according to your Website's Needs.

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

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

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:

  1. 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>
  2. 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:

  1. Add the dir="rtl" to the <html> Tag. Example: 
    <html dir="rtl" lang="ar">
  2. 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>
  3. Add the .rtl Class to the <body> Tag. Example: 
    <body class="stretched rtl">

CSS Custom Properties (Variables)

Using CSS Custom Properties is the easiest way to Customize the Basic Styling in Canvas including the Theme Colors, Fonts or Margins. Follow the Steps below:

  1. Replace the following code on your Page: 
    <link rel="stylesheet" href="style.css" type="text/css" />
    with: 
    <link rel="stylesheet" href="style-vars.css" type="text/css" />
    The List of the all the Files you need to replace are mentioned below.
  2. Open the style-vars.css File and scroll to where the :root Line starts.
  3. You will see a List of Configurable Options in this Section which are easy to understand.
  4. Simply change the Values according to what you need and refresh the page to see the changes take effect.

List of Files included

You will need to use the following files instead of their traditional names (style.css):

  • style-vars.css
  • style-rtl-vars.css
  • css/responsive-vars.css
  • css/responsive-rtl-vars.css
  • css/dark-vars.css
  • css/dark-rtl-vars.css
  • css/font-icons-vars.css
  • css/components/radio-checkbox-vars.css
  • css/components/bs-switches-vars.css
  • css/components/ion.rangeslider-vars.css

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 at the bottom of the Page:

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

HTTPs Compatibility

With the increasing amount of SPAM, Phishing and Attacks, it is important to secure your Website, so that information passed through your website is done securely without the risk of exposing any private data. While Canvas is completely ready, out of the box solution for your Website without any extra setup required to make your Website HTTPs ready. The only thing you will need to do is to Install the HTTPs Certificates, which can be done with help from your Web Hosting Providers.

Meanwhile, also make sure that any of the JS/CSS/Image/PHP Linkings, if hosted on an external URL or is an absolute URL, starts with an https://.

Correct Example:

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

Wrong Example:

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

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.

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.

Smaller Mega Menu

Add the .mega-menu-small Class to the li.mega-menu Tag to display a Smaller Mega Menu.

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>
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>
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>
.on-click Open Menu Items on Click rather than on Hover. 
<nav id="primary-menu" class="on-click">
	...
</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">
data-sticky-offset This Attribute is used to Define after how many Pixels you want your Header to be Sticky.

Example:
<header data-sticky-offset="100">
This will make the Header Sticky after scrolling down 100px. You can also set full value if you want the Header to be Sticky after scrolling Full Screen.


Modifying Header Height

Use this Header Height CSS Generator to generate Custom Header & Sticky Header Heights.

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-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.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
  • data-stagger - Stagger Animation offset in Milliseconds. Eg. 30

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

Sticky Sidebar

You can easily transform your existing Sidebar Content into Sticky Content with minimal setup:

  1. Add the .sticky-sidebar-wrap Class to your .sidebar Container.
  2. Create a .sticky-sidebar Container just inside the .sidebar-widgets-wrap Container.
  3. Enclose all your Sidebar Widgets inside the .sticky-sidebar Container.
<div class="sidebar sticky-sidebar-wrap nobottommargin clearfix">
	<div class="sidebar-widgets-wrap">
		<div class="sticky-sidebar">

			... Your Sidebar Widgets

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

Note: The Sticky Sidebar Plugins currently works best with the Sidebar .sidebar Containers and Bootstrap Columns.

Settings:
  • data-offset-top - Sticky Sidebar Offset from Top in pixels. Eg. 110
  • data-offset-bottom - Sticky Sidebar Offset from Bottom in pixels. Eg. 50

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.
  • .notextshadow - No Text 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>
Settings:
  • data-offset - Offset Gap from Top after you Scroll to the HTML ID in pixels. Eg. 100
  • data-speed - Speed of the Scroll To Link in milliseconds. Eg. 800
  • data-easing - Easing of the Scroll to Link Scrolling. Eg. easeInQuad
  • data-highlight - Highlight Color of the Section in HEX Color Codes after scrolling. Eg. #FFFF00. Make sure that the .highlight-me Class is added to the Section you want to Highlight.

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

Responsive Utilities

Canvas is Fully Responsive and exciting Responsive Features are bundled within the Template waiting to be explored.

Using Touch Class

Define your Custom Styles specifically on Touch Devices using the .device-touch Class.

.device-touch img { display: none; }

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-xl - Height for Large Devices >=1200px
  • data-height-lg - Height for Medium Devices >=992px to 1199px
  • data-height-md - Height for Tablets
  • data-height-sm - Height for Landscape Mobiles or Phablets
  • data-height-xs - Height for Portrait Mobiles

Sample Code:

<div style="position: relative; margin-bottom: -60px;" class="ohidden" data-height-xl="426" data-height-lg="567" data-height-md="470" data-height-sm="287" data-height-xs="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.

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-xl - Classes for Large Devices >=1200px
  • data-class-lg - Classes for Medium Devices >=992px to 1199px
  • data-class-md - Classes for Tablets
  • data-class-sm - Classes for Landscape Mobiles or Phablets
  • data-class-xs - Classes for Portrait Mobiles

Sample Code:

<a href="#" class="button" data-class-lg="button-large" data-class-lg="" data-class-md="button-xlarge" data-class-sm="button-small" data-class-xs="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>

Setup

HTML

Use this Basic Structure to construct your Form:

<div class="form-widget">
	<div class="form-result"></div>

	<form class="row" id="template-contactform" action="include/form.php" method="post">

		<div class="form-process"></div>

		<div class="col-md-6 form-group">
			<label for="template-contactform-name">Name <small>*</small></label>
			<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="form-control required" />
		</div>

		<div class="col-md-6 form-group">
			<label for="template-contactform-email">Email <small>*</small></label>
			<input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email form-control" />
		</div>

		<div class="w-100"></div>

		<div class="col-12 form-group">
			<label for="template-contactform-message">Message <small>*</small></label>
			<textarea class="required form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
		</div>

		<div class="col-12 hidden">
			<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="form-control" />
		</div>

		<div class="col-12">
			<button class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Send Message</button>
		</div>

		<!-- Form Settings -->

		<input type="hidden" name="prefix" value="template-contactform-">
		<input type="hidden" name="subject" value="Message from Contact Form">

	</form>
</div>
  • Always enclose AJAX Forms inside the .form-widget Container
  • Include a Blank DIV with .form-result Class: <div class="form-result"></div> to receive the Success/Error Message from PHP
  • Use a Hidden Form Input with the name prefix to Prefix your Form Names: <input type="hidden" name="prefix" value="template-contactform-">
  • Always include the botcheck Field as in the above Form code

PHP

Open the include/form.php File to make the following changes:

Receiving Form Responses

Add your Email Address to receive Email Responses by using the following code below:

$toemails[] = array(
	'email' => 'your-email@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.

Sender/Company Email to send Emails

Add a Sender Email by using the following code below:

$fromemail = array(
	'email' => 'no-reply@website.com', // Company's Email Address (preferably currently used Domain Name)
	'name' => 'Company Name' // Company Name
);

Note: Some Web Hosting services enforce you to use the same Domain Name in your Email Address as your Hosting Account, to prevent SPAM. So make sure that @website.com above is same as your Domain's Hosting Account.

Using SMTP

Some Hosting Servers disable the use of PHP mail() Function to prevent SPAM. So you can use the SMTP Functionality to Send Emails. Simply add the following code after the $mail = new PHPMailer(); Line of Code:

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

Using Gmail SMTP

Use the following SMTP code for sending Emails through your Gmail Account:

$mail->isSMTP();
$mail->SMTPDebug = 0;
$mail->Host = 'smtp.gmail.com';
$mail->Port = 587;
$mail->SMTPSecure = 'tls';
$mail->SMTPAuth = true;
$mail->Username = "username@gmail.com";
$mail->Password = "password";

Note: You will need to Turn On Less Seure App Access in your Google Account to be able to use Gmail SMTP. Go to your Google Account > Security > Less Seure App Access > Turn On

Adding a Reply To: Address

Adding a Reply To: address in your Form Response is super easy and dynamic, using the Email Field from your Form. Simply add the following code at the bottom of your Form:

<input type="hidden" name="replyto" value="template-contactform-email">

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:

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

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

Fields

Add any Form Input Type to your Form using the Default HTML5 Markup and Canvas's Powerful Form Processor will do the rest. For the most optimal result, use the following code:

<div class="col-12 form-group">
	<label for="template-contactform-name">Name <small>*</small></label>
	<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="form-control required" />
</div>

The Form Input's name is really important so that the Input Field can be processed successfully! Additionally, for the sake uniformity, always use prefixed names: template-contactform-name. This will be sent as Name in the Form Response Email. If you use template-contactform-first-name, it will sent as First Name to you. Simple as that!

Note: Disabled Fields are not sent in the Email.

Multiple Value Fields

Some Input Types accept Multiple Values, example, Checkboxes, Selects or Files. Always make sure, that you add Block Braces [] at the end of the Form Input's name. Example: template-contactform-input[]

File Type Fields

Users can now easily send File Attachments (single or multiple) using Canvas Forms. Simply use the code below:

<div class="form-group">
	<label>Upload CV:</label>
	<input type="file" id="template-contactform-file" name="template-contactform-file" class="form-control required" />
</div>

Multiple Files

<div class="form-group">
	<label>Upload CV:</label>
	<input type="file" id="template-contactform-file" name="template-contactform-file[]" class="form-control required" multiple />
</div>

Note: Always add the enctype="multipart/form-data" Attribute to your Form Tag: <form ... enctype="multipart/form-data"> when including File Input Types.

Auto-Responder

Enabling the Auto-Responder

Enable AutoResponders easily for your Form Responses. Use the following settings inside the Form's HTML:

<input type="hidden" name="replyto" value="template-contactform-email">
<input type="hidden" name="autoresponder" value="true">

Customizing the Email

We have added more options to Customize the Auto-Responder Email Title, Subject and Body per Form. Simply use the Settings below:

<input type="hidden" name="ar_subject" value="Auto-Responder Email Subject">
<input type="hidden" name="ar_title" value="Thank You for your Email">
<input type="hidden" name="ar_message" value="We have received your Message and will get back to you shortly. Meanwhile, check our Website: http://www.website.com .<br><br>Thank You">
<input type="hidden" name="ar_footer" value="Copyright Company Name">

Auto-Responder Email Personlization

Easily Personalize your Auto-Responder Emails by adding the Form Field References enclosed within Curly Braces {form-field} in your Auto-Responder Message:

<input type="hidden" name="ar_message" value="Dear {template-contactform-name},<br><br>We have received your Message and will get back to you shortly. Meanwhile, check our Website: http://www.website.com .<br><br>Thank You">
<input type="hidden" name="ar_footer" value="Copyright Company Name">

You can add as many Form Fields as you like in your Auto-Responder Message. Basic HTML is also supported.

Using SMTP for Auto-Responders

If you are using SMTP for sending Emails, chances are you will need to use SMTP for Auto-Responder too. Simply add the SMTP codes after the $autoresponder = new PHPMailer(); Line of Code.

Alerts

Customize the Form Result Alerts (success/error) according to what you require. Set the data-alert-type to inline or notify to use the Default Alert Types. To use a Custom Alert Type (example), use data-alert-type="false". Example:

<div class="form-widget" data-alert-type="inline">
	<div class="form-result"></div>

	<form class="row" id="template-contactform" action="include/form.php" method="post">

		<div class="form-process"></div>

		...

	</form>
</div>

Using Custom Alerts

You can use HTML/CSS or jQuery to Customize the Alerts. Canvas Form uses jQuery and CSS Classes to interact with the Document about the Form Status:

CSS Classes:

The CSS Classes is added on the Document <body>:

on Form Ready:
<body class="template-contactform-ready">
on Form Processing: (after user clicks the Submit Button)
<body class="template-contactform-processing">
on Form Complete: (after Form AJAX request is completed)
<body class="template-contactform-complete">
on Form Complete & Successful: (after Form Submission is Successful)
<body class="template-contactform-complete template-contactform-success">
on Form Complete but has Errors: (is Form has Errors)
<body class="template-contactform-complete template-contactform-error">

Note: Make sure that there's always a Unique ID assigned to the Form as the Form Classes above are assigned based on your Form IDs. Example:

<form class="row" id="template-contactform" action="include/form.php" method="post">

jQuery Events:

The jQuery Events are triggered only on Form Submission Success and Error only.

on Form Complete & Successful: (after Form Submission is Successful)
jQuery('#template-contactform').on( 'formSubmitSuccess', function(){
	// Your JS Codes here
});
on Form Complete but has Errors: (is Form has Errors)
jQuery('#template-contactform').on( 'formSubmitError', function(){
	// Your JS Codes here
});

Note: Always add the JS codes at the bottom of the Page after the js/functions.js JS File Linking.

Settings

You can control and personalize your Form using HTML easily. Simply use the Form's hidden Input Field with a Value:

<input type="hidden" name="subject" value="New Response from Contact Form">

The Full List of Settings you can setup in the Form's HTML using the hidden Inpur Field:

  • prefix - The Prefix that defines the Field's name Attribute. Example: template-contactform-
  • subject - Form Response Email Subject. Example: New Response from Contact Form
  • template - Form Response Style. Example: text or html (default)
  • html_title - Title in the Form Response Email Template. Example: Form Response
  • replyto - Use a Email Form Field's name Attribute to set a Reply To: Header in the Form Response Emails. Also used for Auto-Responders. Example: template-contactform-email
  • autoresponder - Enables/Disables Form Auto-Responders. Example: true or false
  • ar_subject - Auto-Responder Email Subject. Example: We've Received your Email
  • ar_title - Title in the Auto-Responder Email Template. Example: Thanks for Contacting Us
  • ar_message - Auto-Responder Message Body. Example: 
    <input type="hidden" name="ar_message" value="Hello {template-contactform-name},<br><br>Thanks for your Valuable Feed. Here is your Coupon Code: <strong>CANVAS30</strong><br><br>You will receive 30% off your Purchase using this Coupon Code.<br><br>See you soon.<br><br>Thanks & Regards,<br><br>Company Team.">
  • ar_footer - Auto-Responder Email Template's Footer. Example: Copyrights © 2019 Company Inc.
  • force_recaptcha - Enables/Disables Forceful reCaptcha Validation. Example: true or false
  • message[success] - Sets a Message that Form returns on Successful Submission
  • message[error] - Sets a Message that Form returns on Error during Submission
  • message[error_bot] - Sets a Message that Form returns on Bot Detection
  • message[error_unexpected] - Sets a Message that Form returns on Unexpected Error. This could be a PHP Error.
  • message[recaptcha_invalid] - Sets a Message that Form returns on Invalid/Expired reCaptcha Validation
  • message[recaptcha_error] - Sets a Message that Form returns on Error in reCaptcha Submission

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>

It is now possible to AutoPlay HTML5 Videos Inline on iOS 10 Devices. Please consider using the Steps below to enable this:

  1. Add the playsinline Attribute to the <video> Tag. Example: 
    <video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
	...
</video>
  2. Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag. Example: 
    <div class="video-wrap no-placeholder">
	<video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
		...
	</video>
	<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></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.

Making Tabs Responsive

To make the Tabs Responsive and convert it into an accordion, simply add the .tabs-responsive Class to the .tabs Element.

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 inside any Container 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-reverse - Set to true if you want to Animate the Slides in Reverse Direction
  • data-touch - Enable/Disable Touch on Mobile Devices. Set to true or false
  • 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.

Adding Flex Sliders inside a Container

You can add the Flex Slider inside any Container or Grid with any Width and the Images will adapt accordingly. Example:

<div class="col-md-6">
	<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>
</div>
With Custom Width DIV
<div style="max-width: 300px;">
	<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>
</div>

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-xs="2" data-items-sm="3" data-items-md="4" data-items-lg="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-xl - No. of Items to display in the Carousel on Desktops/Laptops. Eg. 5
  • data-items-lg - No. of Items to display in the Carousel on Netbooks. Eg. 5
  • data-items-md - No. of Items to display in the Carousel on iPads/Tablets. Eg. 4
  • data-items-sm - No. of Items to display in the Carousel on Mobile Landscape. Eg. 3
  • data-items-xs - 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>
Mixed 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="http://www.youtube.com/watch?v=kuceVNBTJio" class="mfp-iframe" 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>

Charts

Use from the List of 50+ Chart Tmplates included with Canvas which uses the ChartJS Plugin.

Full Documentation

Google Maps

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

  • Step 1:

    Add the Google Maps Specific Scripts at the bottom of the Page just after the js/plugins.js script linking:

    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>

    You can generate your API Key (Browser Key) for Google Maps by Clicking Here and then Click on Get a Key in the Header. Make sure you replace YOUR_API_KEY with you Generated API Key in the above code.

  • 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

Canvas includes a bunch of Icons to represent the Interactive Content on your Website. The following code for CSS Linking found in the Document <head> includes all the Base Icons that comes with Canvas:

<link rel="stylesheet" href="css/font-icons.css" type="text/css" />

However, to include Additional Icons you will need to add the respective Icon Stylesheets in the Document <head> directly below the css/font-icons.css CSS Font Linking.

  • ET Line Icons: 
    <link rel="stylesheet" href="one-page/css/et-line.css" type="text/css" />
  • Medical Icons: 
    <link rel="stylesheet" href="demos/medical/css/medical-icons.css" type="text/css" />
  • Real Estate Icons: 
    <link rel="stylesheet" href="demos/real-estate/css/font-icons.css" type="text/css" />

Search 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-box1
  • icon-archive1
  • icon-envelope2
  • 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-full1
  • icon-settings
  • icon-arrow-left1
  • icon-arrow-up1
  • icon-arrow-down1
  • icon-arrow-right1
  • icon-reload
  • icon-download1
  • icon-tag1
  • icon-trashcan
  • icon-search1
  • icon-zoom-in
  • icon-zoom-out
  • icon-chat
  • icon-clock2
  • icon-printer
  • icon-home1
  • icon-flag2
  • icon-meter
  • icon-switch
  • icon-forbidden
  • icon-phone-landscape
  • icon-tablet1
  • icon-tablet-landscape
  • icon-laptop1
  • icon-camera1
  • icon-microwave-oven
  • icon-credit-cards
  • icon-map-marker1
  • icon-map2
  • icon-support
  • icon-newspaper2
  • icon-barbell
  • icon-stopwatch1
  • icon-atom1
  • icon-image2
  • icon-cube1
  • icon-bars1
  • icon-chart
  • icon-pencil
  • icon-measure
  • icon-eyedropper
  • icon-file-settings
  • icon-file-add
  • icon-file2
  • icon-align-left1
  • icon-align-right1
  • icon-align-center1
  • icon-align-justify1
  • icon-file-broken
  • icon-browser
  • icon-windows1
  • icon-window
  • icon-folder2
  • icon-connection-25
  • icon-connection-50
  • icon-connection-75
  • icon-connection-full
  • icon-list1
  • icon-grid
  • icon-stack3
  • icon-battery-charging
  • icon-battery-empty1
  • icon-battery-25
  • icon-battery-50
  • icon-battery-75
  • icon-refresh
  • icon-volume
  • icon-volume-increase
  • icon-volume-decrease
  • icon-mute
  • icon-microphone1
  • icon-microphone-off
  • icon-book1
  • icon-checkmark
  • icon-checkbox-checked
  • icon-checkbox
  • icon-paperclip1
  • icon-chat-1
  • icon-chat-2
  • icon-chat-3
  • icon-comment2
  • icon-calendar2
  • icon-bookmark2
  • icon-email2
  • icon-heart2
  • icon-enter
  • icon-cloud1
  • icon-book2
  • icon-star2
  • icon-lock1
  • icon-unlocked
  • icon-unlocked2
  • icon-users1
  • icon-user2
  • icon-users2
  • icon-user21
  • icon-bullhorn1
  • icon-share1
  • icon-screen
  • icon-phone1
  • icon-phone-portrait
  • icon-calculator1
  • icon-bag
  • icon-diamond
  • icon-drink
  • icon-shorts
  • icon-vcard
  • icon-sun2
  • icon-bill
  • icon-coffee1
  • icon-tv2
  • icon-newspaper3
  • icon-stack
  • icon-syringe1
  • icon-health
  • icon-bolt1
  • icon-pill
  • icon-bones
  • icon-lab
  • icon-clipboard2
  • icon-mug
  • icon-bucket
  • icon-select
  • icon-graph
  • icon-crop1
  • icon-heart21
  • icon-cloud2
  • icon-star21
  • icon-pen1
  • icon-diamond2
  • icon-display
  • icon-paperplane
  • icon-params
  • icon-banknote
  • icon-vynil
  • icon-truck1
  • icon-world
  • icon-tv1
  • icon-sound
  • icon-video1
  • icon-trash1
  • icon-user3
  • icon-key1
  • icon-search2
  • icon-settings2
  • icon-camera2
  • icon-tag2
  • icon-lock2
  • icon-bulb
  • icon-location
  • icon-eye2
  • icon-bubble
  • icon-stack2
  • icon-cup
  • icon-phone2
  • icon-news
  • icon-mail
  • icon-like
  • icon-photo
  • icon-note
  • icon-clock21
  • icon-data
  • icon-music1
  • icon-megaphone
  • icon-study
  • icon-lab2
  • icon-food
  • icon-t-shirt
  • icon-fire1
  • icon-clip
  • icon-shop
  • icon-calendar21
  • icon-wallet1
  • icon-glass
  • icon-music2
  • icon-search3
  • icon-envelope21
  • icon-heart3
  • icon-star3
  • icon-star-empty
  • icon-user4
  • icon-film1
  • icon-th-large1
  • icon-th1
  • icon-th-list1
  • icon-ok
  • icon-remove
  • icon-zoom-in2
  • icon-zoom-out2
  • icon-off
  • icon-signal1
  • icon-cog1
  • icon-trash2
  • icon-home2
  • icon-file21
  • icon-time
  • icon-road1
  • icon-download-alt
  • icon-download2
  • icon-upload1
  • icon-inbox1
  • icon-play-circle2
  • icon-repeat
  • icon-refresh2
  • icon-list-alt2
  • icon-lock3
  • icon-flag21
  • icon-headphones1
  • icon-volume-off1
  • icon-volume-down1
  • icon-volume-up1
  • icon-qrcode1
  • icon-barcode1
  • icon-tag3
  • icon-tags1
  • icon-book3
  • icon-bookmark21
  • icon-print2
  • icon-camera3
  • icon-font1
  • icon-bold1
  • icon-italic1
  • icon-text-height1
  • icon-text-width1
  • 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-adjust1
  • icon-tint1
  • icon-edit2
  • icon-share2
  • icon-check1
  • icon-move
  • icon-step-backward1
  • icon-fast-backward1
  • icon-backward1
  • icon-play1
  • icon-pause1
  • icon-stop1
  • icon-forward1
  • icon-fast-forward1
  • icon-step-forward1
  • icon-eject1
  • icon-chevron-left1
  • icon-chevron-right1
  • 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-alt1
  • icon-resize-full
  • icon-resize-small
  • icon-plus1
  • icon-minus1
  • icon-asterisk1
  • icon-exclamation-sign
  • icon-gift1
  • icon-leaf1
  • icon-fire2
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane1
  • icon-calendar3
  • icon-random1
  • icon-comment21
  • icon-magnet1
  • icon-chevron-up1
  • icon-chevron-down1
  • icon-retweet1
  • icon-shopping-cart1
  • icon-folder-close
  • icon-folder-open2
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-bar-chart
  • icon-twitter-sign
  • icon-facebook-sign
  • icon-camera-retro1
  • icon-key2
  • icon-cogs1
  • icon-comments2
  • icon-thumbs-up2
  • icon-thumbs-down2
  • icon-star-half2
  • icon-heart-empty
  • icon-signout
  • icon-linkedin-sign
  • icon-pushpin
  • icon-external-link
  • icon-signin
  • icon-trophy1
  • icon-github-sign
  • icon-upload-alt
  • icon-lemon2
  • icon-phone3
  • icon-check-empty
  • icon-bookmark-empty
  • icon-phone-sign
  • icon-twitter2
  • icon-facebook2
  • icon-github2
  • icon-unlock1
  • icon-credit
  • icon-rss2
  • icon-hdd2
  • icon-bullhorn2
  • icon-bell2
  • icon-certificate1
  • 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-globe1
  • icon-wrench1
  • icon-tasks1
  • icon-filter1
  • icon-briefcase1
  • icon-fullscreen
  • icon-group
  • icon-link1
  • icon-cloud3
  • icon-beaker
  • icon-cut1
  • icon-copy2
  • icon-paper-clip
  • icon-save2
  • icon-sign-blank
  • icon-reorder
  • icon-list-ul1
  • icon-list-ol1
  • icon-strikethrough1
  • icon-underline1
  • icon-table1
  • icon-magic1
  • icon-truck2
  • icon-pinterest2
  • icon-pinterest-sign
  • icon-google-plus-sign
  • icon-google-plus1
  • icon-money
  • icon-caret-down1
  • icon-caret-up1
  • icon-caret-left1
  • icon-caret-right1
  • icon-columns1
  • icon-sort1
  • icon-sort-down1
  • icon-sort-up1
  • icon-envelope-alt
  • icon-linkedin2
  • icon-undo1
  • icon-legal
  • icon-dashboard
  • icon-comment-alt2
  • icon-comments-alt
  • icon-bolt2
  • icon-sitemap1
  • icon-umbrella1
  • icon-paste1
  • icon-lightbulb2
  • icon-exchange
  • icon-cloud-download
  • icon-cloud-upload
  • icon-user-md1
  • icon-stethoscope1
  • icon-suitcase1
  • icon-bell-alt
  • icon-coffee2
  • icon-food2
  • icon-file-alt2
  • icon-building2
  • icon-hospital2
  • icon-ambulance1
  • icon-medkit1
  • icon-fighter-jet1
  • icon-beer1
  • icon-h-sign
  • icon-plus-sign2
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-angle-left1
  • icon-angle-right1
  • icon-angle-up1
  • icon-angle-down1
  • icon-desktop1
  • icon-laptop2
  • icon-tablet2
  • icon-mobile1
  • icon-circle-blank
  • icon-quote-left1
  • icon-quote-right1
  • icon-spinner1
  • icon-circle2
  • icon-reply1
  • icon-github-alt1
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-expand-alt
  • icon-collapse-alt
  • icon-smile2
  • icon-frown2
  • icon-meh2
  • icon-gamepad1
  • icon-keyboard2
  • icon-flag-alt
  • icon-flag-checkered1
  • icon-terminal1
  • icon-code1
  • icon-reply-all1
  • icon-star-half-full
  • icon-location-arrow1
  • icon-crop2
  • icon-code-fork
  • icon-unlink1
  • icon-question1
  • icon-info1
  • icon-exclamation1
  • icon-superscript1
  • icon-subscript1
  • icon-eraser1
  • icon-puzzle
  • icon-microphone2
  • icon-microphone-off2
  • icon-shield
  • icon-calendar-empty
  • icon-fire-extinguisher1
  • icon-rocket1
  • icon-maxcdn1
  • icon-chevron-sign-left
  • icon-chevron-sign-right
  • icon-chevron-sign-up
  • icon-chevron-sign-down
  • icon-html52
  • icon-css31
  • icon-anchor1
  • icon-unlock-alt1
  • icon-bullseye1
  • 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-compass2
  • icon-collapse
  • icon-collapse-top
  • icon-expand1
  • 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-up21
  • icon-thumbs-down21
  • icon-youtube-sign
  • icon-youtube2
  • icon-xing2
  • icon-xing-sign
  • icon-youtube-play
  • icon-dropbox2
  • icon-stackexchange
  • icon-instagram2
  • icon-flickr2
  • icon-adn1
  • 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-apple1
  • icon-windows3
  • icon-android2
  • icon-linux1
  • icon-dribbble2
  • icon-skype2
  • icon-foursquare2
  • icon-trello1
  • icon-female1
  • icon-male1
  • icon-gittip
  • icon-sun21
  • icon-moon2
  • icon-archive2
  • icon-bug1
  • icon-renren1
  • icon-weibo2
  • icon-vk2
  • icon-duckduckgo
  • icon-aim
  • icon-delicious1
  • icon-paypal1
  • icon-flattr
  • icon-android1
  • icon-eventful
  • icon-smashmag
  • icon-gplus
  • icon-wikipedia
  • icon-lanyrd
  • icon-calendar-1
  • icon-stumbleupon1
  • icon-fivehundredpx
  • icon-pinterest1
  • icon-bitcoin1
  • icon-w3c
  • icon-foursquare1
  • icon-html51
  • icon-ie
  • icon-call
  • icon-grooveshark
  • icon-ninetyninedesigns
  • icon-forrst
  • icon-digg1
  • icon-spotify1
  • icon-reddit1
  • icon-guest
  • icon-gowalla
  • icon-appstore
  • icon-blogger1
  • icon-cc
  • icon-dribbble1
  • icon-evernote
  • icon-flickr1
  • icon-google1
  • icon-viadeo1
  • icon-instapaper
  • icon-weibo1
  • icon-klout
  • icon-linkedin1
  • icon-meetup1
  • icon-vk1
  • icon-plancast
  • icon-disqus
  • icon-rss1
  • icon-skype1
  • icon-twitter1
  • icon-youtube1
  • icon-vimeo1
  • icon-windows2
  • icon-xing1
  • icon-yahoo1
  • icon-chrome1
  • icon-email3
  • icon-macstore
  • icon-myspace
  • icon-podcast1
  • icon-amazon1
  • icon-steam1
  • icon-cloudapp
  • icon-dropbox1
  • icon-ebay1
  • icon-facebook1
  • icon-github1
  • icon-github-circled
  • icon-googleplay
  • icon-itunes1
  • icon-plurk
  • icon-songkick
  • icon-lastfm1
  • icon-gmail
  • icon-pinboard
  • icon-openid1
  • icon-quora1
  • icon-soundcloud1
  • icon-tumblr1
  • icon-eventasaurus
  • icon-wordpress1
  • icon-yelp1
  • icon-intensedebate
  • icon-eventbrite
  • icon-scribd1
  • icon-posterous
  • icon-stripe1
  • icon-opentable
  • icon-cart
  • icon-print1
  • icon-angellist1
  • icon-instagram1
  • icon-dwolla
  • icon-appnet
  • icon-statusnet
  • icon-acrobat
  • icon-drupal1
  • icon-buffer
  • icon-pocket
  • icon-bitbucket1
  • icon-lego
  • icon-login
  • icon-stackoverflow
  • icon-hackernews
  • icon-lkdto
  • icon-ad
  • icon-address-book
  • icon-address-card
  • icon-adjust
  • icon-air-freshener
  • icon-align-center
  • icon-align-justify
  • icon-align-left
  • icon-align-right
  • icon-allergies
  • icon-ambulance
  • icon-american-sign-language-interpreting
  • icon-anchor
  • icon-angle-double-down
  • icon-angle-double-left
  • icon-angle-double-right
  • icon-angle-double-up
  • icon-angle-down
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angry
  • icon-ankh
  • icon-apple-alt
  • icon-archive
  • icon-archway
  • icon-arrow-alt-circle-down
  • icon-arrow-alt-circle-left
  • icon-arrow-alt-circle-right
  • icon-arrow-alt-circle-up
  • icon-arrow-circle-down
  • icon-arrow-circle-left
  • icon-arrow-circle-right
  • icon-arrow-circle-up
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrows-alt-h
  • icon-arrows-alt-v
  • icon-arrows-alt
  • icon-assistive-listening-systems
  • icon-asterisk
  • icon-at
  • icon-atlas
  • icon-atom
  • icon-audio-description
  • icon-award
  • icon-backspace
  • icon-backward
  • icon-balance-scale
  • icon-ban
  • icon-band-aid
  • icon-barcode
  • icon-bars
  • icon-baseball-ball
  • icon-basketball-ball
  • icon-bath
  • icon-battery-empty
  • icon-battery-full
  • icon-battery-half
  • icon-battery-quarter
  • icon-battery-three-quarters
  • icon-bed
  • icon-beer
  • icon-bell-slash
  • icon-bell
  • icon-bezier-curve
  • icon-bible
  • icon-bicycle
  • icon-binoculars
  • icon-birthday-cake
  • icon-blender
  • icon-blind
  • icon-bold
  • icon-bolt
  • icon-bomb
  • icon-bone
  • icon-bong
  • icon-book-open
  • icon-book-reader
  • icon-book
  • icon-bookmark
  • icon-bowling-ball
  • icon-box-open
  • icon-box
  • icon-boxes
  • icon-braille
  • icon-brain
  • icon-briefcase-medical
  • icon-briefcase
  • icon-broadcast-tower
  • icon-broom
  • icon-brush
  • icon-bug
  • icon-building
  • icon-bullhorn
  • icon-bullseye
  • icon-burn
  • icon-bus-alt
  • icon-bus
  • icon-business-time
  • icon-calculator
  • icon-calendar-alt
  • icon-calendar-check
  • icon-calendar-minus
  • icon-calendar-plus
  • icon-calendar-times
  • icon-calendar
  • icon-camera-retro
  • icon-camera
  • icon-cannabis
  • icon-capsules
  • icon-car-alt
  • icon-car-battery
  • icon-car-crash
  • icon-car-side
  • icon-car
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-square-down
  • icon-caret-square-left
  • icon-caret-square-right
  • icon-caret-square-up
  • icon-caret-up
  • icon-cart-arrow-down
  • icon-cart-plus
  • icon-certificate
  • icon-chalkboard-teacher
  • icon-chalkboard
  • icon-charging-station
  • icon-chart-area
  • icon-chart-bar
  • icon-chart-line
  • icon-chart-pie
  • icon-check-circle
  • icon-check-double
  • icon-check-square
  • icon-check
  • icon-chess-bishop
  • icon-chess-board
  • icon-chess-king
  • icon-chess-knight
  • icon-chess-pawn
  • icon-chess-queen
  • icon-chess-rook
  • icon-chess
  • icon-chevron-circle-down
  • icon-chevron-circle-left
  • icon-chevron-circle-right
  • icon-chevron-circle-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-child
  • icon-church
  • icon-circle-notch
  • icon-circle
  • icon-city
  • icon-clipboard-check
  • icon-clipboard-list
  • icon-clipboard
  • icon-clock
  • icon-clone
  • icon-closed-captioning
  • icon-cloud-download-alt
  • icon-cloud-upload-alt
  • icon-cloud
  • icon-cocktail
  • icon-code-branch
  • icon-code
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-coins
  • icon-columns
  • icon-comment-alt
  • icon-comment-dollar
  • icon-comment-dots
  • icon-comment-slash
  • icon-comment
  • icon-comments-dollar
  • icon-comments
  • icon-compact-disc
  • icon-compass
  • icon-compress
  • icon-concierge-bell
  • icon-cookie-bite
  • icon-cookie
  • icon-copy
  • icon-copyright
  • icon-couch
  • icon-credit-card
  • icon-crop-alt
  • icon-crop
  • icon-cross
  • icon-crosshairs
  • icon-crow
  • icon-crown
  • icon-cube
  • icon-cubes
  • icon-cut
  • icon-database
  • icon-deaf
  • icon-desktop
  • icon-dharmachakra
  • icon-diagnoses
  • icon-dice-five
  • icon-dice-four
  • icon-dice-one
  • icon-dice-six
  • icon-dice-three
  • icon-dice-two
  • icon-dice
  • icon-digital-tachograph
  • icon-directions
  • icon-divide
  • icon-dizzy
  • icon-dna
  • icon-dollar-sign
  • icon-dolly-flatbed
  • icon-dolly
  • icon-donate
  • icon-door-closed
  • icon-door-open
  • icon-dot-circle
  • icon-dove
  • icon-download
  • icon-drafting-compass
  • icon-draw-polygon
  • icon-drum-steelpan
  • icon-drum
  • icon-dumbbell
  • icon-edit
  • icon-eject
  • icon-ellipsis-h
  • icon-ellipsis-v
  • icon-envelope-open-text
  • icon-envelope-open
  • icon-envelope-square
  • icon-envelope
  • icon-equals
  • icon-eraser
  • icon-euro-sign
  • icon-exchange-alt
  • icon-exclamation-circle
  • icon-exclamation-triangle
  • icon-exclamation
  • icon-expand-arrows-alt
  • icon-expand
  • icon-external-link-alt
  • icon-external-link-square-alt
  • icon-eye-dropper
  • icon-eye-slash
  • icon-eye
  • icon-fast-backward
  • icon-fast-forward
  • icon-fax
  • icon-feather-alt
  • icon-feather
  • icon-female
  • icon-fighter-jet
  • icon-file-alt
  • icon-file-archive
  • icon-file-audio
  • icon-file-code
  • icon-file-contract
  • icon-file-download
  • icon-file-excel
  • icon-file-export
  • icon-file-image
  • icon-file-import
  • icon-file-invoice-dollar
  • icon-file-invoice
  • icon-file-medical-alt
  • icon-file-medical
  • icon-file-pdf
  • icon-file-powerpoint
  • icon-file-prescription
  • icon-file-signature
  • icon-file-upload
  • icon-file-video
  • icon-file-word
  • icon-file
  • icon-fill-drip
  • icon-fill
  • icon-film
  • icon-filter
  • icon-fingerprint
  • icon-fire-extinguisher
  • icon-fire
  • icon-first-aid
  • icon-fish
  • icon-flag-checkered
  • icon-flag
  • icon-flask
  • icon-flushed
  • icon-folder-minus
  • icon-folder-open
  • icon-folder-plus
  • icon-folder
  • icon-font-awesome-logo-full
  • icon-font
  • icon-football-ball
  • icon-forward
  • icon-frog
  • icon-frown-open
  • icon-frown
  • icon-funnel-dollar
  • icon-futbol
  • icon-gamepad
  • icon-gas-pump
  • icon-gavel
  • icon-gem
  • icon-genderless
  • icon-gift
  • icon-glass-martini-alt
  • icon-glass-martini
  • icon-glasses
  • icon-globe-africa
  • icon-globe-americas
  • icon-globe-asia
  • icon-globe
  • icon-golf-ball
  • icon-gopuram
  • icon-graduation-cap
  • icon-greater-than-equal
  • icon-greater-than
  • icon-grimace
  • icon-grin-alt
  • icon-grin-beam-sweat
  • icon-grin-beam
  • icon-grin-hearts
  • icon-grin-squint-tears
  • icon-grin-squint
  • icon-grin-stars
  • icon-grin-tears
  • icon-grin-tongue-squint
  • icon-grin-tongue-wink
  • icon-grin-tongue
  • icon-grin-wink
  • icon-grin
  • icon-grip-horizontal
  • icon-grip-vertical
  • icon-h-square
  • icon-hamsa
  • icon-hand-holding-heart
  • icon-hand-holding-usd
  • icon-hand-holding
  • icon-hand-lizard
  • icon-hand-paper
  • icon-hand-peace
  • icon-hand-point-down
  • icon-hand-point-left
  • icon-hand-point-right
  • icon-hand-point-up
  • icon-hand-pointer
  • icon-hand-rock
  • icon-hand-scissors
  • icon-hand-spock
  • icon-hands-helping
  • icon-hands
  • icon-handshake
  • icon-hashtag
  • icon-haykal
  • icon-hdd
  • icon-heading
  • icon-headphones-alt
  • icon-headphones
  • icon-headset
  • icon-heart
  • icon-heartbeat
  • icon-helicopter
  • icon-highlighter
  • icon-history
  • icon-hockey-puck
  • icon-home
  • icon-hospital-alt
  • icon-hospital-symbol
  • icon-hospital
  • icon-hot-tub
  • icon-hotel
  • icon-hourglass-end
  • icon-hourglass-half
  • icon-hourglass-start
  • icon-hourglass
  • icon-i-cursor
  • icon-id-badge
  • icon-id-card-alt
  • icon-id-card
  • icon-image
  • icon-images
  • icon-inbox
  • icon-indent
  • icon-industry
  • icon-infinity
  • icon-info-circle
  • icon-info
  • icon-italic
  • icon-jedi
  • icon-joint
  • icon-journal-whills
  • icon-kaaba
  • icon-key
  • icon-keyboard
  • icon-khanda
  • icon-kiss-beam
  • icon-kiss-wink-heart
  • icon-kiss
  • icon-kiwi-bird
  • icon-landmark
  • icon-language
  • icon-laptop-code
  • icon-laptop
  • icon-laugh-beam
  • icon-laugh-squint
  • icon-laugh-wink
  • icon-laugh
  • icon-layer-group
  • icon-leaf
  • icon-lemon
  • icon-less-than-equal
  • icon-less-than
  • icon-level-down-alt
  • icon-level-up-alt
  • icon-life-ring
  • icon-lightbulb
  • icon-link
  • icon-lira-sign
  • icon-list-alt
  • icon-list-ol
  • icon-list-ul
  • icon-list
  • icon-location-arrow
  • icon-lock-open
  • icon-lock
  • icon-long-arrow-alt-down
  • icon-long-arrow-alt-left
  • icon-long-arrow-alt-right
  • icon-long-arrow-alt-up
  • icon-low-vision
  • icon-luggage-cart
  • icon-magic
  • icon-magnet
  • icon-mail-bulk
  • icon-male
  • icon-map-marked-alt
  • icon-map-marked
  • icon-map-marker-alt
  • icon-map-marker
  • icon-map-pin
  • icon-map-signs
  • icon-map
  • icon-marker
  • icon-mars-double
  • icon-mars-stroke-h
  • icon-mars-stroke-v
  • icon-mars-stroke
  • icon-mars
  • icon-medal
  • icon-medkit
  • icon-meh-blank
  • icon-meh-rolling-eyes
  • icon-meh
  • icon-memory
  • icon-menorah
  • icon-mercury
  • icon-microchip
  • icon-microphone-alt-slash
  • icon-microphone-alt
  • icon-microphone-slash
  • icon-microphone
  • icon-microscope
  • icon-minus-circle
  • icon-minus-square
  • icon-minus
  • icon-mobile-alt
  • icon-mobile
  • icon-money-bill-alt
  • icon-money-bill-wave-alt
  • icon-money-bill-wave
  • icon-money-bill
  • icon-money-check-alt
  • icon-money-check
  • icon-monument
  • icon-moon
  • icon-mortar-pestle
  • icon-mosque
  • icon-motorcycle
  • icon-mouse-pointer
  • icon-music
  • icon-neuter
  • icon-newspaper
  • icon-not-equal
  • icon-notes-medical
  • icon-object-group
  • icon-object-ungroup
  • icon-oil-can
  • icon-om
  • icon-outdent
  • icon-paint-brush
  • icon-paint-roller
  • icon-palette
  • icon-pallet
  • icon-paper-plane
  • icon-paperclip
  • icon-parachute-box
  • icon-paragraph
  • icon-parking
  • icon-passport
  • icon-pastafarianism
  • icon-paste
  • icon-pause-circle
  • icon-pause
  • icon-paw
  • icon-peace
  • icon-pen-alt
  • icon-pen-fancy
  • icon-pen-nib
  • icon-pen-square
  • icon-pen
  • icon-pencil-alt
  • icon-pencil-ruler
  • icon-people-carry
  • icon-percent
  • icon-percentage
  • icon-phone-slash
  • icon-phone-square
  • icon-phone-volume
  • icon-phone
  • icon-piggy-bank
  • icon-pills
  • icon-place-of-worship
  • icon-plane-arrival
  • icon-plane-departure
  • icon-plane
  • icon-play-circle
  • icon-play
  • icon-plug
  • icon-plus-circle
  • icon-plus-square
  • icon-plus
  • icon-podcast
  • icon-poll-h
  • icon-poll
  • icon-poo
  • icon-poop
  • icon-portrait
  • icon-pound-sign
  • icon-power-off
  • icon-pray
  • icon-praying-hands
  • icon-prescription-bottle-alt
  • icon-prescription-bottle
  • icon-prescription
  • icon-print
  • icon-procedures
  • icon-project-diagram
  • icon-puzzle-piece
  • icon-qrcode
  • icon-question-circle
  • icon-question
  • icon-quidditch
  • icon-quote-left
  • icon-quote-right
  • icon-quran
  • icon-random
  • icon-receipt
  • icon-recycle
  • icon-redo-alt
  • icon-redo
  • icon-registered
  • icon-reply-all
  • icon-reply
  • icon-retweet
  • icon-ribbon
  • icon-road
  • icon-robot
  • icon-rocket
  • icon-route
  • icon-rss-square
  • icon-rss
  • icon-ruble-sign
  • icon-ruler-combined
  • icon-ruler-horizontal
  • icon-ruler-vertical
  • icon-ruler
  • icon-rupee-sign
  • icon-sad-cry
  • icon-sad-tear
  • icon-save
  • icon-school
  • icon-screwdriver
  • icon-search-dollar
  • icon-search-location
  • icon-search-minus
  • icon-search-plus
  • icon-search
  • icon-seedling
  • icon-server
  • icon-shapes
  • icon-share-alt-square
  • icon-share-alt
  • icon-share-square
  • icon-share
  • icon-shekel-sign
  • icon-shield-alt
  • icon-ship
  • icon-shipping-fast
  • icon-shoe-prints
  • icon-shopping-bag
  • icon-shopping-basket
  • icon-shopping-cart
  • icon-shower
  • icon-shuttle-van
  • icon-sign-in-alt
  • icon-sign-language
  • icon-sign-out-alt
  • icon-sign
  • icon-signal
  • icon-signature
  • icon-sitemap
  • icon-skull
  • icon-sliders-h
  • icon-smile-beam
  • icon-smile-wink
  • icon-smile
  • icon-smoking-ban
  • icon-smoking
  • icon-snowflake
  • icon-socks
  • icon-solar-panel
  • icon-sort-alpha-down
  • icon-sort-alpha-up
  • icon-sort-amount-down
  • icon-sort-amount-up
  • icon-sort-down
  • icon-sort-numeric-down
  • icon-sort-numeric-up
  • icon-sort-up
  • icon-sort
  • icon-spa
  • icon-space-shuttle
  • icon-spinner
  • icon-splotch
  • icon-spray-can
  • icon-square-full
  • icon-square-root-alt
  • icon-square
  • icon-stamp
  • icon-star-and-crescent
  • icon-star-half-alt
  • icon-star-half
  • icon-star-of-david
  • icon-star-of-life
  • icon-star
  • icon-step-backward
  • icon-step-forward
  • icon-stethoscope
  • icon-sticky-note
  • icon-stop-circle
  • icon-stop
  • icon-stopwatch
  • icon-store-alt
  • icon-store
  • icon-stream
  • icon-street-view
  • icon-strikethrough
  • icon-stroopwafel
  • icon-subscript
  • icon-subway
  • icon-suitcase-rolling
  • icon-suitcase
  • icon-sun
  • icon-superscript
  • icon-surprise
  • icon-swatchbook
  • icon-swimmer
  • icon-swimming-pool
  • icon-synagogue
  • icon-sync-alt
  • icon-sync
  • icon-syringe
  • icon-table-tennis
  • icon-table
  • icon-tablet-alt
  • icon-tablet
  • icon-tablets
  • icon-tachometer-alt
  • icon-tag
  • icon-tags
  • icon-tape
  • icon-tasks
  • icon-taxi
  • icon-teeth-open
  • icon-teeth
  • icon-terminal
  • icon-text-height
  • icon-text-width
  • icon-th-large
  • icon-th-list
  • icon-th
  • icon-theater-masks
  • icon-thermometer-empty
  • icon-thermometer-full
  • icon-thermometer-half
  • icon-thermometer-quarter
  • icon-thermometer-three-quarters
  • icon-thermometer
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-thumbtack
  • icon-ticket-alt
  • icon-times-circle
  • icon-times
  • icon-tint-slash
  • icon-tint
  • icon-tired
  • icon-toggle-off
  • icon-toggle-on
  • icon-toolbox
  • icon-tooth
  • icon-torah
  • icon-torii-gate
  • icon-trademark
  • icon-traffic-light
  • icon-train
  • icon-transgender-alt
  • icon-transgender
  • icon-trash-alt
  • icon-trash
  • icon-tree
  • icon-trophy
  • icon-truck-loading
  • icon-truck-monster
  • icon-truck-moving
  • icon-truck-pickup
  • icon-truck
  • icon-tshirt
  • icon-tty
  • icon-tv
  • icon-umbrella-beach
  • icon-umbrella
  • icon-underline
  • icon-undo-alt
  • icon-undo
  • icon-universal-access
  • icon-university
  • icon-unlink
  • icon-unlock-alt
  • icon-unlock
  • icon-upload
  • icon-user-alt-slash
  • icon-user-alt
  • icon-user-astronaut
  • icon-user-check
  • icon-user-circle
  • icon-user-clock
  • icon-user-cog
  • icon-user-edit
  • icon-user-friends
  • icon-user-graduate
  • icon-user-lock
  • icon-user-md
  • icon-user-minus
  • icon-user-ninja
  • icon-user-plus
  • icon-user-secret
  • icon-user-shield
  • icon-user-slash
  • icon-user-tag
  • icon-user-tie
  • icon-user-times
  • icon-user
  • icon-users-cog
  • icon-users
  • icon-utensil-spoon
  • icon-utensils
  • icon-vector-square
  • icon-venus-double
  • icon-venus-mars
  • icon-venus
  • icon-vial
  • icon-vials
  • icon-video-slash
  • icon-video
  • icon-vihara
  • icon-volleyball-ball
  • icon-volume-down
  • icon-volume-off
  • icon-volume-up
  • icon-walking
  • icon-wallet
  • icon-warehouse
  • icon-weight-hanging
  • icon-weight
  • icon-wheelchair
  • icon-wifi
  • icon-window-close
  • icon-window-maximize
  • icon-window-minimize
  • icon-window-restore
  • icon-wine-glass-alt
  • icon-wine-glass
  • icon-won-sign
  • icon-wrench
  • icon-x-ray
  • icon-yen-sign
  • icon-yin-yang
  • icon-address-book1
  • icon-address-card1
  • icon-angry1
  • icon-arrow-alt-circle-down1
  • icon-arrow-alt-circle-left1
  • icon-arrow-alt-circle-right1
  • icon-arrow-alt-circle-up1
  • icon-bell-slash1
  • icon-bell1
  • icon-bookmark1
  • icon-building1
  • icon-calendar-alt1
  • icon-calendar-check1
  • icon-calendar-minus1
  • icon-calendar-plus1
  • icon-calendar-times1
  • icon-calendar1
  • icon-caret-square-down1
  • icon-caret-square-left1
  • icon-caret-square-right1
  • icon-caret-square-up1
  • icon-chart-bar1
  • icon-check-circle1
  • icon-check-square1
  • icon-circle1
  • icon-clipboard1
  • icon-clock1
  • icon-clone1
  • icon-closed-captioning1
  • icon-comment-alt1
  • icon-comment-dots1
  • icon-comment1
  • icon-comments1
  • icon-compass1
  • icon-copy1
  • icon-copyright1
  • icon-credit-card1
  • icon-dizzy1
  • icon-dot-circle1
  • icon-edit1
  • icon-envelope-open1
  • icon-envelope1
  • icon-eye-slash1
  • icon-eye1
  • icon-file-alt1
  • icon-file-archive1
  • icon-file-audio1
  • icon-file-code1
  • icon-file-excel1
  • icon-file-image1
  • icon-file-pdf1
  • icon-file-powerpoint1
  • icon-file-video1
  • icon-file-word1
  • icon-file1
  • icon-flag1
  • icon-flushed1
  • icon-folder-open1
  • icon-folder1
  • icon-font-awesome-logo-full1
  • icon-frown-open1
  • icon-frown1
  • icon-futbol1
  • icon-gem1
  • icon-grimace1
  • icon-grin-alt1
  • icon-grin-beam-sweat1
  • icon-grin-beam1
  • icon-grin-hearts1
  • icon-grin-squint-tears1
  • icon-grin-squint1
  • icon-grin-stars1
  • icon-grin-tears1
  • icon-grin-tongue-squint1
  • icon-grin-tongue-wink1
  • icon-grin-tongue1
  • icon-grin-wink1
  • icon-grin1
  • icon-hand-lizard1
  • icon-hand-paper1
  • icon-hand-peace1
  • icon-hand-point-down1
  • icon-hand-point-left1
  • icon-hand-point-right1
  • icon-hand-point-up1
  • icon-hand-pointer1
  • icon-hand-rock1
  • icon-hand-scissors1
  • icon-hand-spock1
  • icon-handshake1
  • icon-hdd1
  • icon-heart1
  • icon-hospital1
  • icon-hourglass1
  • icon-id-badge1
  • icon-id-card1
  • icon-image1
  • icon-images1
  • icon-keyboard1
  • icon-kiss-beam1
  • icon-kiss-wink-heart1
  • icon-kiss1
  • icon-laugh-beam1
  • icon-laugh-squint1
  • icon-laugh-wink1
  • icon-laugh1
  • icon-lemon1
  • icon-life-ring1
  • icon-lightbulb1
  • icon-list-alt1
  • icon-map1
  • icon-meh-blank1
  • icon-meh-rolling-eyes1
  • icon-meh1
  • icon-minus-square1
  • icon-money-bill-alt1
  • icon-moon1
  • icon-newspaper1
  • icon-object-group1
  • icon-object-ungroup1
  • icon-paper-plane1
  • icon-pause-circle1
  • icon-play-circle1
  • icon-plus-square1
  • icon-question-circle1
  • icon-registered1
  • icon-sad-cry1
  • icon-sad-tear1
  • icon-save1
  • icon-share-square1
  • icon-smile-beam1
  • icon-smile-wink1
  • icon-smile1
  • icon-snowflake1
  • icon-square1
  • icon-star-half1
  • icon-star1
  • icon-sticky-note1
  • icon-stop-circle1
  • icon-sun1
  • icon-surprise1
  • icon-thumbs-down1
  • icon-thumbs-up1
  • icon-times-circle1
  • icon-tired1
  • icon-trash-alt1
  • icon-user-circle1
  • icon-user1
  • icon-window-close1
  • icon-window-maximize1
  • icon-window-minimize1
  • icon-window-restore1
  • icon-px
  • icon-accessible-icon
  • icon-accusoft
  • icon-adn
  • icon-adversal
  • icon-affiliatetheme
  • icon-algolia
  • icon-alipay
  • icon-amazon-pay
  • icon-amazon
  • icon-amilia
  • icon-android
  • icon-angellist
  • icon-angrycreative
  • icon-angular
  • icon-app-store-ios
  • icon-app-store
  • icon-apper
  • icon-apple-pay
  • icon-apple
  • icon-asymmetrik
  • icon-audible
  • icon-autoprefixer
  • icon-avianex
  • icon-aviato
  • icon-aws
  • icon-bandcamp
  • icon-behance-square
  • icon-behance
  • icon-bimobject
  • icon-bitbucket
  • icon-bitcoin
  • icon-bity
  • icon-black-tie
  • icon-blackberry
  • icon-blogger-b
  • icon-blogger
  • icon-bluetooth-b
  • icon-bluetooth
  • icon-btc
  • icon-buromobelexperte
  • icon-buysellads
  • icon-cc-amazon-pay
  • icon-cc-amex
  • icon-cc-apple-pay
  • icon-cc-diners-club
  • icon-cc-discover
  • icon-cc-jcb
  • icon-cc-mastercard
  • icon-cc-paypal
  • icon-cc-stripe
  • icon-cc-visa
  • icon-centercode
  • icon-chrome
  • icon-cloudscale
  • icon-cloudsmith
  • icon-cloudversify
  • icon-codepen
  • icon-codiepie
  • icon-connectdevelop
  • icon-contao
  • icon-cpanel
  • icon-creative-commons-by
  • icon-creative-commons-nc-eu
  • icon-creative-commons-nc-jp
  • icon-creative-commons-nc
  • icon-creative-commons-nd
  • icon-creative-commons-pd-alt
  • icon-creative-commons-pd
  • icon-creative-commons-remix
  • icon-creative-commons-sa
  • icon-creative-commons-sampling-plus
  • icon-creative-commons-sampling
  • icon-creative-commons-share
  • icon-creative-commons
  • icon-css3-alt
  • icon-css3
  • icon-cuttlefish
  • icon-d-and-d
  • icon-dashcube
  • icon-delicious
  • icon-deploydog
  • icon-deskpro
  • icon-deviantart
  • icon-digg
  • icon-digital-ocean
  • icon-discord
  • icon-discourse
  • icon-dochub
  • icon-docker
  • icon-draft2digital
  • icon-dribbble-square
  • icon-dribbble
  • icon-dropbox
  • icon-drupal
  • icon-dyalog
  • icon-earlybirds
  • icon-ebay
  • icon-edge
  • icon-elementor
  • icon-ello
  • icon-ember
  • icon-empire
  • icon-envira
  • icon-erlang
  • icon-ethereum
  • icon-etsy
  • icon-expeditedssl
  • icon-facebook-f
  • icon-facebook-messenger
  • icon-facebook-square
  • icon-facebook
  • icon-firefox
  • icon-first-order-alt
  • icon-first-order
  • icon-firstdraft
  • icon-flickr
  • icon-flipboard
  • icon-fly
  • icon-font-awesome-alt
  • icon-font-awesome-flag
  • icon-font-awesome-logo-full2
  • icon-font-awesome
  • icon-fonticons-fi
  • icon-fonticons
  • icon-fort-awesome-alt
  • icon-fort-awesome
  • icon-forumbee
  • icon-foursquare
  • icon-free-code-camp
  • icon-freebsd
  • icon-fulcrum
  • icon-galactic-republic
  • icon-galactic-senate
  • icon-get-pocket
  • icon-gg-circle
  • icon-gg
  • icon-git-square
  • icon-git
  • icon-github-alt
  • icon-github-square
  • icon-github
  • icon-gitkraken
  • icon-gitlab
  • icon-gitter
  • icon-glide-g
  • icon-glide
  • icon-gofore
  • icon-goodreads-g
  • icon-goodreads
  • icon-google-drive
  • icon-google-play
  • icon-google-plus-g
  • icon-google-plus-square
  • icon-google-plus
  • icon-google-wallet
  • icon-google
  • icon-gratipay
  • icon-grav
  • icon-gripfire
  • icon-grunt
  • icon-gulp
  • icon-hacker-news-square
  • icon-hacker-news
  • icon-hackerrank
  • icon-hips
  • icon-hire-a-helper
  • icon-hooli
  • icon-hornbill
  • icon-hotjar
  • icon-houzz
  • icon-html5
  • icon-hubspot
  • icon-imdb
  • icon-instagram
  • icon-internet-explorer
  • icon-ioxhost
  • icon-itunes-note
  • icon-itunes
  • icon-java
  • icon-jedi-order
  • icon-jenkins
  • icon-joget
  • icon-joomla
  • icon-js-square
  • icon-js
  • icon-jsfiddle
  • icon-kaggle
  • icon-keybase
  • icon-keycdn
  • icon-kickstarter-k
  • icon-kickstarter
  • icon-korvue
  • icon-laravel
  • icon-lastfm-square
  • icon-lastfm
  • icon-leanpub
  • icon-less
  • icon-line
  • icon-linkedin-in
  • icon-linkedin
  • icon-linode
  • icon-linux
  • icon-lyft
  • icon-magento
  • icon-mailchimp
  • icon-mandalorian
  • icon-markdown
  • icon-mastodon
  • icon-maxcdn
  • icon-medapps
  • icon-medium-m
  • icon-medium
  • icon-medrt
  • icon-meetup
  • icon-megaport
  • icon-microsoft
  • icon-mix
  • icon-mixcloud
  • icon-mizuni
  • icon-modx
  • icon-monero
  • icon-napster
  • icon-neos
  • icon-nimblr
  • icon-nintendo-switch
  • icon-node-js
  • icon-node
  • icon-npm
  • icon-ns8
  • icon-nutritionix
  • icon-odnoklassniki-square
  • icon-odnoklassniki
  • icon-old-republic
  • icon-opencart
  • icon-openid
  • icon-opera
  • icon-optin-monster
  • icon-osi
  • icon-page4
  • icon-pagelines
  • icon-palfed
  • icon-patreon
  • icon-paypal
  • icon-periscope
  • icon-phabricator
  • icon-phoenix-framework
  • icon-phoenix-squadron
  • icon-php
  • icon-pied-piper-alt
  • icon-pied-piper-hat
  • icon-pied-piper-pp
  • icon-pied-piper
  • icon-pinterest-p
  • icon-pinterest-square
  • icon-pinterest
  • icon-playstation
  • icon-product-hunt
  • icon-pushed
  • icon-python
  • icon-qq
  • icon-quinscape
  • icon-quora
  • icon-r-project
  • icon-ravelry
  • icon-react
  • icon-readme
  • icon-rebel
  • icon-red-river
  • icon-reddit-alien
  • icon-reddit-square
  • icon-reddit
  • icon-rendact
  • icon-renren
  • icon-replyd
  • icon-researchgate
  • icon-resolving
  • icon-rev
  • icon-rocketchat
  • icon-rockrms
  • icon-safari
  • icon-sass
  • icon-schlix
  • icon-scribd
  • icon-searchengin
  • icon-sellcast
  • icon-sellsy
  • icon-servicestack
  • icon-shirtsinbulk
  • icon-shopware
  • icon-simplybuilt
  • icon-sistrix
  • icon-sith
  • icon-skyatlas
  • icon-skype
  • icon-slack-hash
  • icon-slack
  • icon-slideshare
  • icon-snapchat-ghost
  • icon-snapchat-square
  • icon-snapchat
  • icon-soundcloud
  • icon-speakap
  • icon-spotify
  • icon-squarespace
  • icon-stack-exchange
  • icon-stack-overflow
  • icon-staylinked
  • icon-steam-square
  • icon-steam-symbol
  • icon-steam
  • icon-sticker-mule
  • icon-strava
  • icon-stripe-s
  • icon-stripe
  • icon-studiovinari
  • icon-stumbleupon-circle
  • icon-stumbleupon
  • icon-superpowers
  • icon-supple
  • icon-teamspeak
  • icon-telegram-plane
  • icon-telegram
  • icon-tencent-weibo
  • icon-the-red-yeti
  • icon-themeco
  • icon-themeisle
  • icon-trade-federation
  • icon-trello
  • icon-tripadvisor
  • icon-tumblr-square
  • icon-tumblr
  • icon-twitch
  • icon-twitter-square
  • icon-twitter
  • icon-typo3
  • icon-uber
  • icon-uikit
  • icon-uniregistry
  • icon-untappd
  • icon-usb
  • icon-ussunnah
  • icon-vaadin
  • icon-viacoin
  • icon-viadeo-square
  • icon-viadeo
  • icon-viber
  • icon-vimeo-square
  • icon-vimeo-v
  • icon-vimeo
  • icon-vine
  • icon-vk
  • icon-vnv
  • icon-vuejs
  • icon-weebly
  • icon-weibo
  • icon-weixin
  • icon-whatsapp-square
  • icon-whatsapp
  • icon-whmcs
  • icon-wikipedia-w
  • icon-windows
  • icon-wix
  • icon-wolf-pack-battalion
  • icon-wordpress-simple
  • icon-wordpress
  • icon-wpbeginner
  • icon-wpexplorer
  • icon-wpforms
  • icon-xbox
  • icon-xing-square
  • icon-xing
  • icon-y-combinator
  • icon-yahoo
  • icon-yandex-international
  • icon-yandex
  • icon-yelp
  • icon-yoast
  • icon-youtube-square
  • icon-youtube
  • icon-zhihu
  • 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
  • icon-realestate-advert
  • icon-realestate-air-conditioning
  • icon-realestate-bag
  • icon-realestate-balance
  • icon-realestate-balcony
  • icon-realestate-barrow
  • icon-realestate-bathtub
  • icon-realestate-bed
  • icon-realestate-billboard
  • icon-realestate-box
  • icon-realestate-bricks
  • icon-realestate-bridge
  • icon-realestate-brush
  • icon-realestate-building-crane
  • icon-realestate-building
  • icon-realestate-building2
  • icon-realestate-building3
  • icon-realestate-bungalow
  • icon-realestate-buying-a-home
  • icon-realestate-calculator
  • icon-realestate-calendar
  • icon-realestate-chair
  • icon-realestate-chair2
  • icon-realestate-chandelier
  • icon-realestate-check
  • icon-realestate-china-house
  • icon-realestate-clip
  • icon-realestate-combination-lock
  • icon-realestate-compasses
  • icon-realestate-concrete-mixer
  • icon-realestate-construction-helmet
  • icon-realestate-court
  • icon-realestate-credit
  • icon-realestate-dialogue
  • icon-realestate-doc
  • icon-realestate-doc2
  • icon-realestate-doc3
  • icon-realestate-document
  • icon-realestate-door
  • icon-realestate-door2
  • icon-realestate-drill
  • icon-realestate-eco
  • icon-realestate-elevator
  • icon-realestate-exchange
  • icon-realestate-fence
  • icon-realestate-fireplace
  • icon-realestate-folder
  • icon-realestate-garage
  • icon-realestate-garage2
  • icon-realestate-glasses
  • icon-realestate-hacksaw
  • icon-realestate-hammer
  • icon-realestate-hangar
  • icon-realestate-heating
  • icon-realestate-high-voltage
  • icon-realestate-horn
  • icon-realestate-hotel
  • icon-realestate-hotel2
  • icon-realestate-house-key
  • icon-realestate-house
  • icon-realestate-house2
  • icon-realestate-house3
  • icon-realestate-house4
  • icon-realestate-house5
  • icon-realestate-house6
  • icon-realestate-house7
  • icon-realestate-house8
  • icon-realestate-house9
  • icon-realestate-imac
  • icon-realestate-incision-plan
  • icon-realestate-ipad
  • icon-realestate-key
  • icon-realestate-key2
  • icon-realestate-ladder
  • icon-realestate-lamp
  • icon-realestate-lawn-mower
  • icon-realestate-letter
  • icon-realestate-light-bulb
  • icon-realestate-light-bulb2
  • icon-realestate-lock
  • icon-realestate-lock2
  • icon-realestate-love
  • icon-realestate-mail
  • icon-realestate-map
  • icon-realestate-medicine-chest
  • icon-realestate-mixer
  • icon-realestate-money
  • icon-realestate-moneybox
  • icon-realestate-motorhome
  • icon-realestate-move
  • icon-realestate-move2
  • icon-realestate-music
  • icon-realestate-music2
  • icon-realestate-my-house
  • icon-realestate-my-key
  • icon-realestate-newspapers
  • icon-realestate-nightstand
  • icon-realestate-nippers
  • icon-realestate-notebook
  • icon-realestate-pan
  • icon-realestate-parking
  • icon-realestate-parquet
  • icon-realestate-phone
  • icon-realestate-phone2
  • icon-realestate-phone3
  • icon-realestate-pipe-wrench
  • icon-realestate-plan
  • icon-realestate-plan2
  • icon-realestate-plan3
  • icon-realestate-plant
  • icon-realestate-plant2
  • icon-realestate-point
  • icon-realestate-pointer
  • icon-realestate-printer
  • icon-realestate-purse
  • icon-realestate-purse2
  • icon-realestate-realtor
  • icon-realestate-regulator
  • icon-realestate-rent
  • icon-realestate-rent2
  • icon-realestate-restaurant
  • icon-realestate-roller
  • icon-realestate-roulette
  • icon-realestate-scale
  • icon-realestate-search
  • icon-realestate-secateurs
  • icon-realestate-shop
  • icon-realestate-shovel
  • icon-realestate-shower
  • icon-realestate-skyscrapers
  • icon-realestate-skyscrapers2
  • icon-realestate-socket
  • icon-realestate-spatula
  • icon-realestate-stamp
  • icon-realestate-statistic
  • icon-realestate-suitcase2
  • icon-realestate-swimming-pool
  • icon-realestate-switch
  • icon-realestate-tag
  • icon-realestate-tap
  • icon-realestate-things
  • icon-realestate-time
  • icon-realestate-tools
  • icon-realestate-trowel
  • icon-realestate-tv
  • icon-realestate-vacuum-cleaner
  • icon-realestate-ventilation
  • icon-realestate-washing-machine
  • icon-realestate-window
  • icon-realestate-wood

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: 5834720953
  • 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 grid-5" data-user="5834720953" 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:

  1. 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.
  2. 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
  3. Enter the CAPTCHA info and click create
  4. 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.
  5. Make a note of the Consumer key, Consumer secret, Access token and Access token secret as highlighted below.

Twitter Feed OAuth Authentication

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

  1. Open the include/twitter/tweets.php file.
  2. 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.

MailChimp Subscriptions Setup

You can setup Mailchimp Subscriptions anywhere on your Website by simply Copy/Pasting the Sample Code present in the HTML Files. 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" ...
HTML 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

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

Version 5.8

Released on 29th March, 2019

Added:

  • Movers Niche Demo
  • Conference Niche Demo
  • New Revolution Slider Premium Template: Fitness
  • New Revolution Slider Premium Template: Holiday
  • New Pagination Styles
  • New Form Template: Car Rental
  • New Form Template: Website Costing
  • New Form Template: Plan
  • New Form Template in Modal: Health
  • New Form Template in Modal: Referral
  • New Form Template in Modal: Feedback
  • New Form Template in Modal: Subscribe
  • New Form Template in Modal: Subscribe Top

Updated:

  • Revolution Slider to Latest Version

Fixed:

  • Issue with Page Transition
  • Issue with Header Sticky Offset undefined
  • Issue with Landing Video alignment
  • Issue with SASS Variables not calculating properly for Blog, Portfolio and Shop Grids
  • Issue with Cookie Plugin Initialization

Changed Files:

  • CSS
    • style.css
      • Added .pagination related CSS Blocks
    • css/responsive.css
      • Code Update Moved the .landing-video from @media (min-width: 576px) and (max-width: 767.98px) to @media (max-width: 767.98px) Media Query
  • LESS & SASS & Imports
    • Files Updated Files updated according to the Main CSS changes
  • SASS
    • sass/portfolio.scss
      • Code Updated -$var to (-$var)
    • sass/blog.scss
      • Code Updated -$var to (-$var)
    • sass/shop.scss
      • Code Updated -$var to (-$var)
  • JS
    • js/functions.js
      • Code Updated modal: function() Function Block updated
      • Code Updated cookieNotify: function() Function Block updated
      • Code Updated pageTransition: function() Function Block updated
      • Code Updated SEMICOLON.documentOnReady > windowscroll: function() Function Block updated
  • HTML
    • demo-movers.html
      • File Added New Niche Demo
    • demo-conference.html
      • File Added New Niche Demo
    • rs-demo-premium-fitness.html
      • File Added New Revolution Slider Template
    • rs-demo-premium-holiday.html
      • File Added New Revolution Slider Template
    • forms-car-rental.html
      • File Added New Form Template
    • forms-website-costing.html
      • File Added New Form Template
    • forms-modal-health.html
      • File Added New Form Template
    • forms-modal-referral.html
      • File Added New Form Template
    • forms-modal-feedback.html
      • File Added New Form Template
    • forms-modal-subscribe-2.html
      • File Added New Form Template
    • forms-modal-subscribe-top.html
      • File Added New Form Template
    • forms-plan.html
      • File Added New Form Template
    • pagination-progress.html
      • File Updated New Pagination Styles
  • include/rs-plugin
    • Plugin Update
      • Updated Revolution Slider Plugin Updated

Version 5.7

Released on 3rd March, 2019

Added:

  • Non-Profit Niche Demo

Updated:

  • Bootstrap to Latest Version
  • PHPMailer to Latest Version

Fixed:

  • Issue with Minor CSS Issue in Interior Design Niche Demo CSS
  • Issue with Combination Filter Template
  • Issue with Mega Menu conflicting with On Click Main Menus
  • Issue with Page Loading Transitions not displaying on Pages with Infinity Scroll

Changed Files:

  • CSS
    • style.css
      • Added #primary-menu.on-click related CSS Blocks
      • Code Updated .page-transition-wrap and .css3-spinner CSS Blocks
    • css/responsive.css
      • Added #primary-menu.on-click related CSS Blocks
    • css/dark.css
      • Code Updated .page-transition-wrap and .css3-spinner CSS Blocks
    • css/bootstrap.css
      • File Updated Bootstrap updated to Latest Version
    • demos/interior-design/interior-design.css
      • File Updated #primary-menu ul > li > a CSS Block
  • JS
    • js/plugins.js
      • File Updated Bootstrap updated to Latest Version
    • js/functions.js
      • Code Updated pageTransition: function() Function Block
    • js/jquery.calendario.js
      • File Updated Calendario updated to Latest Version
    • js/cal-update.js
      • File Added Calendario File Dependency
  • PHP
    • include/phpmailer
      • Files Updated PHPMailer Files updated to Latest Version
  • HTML
    • demo-nonprofit.html
      • File Added New Template
    • combination-filter.html
      • File Updated Fixed Minor JS Issues

Version 5.6.1

Released on 11th February, 2019

Fixed:

  • Issue with Minor HTML Validation Errors
  • Issue with PHPMailer's Error Message Reason not displayed properly
  • Issue with Success Modal not displayed on Wedding Form Template
  • Issue with incorrect z-index value in Gym Niche Demo CSS File

Changed Files:

  • CSS
    • demos/gym/gym.css
      • Code Updated .twentytwenty-container CSS Block
  • PHP
    • include/form.php
      • Code Updated Fixed Issue with PHPMailer's Error Message Reason not displayed properly
  • HTML
    • HTML Files with Validation Errors
      • Code Updated Replaced data-pagi="false"data-items-xs="2" with data-pagi="false" data-items-xs="2"
      • Code Updated Replaced <div class="col-padding > with <div class="col-padding">
      • Deleted role="form" from <form> Tags

Version 5.6

Released on 7th February, 2019

Added:

  • Global Form Processor
  • Default On-Click Open/Close Menus on Mobile Devices for Better User Experience
  • Freelance Quotation Form
  • Fitness Calculator Form
  • Job Application Form
  • Restaurant Revervation Inline Form
  • Event Registration Form
  • Real Estate Enquiry Form
  • Feedback Form
  • Billing & Shipping Form
  • Fixed Feedback Form
  • Wedding RSVP Form
  • Modal Subscribe Form
  • Survey Buttons Form
  • WYSIWYG Editor (TinyMCE)

Updated:

  • Ion Range Slider to Latest Version
  • Form's Documentation

Fixed:

  • Minor CSS Issue with Travel Niche Demo
  • Issue with Filter not working on FAQs Page
  • Issue with Landing 3 Video and Button Responsiveness
  • Improved Forms Functionality
  • Issue with Swiper Slider
  • Improved Common Height functionality

Changed Files:

  • CSS
    • css/responsive.css
      • Code Updated #primary-menu ul li .mega-menu-content ul.mega-menu-column CSS Block
      • Code Updated .landing-video related CSS Blocks
    • demos/travel/travel.css
      • Code Updated @media (max-width: 767px) Media Query Block at the bottom of the File
    • css/components/ion.rangeslider.css
      • File Updated Latest Version
  • LESS & SASS & Imports
    • Files Updated Files updated according to the Main CSS changes
  • JS
    • js/functions.js
      • Code Updated pageTransition: function() Function Block
      • Code Updated superfish: function() Function Block
      • Code Updated menufunctions: function() Function Block
      • Added ajaxForm: function() Function Block
      • Deleted contactForm: function() Function Block
      • Deleted quickContact: function() Function Block
      • Deleted maxHeight: function() Function Block
      • Deleted commonHeight: function() Function Block
      • Deleted SEMICOLON.initialize.maxHeight(); Function Calls
      • Deleted $commonHeightEl = $('.common-height'), Variable
    • js/components/ion.rangeslider.js
      • File Updated Latest Version
  • HTML
    • faqs.html
      • File Updated Fixed Issue with Filter not working: Added .customjs Class to the .portfolio-filter Element
    • landing-3.html
      • File Updated Fixed Issue with Responsive
    • wysiwyg.html
      • Added WYSIWYG Editor
    • Forms Template
      • Added forms.html
      • Added forms-feedback.html
      • Added forms-inline.html
      • Added forms-job.html
      • Added forms-billing-shipping.html
      • Added forms-event-registration.html
      • Added forms-feedback-fixed.html
      • Added forms-freelance-quote.html
      • Added forms-real-estate-enquiry.html
      • Added forms-fitness.html
      • Added forms-modal-subscribe.html
      • Added forms-survey-button.html
      • Added forms-wedding.html
    • All the Templates with Forms
      • Files Updated Forms (except Subscription Forms) updated with New Codes:
        1. Replaced .contact-widget and .quick-contact-widget CLasses with .form-widget Class
        2. Replaced .contact-form-result and .quick-contact-form-result CLasses with .form-result Class
        3. Add a Hidden Input to Forms with name="prefix" Attribute
    • All the Templates with Common Height
      • Files Updated .common-height Class replaced with .align-items-stretch
  • Files
    • js/components/tinymce
      • Files Added TinyMCE Editor

Version 5.5

Released on 8th January, 2019

Added:

  • Course Niche Demo
  • Articles Niche Demo
  • New Icons Template listing all the Available Icons
  • Compatibility for working Alternate Mobile Menu with Split Menu
  • Ability to make Primary Menu and Page Menu sticky together

Updated:

  • Bootstrap to Latest Version
  • Animate.css to Latest Version
  • Swiper Plugin to Latest Version
  • Youtube BG Plugin to Latest Version
  • Bootstrap Select Component to Latest Version
  • File Uploads Component to Latest Version
  • Font Icons Updated

Fixed:

  • Issue with Cookie Modal value not getting saved with the Browser
  • Minor Bugs in the Revolution Slider Premium News and Slider Overlays Template
  • Issue with margins in Construction Services Template
  • Issue with Subscription Form Loader not showing properly during Form Processing
  • Issue with Popular Songs of the Week in Music Niche Demo
  • Issue with HTML Validation in Music Niche Demo
  • Issue with Theme Colors in App Landing Niche Demo
  • Issue with Product Overlay Icons Alignment on IE11 in Shop Niche Demo

Changed Files:

  • CSS
    • style.css
      • Code Updated #header.split-menu related CSS Blocks
    • css/responsive.css
      • Added .responsive-sticky-header:not(.static-sticky) ~ #page-menu.sticky-page-menu #page-menu-wrap CSS Block
    • demos/shop/shop.css
      • Code Updated .product-image .product-overlay CSS Block
    • css/bootstrap.css
      • File Updated Latest Version
    • css/animate.css
      • File Updated Latest Version
    • css/components/bs-select.css
      • File Updated Latest Version
    • css/components/bs-filestyle.css
      • File Updated Latest Version
    • css/font-icons.css
      • File Updated Latest Version
    • demos/music/music.css
      • Code Updated .music-tabs-albums .overlay CSS Block
    • demos/app-landing/css/colors.css
      • File Updated Fixed Issue with Theme Colors
    • CSS Vars Functionality
      • style-vars.css
      • style-rtl-vars.css
      • css/responsive-vars.css
      • css/responsive-rtl-vars.css
      • css/dark-vars.css
      • css/dark-rtl-vars.css
      • css/font-icons-vars.css
      • css/components/radio-checkbox-vars.css
      • css/components/bs-switches-vars.css
      • css/components/ion.rangeslider-vars.css
  • LESS & SASS & Imports
    • Files Updated Files updated according to the Main CSS changes
  • JS
    • js/plugins.js
      • Code Updated Updated Bootstrap
      • Code Updated Updated Youtube BG Plugin
      • Code Updated Updated Swiper Plugin
    • js/functions.js
      • Code Updated modal: function() Function Block
      • Code Updated sliderRun: function() Function Block
      • Code Updated subscription: function() Function Block
    • js/components/bs-select.js
      • File Updated Latest Version
    • js/components/bs-filestyle.js
      • File Updated Latest Version
  • HTML
    • demo-music.html
      • File Updated Fixed Minor bugs
    • demo-articles.html
      • Added New Template
    • demo-course.html
      • Added New Template
    • rs-demo-premium-news.html
      • File Updated Fixed Minor bugs
    • rs-demo-premium-sliding-overlays.html
      • File Updated Fixed Minor bugs
    • demos/construction/services.html
      • File Updated Fixed Minor bugs
    • icons.html
      • Added New Template
  • Files
    • css/fonts/font-icons.*
      • Files Updated Updated to Latest Version

Version 5.4.1

Released on 8th December, 2018

Updated:

  • SEO Demo

Fixed:

  • Issue with Dots Styling in the Gallery Section

Changed Files:

  • CSS
    • demos/app-landing/app-landing.css
      • File Updated Fixed Gallery Carousel Dots
    • demos/seo/seo.css
      • File Updated Changed some Styles
  • HTML
    • demo-seo.html
      • File Updated SEO Niche Demo

Version 5.4

Released on 23rd November, 2018

Added:

  • SEO Niche Demo
  • Shop Niche Demo
  • New Header: Floating Main Header with Transparent Topbar
  • Ability to use Transparent Menus on Mobile Devices
  • Ability to use Semi-Transparent Menus on Mobile Devices

Updated:

  • Documentation on Responsive Utilities

Improved:

  • Mega Menu Column Handling
  • jQuery Click Handlers/Events

Fixed:

  • Issue with Youtube Videos not playing on Revolution Sliders
  • Issue with Custom Grid Columns on Medium Devices
  • Removed css3-mediaqueries.js JS File Linking

Changed Files:

  • CSS
    • style.css
      • Added #primary-menu ul li .mega-menu-content Related CSS Blocks
      • Code Updated #primary-menu ul li .mega-menu-content ul.mega-menu-column.col-5 CSS Block
    • css/responsive.css
      • Code Updated #primary-menu ul li .mega-menu-content ul.mega-menu-column related CSS Blocks
      • Code Deleted .col_last { float: none; } CSS Block from the @media (max-width: 991.98px) Media Query
      • Code Updated .sidebar.col_last CSS Block inside the @media (max-width: 991.98px) Media Query
      • Added .col_last { float: none; } inside the @media (max-width: 767.98px) Media Query
  • JS
    • js/function.js
      • Code Updated superfish: function() Function Block
      • Code Updated Updated all $.click with .off( 'click' ).on( 'click' )
      • Code Updated swiperSliderMenu: function( onWinLoad ) Function Block
      • Code Updated revolutionSliderMenu: function( onWinLoad ) Function Block
  • LESS & SASS & Imports
    • Files Updated Files updated according to the Main CSS changes
  • HTML
    • demo-seo.html
      • File Added SEO Niche Demo Template
    • demo-shop.html
      • File Added Shop Niche Demo Template
    • header-transparent-responsive.html
      • File Added Transparent Header Responsive Demo Template
    • header-semi-transparent-responsive.html
      • File Added Semi Transparent Header Responsive Demo Template
    • header-floating-with-topbar.html
      • File Added Floating Header with Topbar Demo Template
    • mega-menu.html
      • Code Updated Mega Menu related Codes
    • Fixed Issue with Youtube Videos not playing on Revolution Sliders
      • File Updated rs-demo-carousel-media.html
      • File Updated rs-demo-gallery-youtube.html
      • File Updated rs-demo-hero-youtube.html
      • File Updated rs-demo-premium-4kvideos.html
      • File Updated rs-demo-slider-media.html
      • File Updated rs-demos.html
    • All HTML Files with css3-mediaqueries.js JS File Linking
      • Deleted Remove the JS Linking line of code

Version 5.3.1

Released on 1st October, 2018

Fixed:

  • Issue with Floating Header Mega Menu Alignment
  • Issue with Form Processing PHP Files with incorrect PHPMailer linking

Changed Files:

  • CSS
    • style.css
      • Code Updated .floating-header #primary-menu ul li.mega-menu .mega-menu-content CSS Block
  • LESS & SASS & Imports
    • Files Updated Files updated according to the Main CSS changes
  • PHP
    • include/sendemail.php
      • File Updated Fixed Issue with incorrect PHPMailer linking

Version 5.3

Released on 25th September, 2018

Added:

  • 7 New Revolution Slider Premium Templates
  • Inner Pages for Interior Design Niche Demo
  • Inner Pages for Writer Niche Demo
  • Flip Card Shortcode to display Interactive Content
  • Functional Shop Quantity modifier
  • Support for Responsive Facebook Videos

Updated:

  • Bootstrap to Latest Version
  • Revolution Slider to Latest Version
  • Revolution Slider Visual Editor to Latest Version
  • PHPMailer to Latest Version
  • Owl Carousel Plugin to Latest Version
  • Youtube BG Video Plugin to Latest Version
  • Infinite Scroll Plugin to Latest Version
  • Flex Slider Plugin to Latest Version
  • Superfish Plugin to Latest Version
  • DataTable Plugin to Latest Version
  • Select Boxes Plugin to Latest Version
  • DatePicker Plugin to Latest Version
  • TimePicker Plugin to Latest Version
  • DateRangePicker Plugin to Latest Version
  • Bootstrap File Style Plugin to Latest Version
  • PHPMailer Form Processing Email now supports CURL for wider and secure support
  • Documentation on Google Maps API Setup

Fixed:

  • Issue with Music Player on Safari
  • Issue with Tabs Navigation on Shop Single Templates
  • Issue with CSS3 Animations not working during Page Transitions
  • Issue with Select Dropdown in the Hero Area getting cut-off on Real Estate's Listing Template
  • Issue with Countdown Styling on Events Single Templates
  • Issue with Static Google Map not displaying on Construction Niche Demo
  • Issue with Calendar Row Content alignment
  • Issue with Top Cart Item Description overlap with Quantity when have more Text
  • Issue with Event Single Full Width Slider Template
  • Issue with Cookie Notifications Module
  • Issue with Photography Niche Demo Dark Scheme missing Template
  • Several CSS Styling & Dependency Improvements
  • All Media Queries updated to match Bootstrap Media Queries

Changed Files:

  • CSS
    • style.css
      • Code Updated .col_last related CSS Blocks
      • Code Updated .author-image CSS Blocks
      • Code Updated .postcontent .post-timeline related CSS Blocks
      • Added .events .entry:after CSS Block
      • Code Updated .entry-overlay CSS Block
      • Code Updated .entry-date CSS Block
      • Added .entry-image video CSS Block
      • Code Updated .top-cart-item-desc a CSS Block
      • Added .flip-card related CSS Blocks
      • Removed #portfolio-ajax-single h2 CSS Block
      • Added #portfolio-ajax-title h2 CSS Block
      • Added .yt-bg-player related CSS Blocks
      • Code Updated #cookie-notification related CSS Blocks
    • css/responsive.css
      • Code Updated .col_last related CSS Blocks
      • Code Updated .postcontent .post-timeline related CSS Blocks
      • Code Updated #cookie-notification related CSS Blocks
      • Removed .slider-arrow-top-sm and .slider-arrow-bottom-sm CSS Block
      • Code Updated All Media Queries updated to match Bootstrap Media Queries
    • css/bootstrap.css
      • File Updated Latest Version
    • css/calendar.css
      • Code Updated .fc-calendar .fc-row > div CSS Block
    • css/font-icons.css
      • Added .empty-icon CSS Block
    • css/components
      • File Updated bs-datatable.css
      • File Updated selec-boxes.css
      • File Updated bs-filestyle.css
      • File Updated timepicker.css
      • File Updated daterangepicker.css
      • File Updated datepicker.css
    • demos/interior-design/interior-design.css
      • Codes Updated Main CSS updated
    • demos/writer/writer.css
      • Codes Updated Main CSS updated
  • LESS & SASS & Imports
    • Files Updated Files updated according to the Main CSS changes
  • JS
    • js/plugins.js
      • Code Updated Bootstrap to Latest Version
      • Code Updated Superfish Plugin to Latest Version
      • Code Updated Youtube BG Video Plugin to Latest Version
      • Code Updated Infinite Scroll Plugin to Latest Version
      • Code Updated Flex Slider Plugin to Latest Version
      • Code Updated Cookie Plugin to Latest Version
    • js/functions.js
      • Added cartQuantity: function() Function Block
      • Added SEMICOLON.widget.cartQuantity(); Function to SEMICOLON.widget > init: function() Function Block
      • Code Updated pageTransition: function() Function Block
      • Code Updated sliderRun: function() Function Block
      • Code Updated animations: function() Function Block
      • Code Updated resizeVideos: function() Function Block
      • Code Updated cookieNotify: function() Function Block
      • Code Updated All the Cookie related Codes
    • js/components
      • File Updated bs-datatable.js
      • File Updated selec-boxes.js
      • File Updated bs-filestyle.js
      • File Updated timepicker.js
      • File Updated daterangepicker.js
      • File Updated datepicker.js
  • PHP
    • All the PHPMailer related Files
      • Code Updated PHPMailer Form Processing Email now supports CURL for wider and secure support
  • HTML
    • Interior Design Niche Demo Inner Pages
      • Added about.html
      • Added contact.html
      • Added faqs.html
      • Added projects.html
      • Added studio-single.html
    • Writer Niche Demo Inner Pages
      • Added about-me.html
      • Added article-single.html
      • Added contact.html
      • Added login.html
      • Added testimonials.html
    • 7 New Revolution Slider Templates
      • Added rs-demo-premium-real-estate.html
      • Added rs-demo-premium-news.html
      • Added rs-demo-premium-chef.html
      • Added rs-demo-premium-paintbrush.html
      • Added rs-demo-premium-club-flyer.html
      • Added rs-demo-premium-parallax.html
      • Added rs-demo-premium-shop.html
    • flip-cards.html
      • Added New Template
    • demo-music.html
      • File Updated Fixed Issue with Music Player on Safari
    • demos/real-estate/listing.html
      • File Updated Fixed Issue with Select Dropdown in the Hero Area getting cut-off
    • demo-construction.html
      • File Updated Fixed Issue with Static Google Map not displaying
    • demo-photographer-dark.html
      • Added Photography Niche Demo Dark Scheme
    • event-single-full-width-slider.html
      • File Updated Layout Updated and Parallax Issue fixed
    • All the Canvas Slider Templates
      • Files Updated Fixed Issue with Canvas Slider Grids
      • Files Updated Changed all instances of data-caption-animate to data-animate
      • Files Updated Changed all instances of data-caption-delay to data-delay
    • All the Shop Single Templates
      • Files Updated Fixed Issue with Tabs Navigation
    • All the Events Single Templates
      • Files Updated Fixed Issue with Countdown Styling
    • All the Templates with Google Maps
      • Files Updated API Keys Updated
    • All the Templates with Countdowns
      • Files Updated Countdown Timers updated
  • Plugins
    • include/rs-plugin
      • Files Updated All Files

Version 5.2.1

Released on 27th June, 2018

Added:

  • 3 New Revolution Slider Templates

Updated:

  • Revolution Slider to Latest Version

Fixed:

  • Issue with Image Hotspots not loading sometimes on Hosting Niche Demo
  • Issue with Magnific Popup iFrame jumping

Changed Files:

  • CSS
    • css/magnific-popup.css
      • Code Updated .mfp-iframe-scaler iframe CSS Block
  • HTML
    • demo-hosting.html
      • File Updated Fixed Issue with Image Hotspots not loading sometimes
    • rs-demo-premium-bubble-morph.html
      • File Updated Fixed Issue with Image Hotspots not loading sometimes
    • rs-demo-premium-distortion.html
      • File Updated Fixed Issue with Image Hotspots not loading sometimes
    • rs-demo-premium-funky.html
      • File Updated Fixed Issue with Image Hotspots not loading sometimes
  • Plugins
    • include/rs-plugin
      • Files Updated All Files

Version 5.2

Released on 5th June, 2018

Added:

  • New Niche Demo for Hosting
  • New Niche Demo for Photography
  • New Niche Demo for Bike
  • 7 New Inner Pages for Car Niche Demo
  • 5 New Inner Pages for Restaurant Niche Demo
  • 1 New Revolution Slider Demo

Updated:

  • Bootstrap to Latest Version
  • Swiper Plugin to Latest Version
  • Youtube BG Plugin
  • IsoTope Plugin
  • jPaginate Plugin

Improved:

  • Tabs now linkable from External Links
  • Responsive Tabs Functionality

Fixed:

  • Issue with CSS3 Spinner Style 2
  • Issue with Grid Images on Photography Demo on Mobile Devices
  • Issue with Responsiveness of Real Estate Info on Single Property Template
  • Issue with Typo Mistake with CSS Comments inside Agency Demo Main CSS
  • Issue with Double <a> HTML Validation Error in Several Templates

Changed Files:

  • CSS
    • style.css
      • Code Updated .css3-spinner CSS Block
    • css/bootstrap.css
      • Code Updated Updated to Latest Version of Bootstrap
    • demos/agency/agency.css
      • File Updated Fixed Typo Mistake with CSS Comments
    • demos/real-estate/real-estate.css
      • File Updated Fixed issue with Responsiveness of Real Estate Info in the Header
    • css/components/datepicker.css
      • File Moved demos/travel/css/datepicker.css to css/components/datepicker.css and linkings updated in HTML Files accordingly
  • LESS & SASS & Imports
    • Files Updated Files updated according to the Main CSS changes
  • JS
    • js/functions.js
      • Code Updated menuFunctions: function() Function Block
      • Code Updated tabs: function() Function Block
      • Code Updated tabsResponsiveResize: function() Function Block
    • js/plugins.js
      • Code Updated Bootstrap Plugin
      • Code Updated Youtube BG Plugin
      • Code Updated Swiper Plugin
      • Code Updated Isotope Plugin
      • Code Updated jPaginate Plugin
    • js/components/datepicker.js
      • File Moved demos/travel/js/datepicker.js to js/components/datepicker.js and linkings updated in HTML Files accordingly
  • HTML
    • demo-photography.html
      • File Updated Fixed Issue with Grid Items on Mobile Devices
    • demos/real-estate/single-property.html
      • File Updated Fixed Issue with Responsiveness of Real Estate Info in the Header
    • rs-demo-premium-nice.html
      • File Added New Revolution Slider Template
    • demos/car/
      • Files Added New Inner Pages
    • demos/restaurant/
      • Files Added New Inner Pages
    • All HTML Files
      • Files Updated Fixed Issue with Double <a> HTML Validation Error in Several Templates

Version 5.1

Released on 3rd April, 2018

Added:

  • New Niche Demo for Gym
  • New Niche Demo for News
  • New Niche Demo for Modern Blog
  • New Niche Demo for Headphones
  • 5 New Revolution Slider Demos
  • RTL Example Template
  • Dark Example Template

Updated:

  • Owl Carousel Plugin to Latest Version
  • Swiper Plugin to Latest Version
  • Revolution Slider Plugin

Fixed:

  • Issue with Revolution Slider Visual Editor
  • Issue with Swiper Slider Pagination not clickable
  • Issue with Blog Masonry not aligning properly after Flex Slides resize
  • Issue with Icons Position in Mobile Menu when open on Header Sticky Style 2
  • Issue with Touch Swipe on Carousels
  • Issue with autoPlay on Youtube BG Videos
  • Issue with Tabs customjs
  • Issue with Restaurant Niche Demos Thumbs Styling
  • Issue with Restaurant Niche Demos on RTL Layouts
  • Issue with Twitter Profile Image for Mixed https Content
  • Issue with Revolution Slider responsiveness on some templates
  • Issue with Footer Subscription Form on RTL Layouts
  • Issue with Layout in Tabs in the Medical Demo Departments Template
  • Issue with One Page Browser Template
  • Improved Youtube Plugin

Changed Files:

  • CSS
    • style.css
      • Code Updated .page-item.active .page-link, .page-link:hover, .page-link:focus CSS Block
    • css/responsive.css
      • Code Updated #primary-menu > div > ul { margin-top: 60px !important; } CSS Block updated to #primary-menu > div > ul { padding-top: 60px !important; }
    • demos/restaurant/restaurant.css
      • Code Updated .item-thumb .owl-dot CSS Block
      • Added .rtl .food-price CSS Block
    • css/colors.css & css/colors.php
      • Code Updated .page-item.active .page-link, .page-link:hover, .page-link:focus CSS Block
    • css/bootstrap-rtl.css
      • Code Updated Input groups
  • LESS & SASS
    • Files Updated Files updated according to the Main CSS changes
    • sliders.scss
      • Code Updated .slider-arrow-right, .slider-element .owl-next, .flex-next CSS Block
  • JS
    • js/functions.js
      • Code Updated sliderRun: function() Function Block
      • Code Updated loadflexslider: function() Function Block
      • Code Updated carousel: function() Function Block
      • Code Updated youtubeBgVideo: function() Function Block
      • Code Updated tabsJustify: function() Function Block
      • Code Updated tabsResponsive: function() Function Block
      • Code Updated tabsResponsiveResize: function() Function Block
      • Code Updated youtubeBgVideo: function() Function Block
    • js/plugins.js
      • Code Updated function sm_format_twitter(twitters) Function Block
      • Code Updated Owl Carousel Plugin
      • Code Updated Swiper Plugin
  • include/rs-plugin
    • Files Updated Updated all the Files
  • HTML
    • demo-restaurant.html
      • File Updated Fixed issue with Carousel on RTL Layouts
    • index-corporate.html
      • File Updated Fixed Revolution Slider responsiveness
    • one-page/op-revolution-fullscreen.html
      • File Updated Fixed Revolution Slider responsiveness
    • one-page/op-revolution-fullwidth.html
      • File Updated Fixed Revolution Slider responsiveness
    • New Revolution Slider Demos
      • rs-demo-premium-crypto.html
      • rs-demo-premium-clear-cut.html
      • rs-demo-clear-slider.html
      • rs-demo-clean-landing.html
      • rs-demo-premium-immersion-grid.html
    • index-rtl.html
      • Added RTL Example Template
    • index-dark.html
      • Added Dark Example Template
    • demos/medical/departments.html
      • File Update Tabs Issue
    • one-page/op-browser.html
      • File Update Slider Issue

Version 5.0.3

Released on 3rd February, 2018

Note: Since Canvas has been upgraded to Bootstrap 4, there are many breaking changes to the Code. It is highly recommended to follow the Bootstrap Migration Guide if you are upgrading Canvas from v4.x or lower.

Fixed:

  • Issue with Portfolio Parallax CSS
  • Issue with Sticky Footer
  • Issue with FullScreen Height Functionality
  • Issue with Slider Caption Positioning
  • Issue with Shop Grid Layouts
  • Issue with Flex Slider Caption Text
  • Issue with Owl Slider Navigation and Pagination in Slider Area
  • Issue with Menu Links in Travel Niche Demo
  • Issue with Hero Tabs in Travel Niche Demo
  • Issue with Parallax Page Title in Hotels Inner Page in Travel Niche Demo

Changed Files:

  • CSS
    • style.css
      • Code Updated .portfolio-parallax .portfolio-item CSS Block
      • Code Updated .flex-caption CSS Block
      • Code Updated .slider-element .owl-nav Related CSS Block
      • Code Updated .slider-element .owl-dots Related CSS Block
  • LESS & SASS
    • Files Updated Files updated according to the CSS changes
  • JS
    • js/functions.js
      • Code Updated SEMICOLON.documentOnLoad > init: function() Function Block
      • Code Updated SEMICOLON.documentOnResize > init: function() Function Block
      • Code Updated SEMICOLON.initialize > init: function() Function Block
      • Code Updated SEMICOLON.slider > init: function() Function Block
  • HTML
    • shop-*.html
      • File Updated Fixed issue with Product Grid Layouts
    • demo-travel.html
      • File Updated Fixed issue with Hero Tabs
      • File Updated Fixed Menu Links
    • travel-hotels.html
      • File Updated Fixed issue with Parallax Page Title

Version 5.0.2

Released on 24th January, 2018

Note: Since Canvas has been upgraded to Bootstrap 4, there are many breaking changes to the Code. It is highly recommended to follow the Bootstrap Migration Guide if you are upgrading Canvas from v4.x or lower.

Updated:

  • Bootstrap to v4.0.0 Stable
  • jQuery to v3.3.1

Improved:

  • Star Ratings Components Styling
  • Better Spacing for Table Cells in Datepicker
  • No Text Shadow helper class added

Fixed:

  • Issue with Shop Single Custom Linking Carousel Template
  • Issue with Duplicate Class Attributes in Restaurant Niche Demo
  • Issue with Top Sign In Link in Interior Design Niche Demo
  • Issue with Uploads Components
  • Issue with Off Canvas Mobile Menu not closing on touching outside
  • Issue with Date/Timepicker Plugin
  • Issue with Video Background not displaying on some Templates
  • Issue with Common Height on some Templates
  • Issue with Full Screen, Responsive Heights and Common Heights conflict
  • Issue with Pages not displaying on IE11
  • Issue with Bootstrap Components styling on Dark Mode
  • Issue with Bootstrap Components colors on Colors.css/php
  • Issue with Grid Layout on some Chart Templates

Changed Files:

  • CSS
    • style.css
      • Code Updated .datepicker td, .datepicker th CSS Block
      • Code Updated .rating-* Related CSS Blocks
      • Code Updated .vertical-middle Related CSS Blocks
    • bootstrap.css
      • File Updated v4.0.0 Stable
    • css/components/bs-filestyle.css
      • File Updated Fixed Rendering Issues
    • css/components/timepicker.css
      • File Updated Fixed Rendering Issues
    • demos/car/car.css
      • Code Updated .dropdown-* related CSS Blocks
    • demos/interior-design/interior-design.css
      • Code Updated #side-panel-trigger CSS Block inside the @media (max-width: 991px) Media Query
    • css/dark.css
      • Code Updated .dropdown-item related CSS Blocks
      • Code Updated .page-link related CSS Blocks
      • Code Updated Changed .panel-* to .card-* related CSS Blocks
      • Deleted .btn-default related CSS Blocks
      • Deleted .well related CSS Blocks
    • All the css/colors.css/php Files
      • Code Updated .nav-link related CSS Blocks
      • Code Updated .page-link related CSS Blocks
  • LESS & SASS
    • Files Updated Files updated according to the CSS changes
  • JS
    • js/jquery.js
      • Code Updated v3.3.1
    • js/plugins.js
      • Code Updated Bootstrap to v4.0.0 Stable
    • js/functions.js
      • Code Updated topSearch: function() Function Block
      • Code Updated SEMICOLON.documentOnLoad > init: function() Function Block
      • Code Updated SEMICOLON.documentOnResize > init: function() Function Block
      • Code Updated SEMICOLON.initialize > init: function() Function Block
      • Code Updated youtubeBgVideo: function() Function Block
    • js/components/bs-filestyle.js
      • File Updated Fixed Rendering Issues
    • js/components/timepicker.js
      • File Updated Fixed Rendering Issues
  • HTML
    • shop-single-custom-linking.html
      • File Updated Fixed issue with Full Button
    • component-uploads.html
      • File Updated Fixed issue with Upload Files Rendering
    • demo-restaurant.html
      • File Updated Fixed issue with duplicate class attributes
    • demo-interior-design.html
      • File Updated Fixed issue with Top Sign In Link
    • charts-tooltips-positioning.html
      • File Updated Added .row Class to .charts-container Container
    • charts-tooltips-interactions.html
      • File Updated Added .row Class to .charts-container Container
    • charts-tooltips-border.html
      • File Updated Added .row Class to .charts-container Container
    • charts-scales-gridlines-display.html
      • File Updated Added .row Class to .charts-container Container
    • charts-line-point-styles.html
      • File Updated Added .row Class to .charts-container Container

Version 5.0.1

Released on 19th January, 2018

Note: Since Canvas has been upgraded to Bootstrap 4, there are many breaking changes to the Code. It is highly recommended to follow the Bootstrap Migration Guide if you are upgrading Canvas from v4.x or lower.

Fixed:

  • Issue with Button displaying Full Width on Index Corporate Layout 4
  • Issue with Landing 5 Template
  • Issue with Container Area Width when using Side Header
  • Issue with Video Grid on Car Niche Demo
  • Issue with 360 Images Rotator on Car Niche Demo
  • Issue with LESS and SASS Files

Changed Files:

  • CSS
    • style.css
      • Code Updated .side-header:not(.open-header) #wrapper .container CSS Block
  • JS
    • demos/car/js/360rotator.js
      • File Updated Issue with 360 Image Rotation
  • HTML
    • index-corporate-4.html
      • File Updated Fixed issue with Full Button
    • landing-5.html
      • File Updated Fixed issue with Slider Area Layout
    • demo-car.html
      • File Updated Fixed issue with Video Grid

Version 5.0

Released on 18th January, 2018

Note: Since Canvas has been upgraded to Bootstrap 4, there are many breaking changes to the Code. It is highly recommended to follow the Bootstrap Migration Guide if you are upgrading Canvas from v4.x or lower.

Added:

  • New Bootstrap 4 related Components
  • New Revolution Slider Templates
  • Real Estate Inner Pages
  • Multiple Canvas Swipers supported on the Page
  • Skrollr Parallax Library for smoother and better Parallax compatibility
  • 4 New One Page Templates
  • Dedicated Form Elements Template

Updated:

  • jQuery Library to Latest Version
  • Bootstrap 4
  • Youtube Background Video Player Plugin to the Latest Version
  • Animate.css to the Latest Version
  • PHPMailer Plugin to Latest Version
  • Isotope Plugin to Latest Version
  • ImagesLoaded Plugin to Latest Version
  • jQuery Paginate Plugin updated to support Bootstrap 4
  • Infinite Scroll Plugin to Latest Version
  • Flex Slider Plugin to Latest Version
  • Hoven Intent Plugin to Latest Version
  • Owl Carousel Plugin to Latest Version
  • Animsition Plugin to Latest Version
  • jQuery UI Tabs to Latest Version
  • jQuery Validation Plugin to Latest Version
  • jQuery Toastr Plugin to Latest Version
  • Sticky Sidebar Plugin to Latest Version
  • Swiper Slider Plugin to Latest Version
  • Revolution Slider Plugin to Latest Version
  • Charts Plugin to Latest Version

Improved:

  • Isotope GridInit Function now supports RTL Item Origin
  • Improved Portfolio Full Width Grid Calculations
  • Infinite Scroll Functionality
  • Portfolio 1 Column Layout uses less CSS Codes
  • Post Grid Layouts uses less CSS Codes
  • Slider Captions not hidden on Mobile Devices by default, so you can use Bootstrap Responsive Utilities according to your convenience
  • Hero Blur functionality in Resume Niche Demo Template
  • Google Font links updated

Fixed:

  • Missing RTL related Image Icons
  • Issue with Slider Area position when Side Panel (push style) open on Mobile Devices

Removed:

  • Nivo Slider
  • Camera Slider
  • Elastic Slider
  • Vector Maps
  • Component Editable Fields
  • Stellar Parallax Plugin
  • Smooth Scroll Plugin

Changed Files:

  • CSS
    • style.css
      • Code Updated #header.transparent-header.floating-header .container CSS Block
      • Code Updated #header.transparent-header.floating-header.sticky-header .container CSS Block
      • Code Updated :not(.badge) added to span:not(.nocolor) for Headings
      • Code Updated .portfolio.portfolio-full CSS Block
      • Code Updated .portfolio.portfolio-1 related CSS Blocks
      • Added .page-load-status CSS Block
      • Code Updated .container CSS Block in #header Containers
      • Code Updated .postcontent, .postcontent.bothsidebar and .sidebar now have Fluid Widths
      • Code Updated .entry CSS Block
      • Added .entry:after CSS Block
      • Code Updated .post-grid related CSS Blocks
      • Code Updated .masonry-thumbs.col-* changed to .masonry-thumbs.grid-*
      • Code Updated #primary-menu ul li .mega-menu-content ul.mega-menu-column CSS Block
      • Code Updated .toast-* related CSS Blocks
      • Code Updated #slider-arrow-* updated to .slider-arrow-*
      • Code Updated #slide-number-* updated to .slide-number-*
      • Code Updated Replaced #slider to .slider-element in several Code Blocks
      • Added Bootstrap Adjustments at the Top of the File to match the Stylings of Canvas
      • Code Update .slider-caption related CSS Blocks
      • Code Update #page-title.page-title-center .breadcrumb CSS Block
      • Code Update .text-overlay CSS Block
      • Code Update body.side-push-panel.side-panel-open.stretched .slider-parallax-inner CSS Block
      • Code Update .post-timeline related CSS Blocks
      • Code Update blockquote related CSS Blocks
    • css/animate.css
      • Code Updated Updated to the Latest Version
    • css/colors.css
      • Code Updated :not(.badge) added to span:not(.nocolor) for Headings
    • css/colors.php
      • Code Updated :not(.badge) added to span:not(.nocolor) for Headings
    • css/dark.css
      • Deleted .pager related CSS Blocks
      • Code Updated .dark .input-group-addon replaced with .dark .input-group-text
    • demos/construction/construction.css
      • Deleted .pager related CSS Blocks
    • demos/resume/resume.css
      • Code Update .blurred-img related CSS Blocks
      • Added .entry related CSS Blocks
    • demos/ecommerce/ecommerce.css
      • Code Update item-desc p CSS Block
    • css/responsive.css
      • Code Updated .postcontent, .postcontent.bothsidebar, .sidebar and .sidebar-widgets-wrap related Code Blocks in all the Media Queries
      • Code Updated .sidebar-widgets-wrap .widget Code Blocks
      • Code Updated .portfolio.portfolio-1 related CSS Blocks
      • Code Updated #page-title .breadcrumb CSS Block
      • Code Updated .post-grid related CSS Blocks
      • Code Updated .portfolio .portfolio-item CSS Block inside @media (max-width: 479px) Media Query
      • Code Updated Replaced #slider to .slider-element in several Code Blocks
      • Code Updated Media Queries matched with Bootstrap 4's Media Queries
        • @media (min-width: 480px) and (max-width: 767px) replaced with @media (min-width: 576px) and (max-width: 767px)
        • @media (max-width: 479px) replaced with @media (max-width: 575px)
      • Code Updated .container related CSS Blocks
      • Code Updated #top-search a related CSS Blocks inside @media (max-width: 575px) Media Query
      • Code Updated #top-search form input related CSS Blocks inside @media (max-width: 575px) Media Query
      • Code Updated #side-panel-trigger related CSS Blocks inside @media (max-width: 575px) Media Query
      • Code Updated #top-account related CSS Blocks inside @media (max-width: 575px) Media Query
      • Added #primary-menu-trigger CSS Block inside @media (max-width: 575px) Media Query
      • Code Update .slider-caption related CSS Blocks
      • Code Update #top-account related CSS Blocks
  • JS
    • js/plugins.js
      • Code Updated jQuery Library
      • Code Updated Bootstrap Framework
      • Code Updated Youtube Background Video Player Plugin
      • Code Updated Isotope Plugin
      • Code Updated ImagesLoaded Plugin
      • Code Updated jQuery Paginate Plugin
      • Code Updated Infinite Scroll Plugin
      • Code Updated Flex Slider Plugin
      • Code Updated Hover Intent Plugin
      • Deleted Smooth Scroll Plugin
      • Code Updated Animsition Plugin
      • Code Updated jQuery UI Tabs Plugin
      • Code Updated jQuery Form Validation Plugin
      • Code Updated jQuery Toastr Plugin
      • Code Updated Sticky Sidebar Plugin
      • Code Updated Swiper Slider Plugin
      • Deleted Stellar Plugin
      • Added Skrollr Plugin
      • Code Updated http:// Links updated to https://
    • js/functions.js
      • Code Updated gridInit: function( $container ) Function Block
      • Code Updated setFullColumnWidth: function( element ) Function Block
      • Code Removed Infinite Scroll related Function Block
      • Code Updated .masonry-thumbs.col-* changed to .masonry-thumbs.grid-*
      • Code Updated sliderRun: function() Function Block
      • Code Updated responsiveClasses: function() Function Block
      • Code Updated accordions: function() Function Block
      • Code Updated tabsResponsiveResize: function() Function Block
      • Added New Variable $sliderElement and used it in several places replacing the $slider Variable
      • Code Updated parallax: function() Function Block
      • Deleted imagePreload: function(selector, parameters) Function Block
    • js/jquery.gmap.js
      • Code Updated http:// updated to https://
  • LESS
    • All Files
      • Code Update According to Main CSS Files (refer changelog)
  • SASS
    • All Files
      • Code Update According to Main CSS Files (refer changelog)
  • RTL
    • All Files
      • Code Update According to Main CSS Files (refer changelog)
  • HTML
    • images/icons
      • Files Updated RTL related Files added to the Folder
    • All Files Updated All the Files updated to support Bootstrap 4
    • portfolio-infinity-scroll.html
      • Code Update Infinite Scroll related Codes updated
    • blog-timeline.html
      • Code Update Infinite Scroll related Codes updated
    • blog-masonry.html
      • Code Update Infinite Scroll related Codes updated
    • All Files with Masonry Thumbs
      • Code Updated .masonry-thumbs.col-* changed to .masonry-thumbs.grid-*
    • slider-canvas-*.html (3,4,5)
      • Code Updated Swiper Slider JS Code
    • lists-panels.html
      • File Name Updated lists-panels.html File Name updated to lists-cards.html and related Menu Links udpated
    • demo-resume.html
      • Code Updated CSS in the <head> removed
    • form-elements.html
      • Added New Template
  • PHP
    • File Update All the PHP Files using PHPMailer

  • Package Changes

    Package Changes means changes accross all the Files.

    • Code Updated Replaced all instances of .show with .d-block
    • Code Updated Replaced .pager with Bootstrap Buttons
    • Code Updated Updated .owl-dot CSS
    • Deleted Everything related to Camera Slider, Elastic Slider, Nivo Slider, Vector Maps and Component Editable
    • Code Updated jQuery(window).load( function() to jQuery(window).on( 'load', function()
    • Code Updated Device Breakpoints across all the JS Functions, CSS and HTML/PHP Files.
      • lg renamed to xl
      • md renamed to lg
      • sm renamed to md
      • xs renamed to sm
      • xxs renamed to xs
    • Deleted xxs Responsive Breakpoint and renamed to xs according to Bootstrap 4
    • Deleted xxs Responsive Breakpoint and renamed to xs according to Bootstrap 4
    • Deleted xxs Responsive Breakpoint and renamed to xs according to Bootstrap 4
    • Added .slider-element to all #slider Containers in HTML Files for Bootstrap 4
    • Code Updated Grid Columns across all the HTML/PHP Files.
      • .col-lg-* renamed to .col-xl-*
      • .col-md-* renamed to .col-lg-*
      • .col-sm-* renamed to .col-md-*
    • Code Updated Updated all Bootstrap Column Offset Classes
    • Code Updated .input-group-addon to .input-group-prepend and .input-group-btn to .input-group-append based on Bootstrap 4
    • Code Updated Responsive Utilities classes added to .slider-caption > p where needed
    • Code Updated Google Font Links updated

Version 4.5.1

Released on 26th July, 2017

Fixed:

  • Issue with Revolution Slider Templates
  • Issue with data-scrollto Functionality

Changed Files:

  • JS
    • js/functions.js
      • Code Updated linkScroll: function() Function Block
      • Code Updated goToTopScroll: function() Function Block
  • HTML
    • Code Updated Revolution Slider Markup updated in the following files for compatibility with Latest Version:
      • index-corporate.html
      • index-restaurant.html
      • index-shop.html
      • op-revolution-fullscreen.html
      • op-revolution-fullwidth.html
      • slider-revolution-fullwidth.html
      • slider-revolution-html5-videos.html
      • slider-revolution-kenburns.html
      • slider-revolution.html

Version 4.5

Released on 24th July, 2017

Added:

  • Music Niche Demo
  • Car Niche Demo
  • Barber Niche Demo
  • Pets Niche Demo
  • eCommerce Niche Demo
  • Business Niche Demo
  • Resume Niche Demo
  • 5+ Premium Revolution Slider Templates
  • Menu on Click Functionality
  • Portfolio Full now supports Responsive Column Defining using data-col-** Attribute

Updated:

  • Revolution Slider Plugin to Latest Version
  • Revolution Slider Visual Editor to Latest Version
  • PHPMailer to Latest Version

Fixed:

  • LESS/SASS Files and added missing styling
  • Side Navigation Template. .custom-js class to .customjs
  • Windows Menu Trigger CSS
  • .easypiechart class changed to .rounded-skill class in CSS/LESS/SASS files
  • Issue with .customjs on Tabs Functionality

Changed Files:

  • CSS
    • css/responsive.css
      • Code Updated .windows-mobile-menu CSS Block
    • style-rtl.css
      • Code Updated .easypiechart class changed to .rounded-skill class
    • css/dark.css
      • Code Updated .easypiechart class changed to .rounded-skill class
  • LESS
    • less/dark.less
      • Code Updated .easypiechart class changed to .rounded-skill class
    • less/shortcodes/counter-skills.less
      • Code Updated .easypiechart class changed to .rounded-skill class
  • SASS
    • sass/dark.scss
      • Code Updated .easypiechart class changed to .rounded-skill class
    • sass/shortcodes/counter-skills.sass
      • Code Updated .easypiechart class changed to .rounded-skill class
  • JS
    • js/functions.js
      • Code Updated defineColumns: function() Function Block
      • Code Updated linkScroll: function() Function Block
      • Code Updated menuFunctions: function() Function Block
      • Code Updated pageTransitions: function() Function Block
      • Code Updated tabsJustify: function() Function Block
      • Code Updated tabsResponsive: function() Function Block
      • Code Updated tabsResponsiveResize: function() Function Block
  • HTML
    • demo-ecommerce.html
      • Added eCommerce Website Niche Demo
    • demo-music.html
      • Added Music Player Niche Demo
    • demo-car.html
      • Added Cars Showcase Niche Demo
    • demo-barber.html
      • Added Barber Shop Niche Demo
    • demo-business.html
      • Added Business Niche Demo
    • demo-resume.html
      • Added Resume/CV Niche Demo
    • demo-pet.html
      • Added Pets Niche Demo
    • rs-demo-*.html
      • Added New Revolution Slider Templates
    • side-navigation.html
      • Code Update Side Navigaion Tabs Updated. .custom-js class to .customjs
  • include/rs-plugin
    Folder Updated

Version 4.4

Released on 14th April, 2017

Added:

  • Restaurant Niche Demo
  • Photography Niche Demo
  • Interior Design Studio Niche Demo
  • Writer Niche Demo
  • 15 New Revolution Slider Templates
  • 50+ Chart Example Templates

Updated:

  • Revolution Slider Plugin to Latest Version
  • Revolution Slider Visual Editor Plugin to Latest Version
  • ChartJS Plugin to Latest Version

Changed:

  • ChartJS Plugin Codes removed from js/plugins.js File and Standalone File used on Chart related Templates.

Fixed:

  • Issue with Revolution Slider Video Layer Setting data-videoloop="none" affecting Delays in the Subsequent Slides

Changed Files:

  • JS
    • js/plugins.js
      • Deleted ChartJS Plugin Codes
    • js/charts.js
      • Added ChartJS Plugin Codes
  • HTML
    • All rs-demo-*.html Files
      • Code Update All Revolution Slider Demo Files
    • demo-restaurant.html
      • Added Restaurant Niche Demo
    • demo-interior-design.html
      • Added Interior Design Niche Demo
    • demo-photography.html
      • Added Photography Niche Demo
    • demo-writer.html
      • Added Writer Niche Demo
    • charts-*.html Files
      • Added New Chart Example Templates
    • index-corporate.html
      • Code Update Fixed Issue with 2nd Slide Delay in Revolution Slider
    • services.html
      • Code Update Updated to New Charts
    • sections.html
      • Code Update Updated to New Charts
    • one-page/op-chart.html
      • Code Update Updated to New Charts

Version 4.3

Released on 10th February, 2017

Added:

  • Real Estate Niche Demo with 3 Hero Layouts
  • Sticky Sidebar
  • Pricing Toggle Switch in Pricing Template

Updated:

  • PHPMailer to Latest Version
  • Youtube BG Plugin to Latest Version
  • Countdown Plugin to Latest Version
  • Isotope Plugin to Latest Version
  • Swiper Plugin to Latest Version
  • Documentation

Fixed:

  • Issue with Side Tabs in RTL Layout
  • Issue with Bootstrap Focus Color on Anchor Links
  • Issue with Large Navigation Bullets
  • Issue with PHPMailer Vulnerabilities
  • Issue with Helper Classes missing in LESS and SASS
  • Issue with reCaptcha Validation Implementation

Changed Files:

  • CSS
    • style-rtl.css
      • Code Update .side-tabs related CSS Blocks
    • css/bootstrap.css
      • Code Update Updated File
  • JS
    • js/functions.js
      • Added stickySidebar: function() Function Block
      • Added SEMICOLON.widget.stickySidebar(); Function inside SEMICOLON.widget > init: function() Function Block
    • js/plugins.js
      • Added stickySidebar: function() Function Block
  • PHP
    • include/phpmailer
      • Updated all the Files
    • Code Update Updated All the PHP Form Processing with reCatpcha Codes
  • SASS
    • sass/helpers.scss
      • Added missing Helper Classes
  • LESS
    • sass/helpers.less
      • Added missing Helper Classes
  • HTML
    • demo-real-estate.html
      • Added Real Estate Hero Layout 1
    • demo-real-estate-2.html
      • Added Real Estate Hero Layout 2
    • demo-real-estate-3.html
      • Added Real Estate Hero Layout 3
    • sticky-sidebar.html
      • Added Sticky Sidebar Template
    • pricing.html
      • Added Pricing Toggle Switch
    • slider-revolution-html5-videos.html
      • Code Update Fixed Issue with Large Bullets

Version 4.2

Released on 1st December, 2016

Added:

  • 11 Inner Pages for Construction Niche Demo
  • 8 Inner Pages for Medical Niche Demo
  • New Premium Templates for Revolution Slider
  • Option to Disable Placeholder for HTML5 Videos on Mobile Devices
  • SASS Files for Responsive and Dark CSS

Updated:

  • Bootstrap to Latest Version
  • Revolution Slider to Latest Version
  • Superfish Plugin to Latest Version
  • Youtube BG Video Plugin to Latest Version
  • Text Rotator Plugin to Latest Version
  • ImagesLoaded Plugin to Latest Version
  • Swiper Slider Plugin to Latest Version
  • Toastr Notification Plugin to Latest Version
  • Flex Slider Plugin to Latest Version
  • DatePicker Plugin to Latest Version
  • Vector Maps to Latest Version
  • Documentation

Removed:

  • css3-mediaqueries.js Script Linking from all the HTML Files for Less than IE9

Fixed:

  • Issue with Subscription Form Markup Code in the demo-xmas.html File
  • Issue with Team Members List Carousel Markup Code in the team.html File
  • Issue with Video Sound Event not working properly for index-video-sound-event.html File
  • Issue with Product Overlay overflowing on some Devices
  • Issue with Responsiveness Component: Select Boxes
  • Issue with Magnific Popup AJAX Functionality when Closing the Lightbox results in causing issues with the Last Focused Element
  • Issue with .primary-menu-open Toggle Class incorrectly configured in One Page Scroll Functionality
  • Issue with inconsistencies with Common Height Functionality
  • Issue with Custom Buttons in Top Cart Content
  • Issue with Top Account Links in Dark Scheme
  • Issue with Custom Carousel Linking Functionality
  • Issue with Swiper Slider Dimensions Update JS Conflict
  • Issue with Blog Timeline Ordering Display in Full Width

Changed Files:

  • CSS
    • style.css
      • Code Update Added overflow: hidden; CSS Property to .product-overlay CSS Block
      • Code Update Updated #top-cart a to #top-cart > a
      • Removed .entry.entry-date-section + .entry .entry-timeline { top: 70px; } CSS Block
      • Code Update Updated .video-placeholder CSS Block
      • Code Update Updated .toastr-* related CSS Block
    • css/bootstrap.css
      • Code Update Latest Version
    • css/dark.css
      • Added Added .dark #header-wrap:not(.not-dark) #top-account a and .dark #header-wrap:not(.not-dark) #top-account a:hover CSS Blocks
    • All the colors.css and colors.php Files:
      • Code Update Updated #top-cart a to #top-cart > a
    • css/components/datepicker.css
      • Code Update Updated DatePicker Plugin
    • css/vmap.css
      • Code Update Updated vMap Plugin
  • JS
    • js/functions.js
      • Code Update Updated lightbox: function() Function Block and added autoFocusLast: false Setting to the $lightboxAjaxEl.magnificPopup Function Block
      • Code Update Updated onePageScroll: function() Function Block
      • Code Update Updated commonHeight: function( element ) Function Block
      • Code Update Updated html5Video: function() Function Block
      • Code Update Updated sliderParallaxDimensions: function() Function Block
      • Code Update Updated blogTimelineEntries: function() Function Block
      • Code Update Updated sidePanel: function() Function Block
    • js/plugins.js
      • Code Update Updated Superfish Plugin
      • Code Update Updated Youtube BG Plugin
      • Code Update Updated Text Rotator Plugin
      • Code Update Updated ImagesLoaded Plugin
      • Code Update Updated Swiper Slider Plugin
      • Code Update Updated Toastr Notifications Plugin
      • Code Update Updated Flex Slider Plugin
      • Code Update Updated Bootstrap
    • js/components/datepicker.js
      • Code Update Updated DatePicker Plugin
    • js/jquery.vmap.js
      • Code Update Updated vMap Plugin including all the Files in the js/vmap Folder
  • SASS
    • sass/mixins.scss
      • Code Update Updated @mixin translate3d($val,$val2,$val3) Code Block
    • sass/dark.scss
      • Added New File
    • sass/responsive.scss
      • Added New File
  • HTML
    • All HTML Files
      • Removed css3-mediaqueries.js Script Linking from the Document <head>
    • All HTML Files
      • Code Update Google API URL updated with the ?key=YOUR_API_KEY Query
    • demos/construction
      • Added New Templates for Inner Pages
    • demos/medical
      • Added New Templates for Inner Pages
    • rs-demo-*.html
      • Added New Premium Templates for Revolution Slider
    • demo-xmas.html
      • Code Update Subscription Form Markup Code updated
    • team.html
      • Code Update Team Members List Carousel Markup Code updated
    • index-video-sound-event.html
      • Code Update Added JS Codes for making the Video Sound Event Functional
    • component-select-box.html
      • Code Update Added style="width:100%;" Attribute to the <select> Tags
    • shop-single-custom-linking-carousel.html
      • Code Update Fixed issue with Carousel Linking Functionality

Version 4.1.1

Released on 1st August, 2016

Added:

  • SASS Files

Updated:

  • Visual Editor Addon for Revolution Slider to Latest Version

Fixed:

  • Issue with Undefined Redirect in Quick Contact Forms
  • Issue with Undefined Redirect in Subscription Forms
  • Issue with Pages with Side Panels not scrolling on Android Devices

Changed Files:

  • jQuery
    • js/functions.js
      • Code Update quickContact: function() Function Block
      • Code Update subscription: function() Function Block
      • Code Update sidePanel: function() Function Block

Version 4.1

Released on 26th June, 2016

Added:

  • New Demo for App Landing
  • New Demo for Cafe
  • New Demo for Spa
  • 10+ New Revolution Slider Templates
  • Added Visual Editor Add-On for the Revolution Slider for Building Complex Sliders easily
  • Added Off Canvas Mobile Menu Layout
  • Split Menu Header Layout
  • Profile Page Template
  • Boxed Layout for Index Page
  • Option to Redirect AJAX Forms on Successful Submission
  • Option to Close the Custom Style Boxes
  • Combination Filter Functionality Example for Shop Template
  • New Button Styles
  • New Portfolio Filter Styles
  • Option to convert Tabs into Accordion on Responsive Devices
  • Support for Static Sticky Menu on Mobile Devices
  • Gallery Compatibility between Magnific Lightbox and Owl Carousel
  • Option to Choose Default Filter for the Isotope Filter Functionality
  • Ability to Play Multiple Youtube BG Videos on the Canvas Swiper Slider
  • Option for Reverse Animation in Flex Slider
  • Option for Stagger Animation in Grid Container Functionality

Changed:

  • Increased Font Size for the Custom Style Boxes for Better Design Flow UI/UX

Updated:

  • Incorrect Documentation URL for Swiper Slider API
  • Incorrect Documentation in Campaign Monitor Subscription File
  • jQuery Updated to v1.12.4
  • IsoTope Plugin Updated to Latest Version
  • Revolution Slider Plugin Updated to Latest Version

Fixed:

  • Issue with Data Table Component Template duplicate CSS Loading in Header and Footer
  • Issue with Page Transition Primary Menu Links with the Latest jQuery
  • Issue with Incorrect Form Action File Location in Contact Form reCaptcha Templates
  • Issue with the Side Cover Wrapper Slider on Media Agency Niche Demo on some Browsers
  • Issue with Addition of Email/Call/SMS Links in Primary Menu
  • Issue with Header Scheme Changer on Canvas Swiper Slider while Header is Sticky
  • Issue with Isotope Grid in RTL Layouts
  • Issue with Carousel Navigation Colors when Color Scheme is changed
  • Issue with Dots Menu Caption BG when Color Scheme is changed
  • Issue with Slider Parallax Dimension in Responsive Devices
  • Issue with Contact Form File Uploads not going through the Server
  • Issue with JSON Message Encoding in include/jobs.php File
  • Issue with Slider Parallax on iPad Landscape Orientation
  • Issue with Youtube BG Video playing even when Video Autoplay Turned off for Canvas Slider
  • Issue with Incorrect Message Transmitting for AutoResponders in include/sendemail-autoresponder.php File
  • Issue with Incorrect Autoresponder Name/Email
  • Issue with Page Sub Menu/Dots Menu Issue with Primary Menu when using One Page Functionality
  • Issue with Video Alignment in Page Title Video Template
  • Issue with Top Bar Links uneven Horizontal Alignment when Menu Items have Icons
  • Issue with Primary Menu's Sub Menu Items Icon Alignment
  • Issue with Left Padding in Mega Menu Columns
  • Issue with Portfolio Overlay in Individual Portfolio Items
  • Issue with Page Menu Items Floats in RTL on Responsive Devices
  • Issue with Star Rating in RTL Mode

Changed Files:

  • CSS
    • style.css
      • Code Update .style-msg Related Codes
      • Added .style-msg .close Code Block
      • Added .portfolio-filter Related Code Block
      • Added .button Related Code Block
      • Added .device-touch .slider-parallax .slider-parallax-inner { position: relative; } Code Block
      • Code Update #page-title.page-title-video .video-wrap Code Block
      • Code Update .top-links li i Code Block
      • Added #primary-menu.mobile-menu-off-canvas Code Block
      • Added .iportfolio .portfolio-overlay Code Block
      • Added #primary-menu ul ul li > a i { vertical-align: middle; } Code Block
      • Added #header.split-menu Related Code Blocks
      • Added .grid-container Related Code Blocks
      • Code Update .button i Code Block
    • css/responsive.css
      • Added .portfolio-filter Related Code Block
      • Added .tabs-responsive Related Code Block
      • Code Update .responsive-sticky-header Related CSS Blocks
      • Added #primary-menu.mobile-menu-off-canvas Code Block
      • Added #primary-menu ul li.mega-menu { position: relative; } Code Block
      • Added padding-left: 15px #primary-menu ul li .mega-menu-content ul.mega-menu-column CSS Block
      • Added #header.split-menu Related Code Blocks
      • Added #header.split-menu #logo Related Code Blocks
    • css/colors.css
      • Code Update .owl-carousel .owl-nav Related Code Blocks
      • Code Update #page-menu.dots-menu nav li div Related Code Blocks
    • css/font.css
      • Code Update CSS Styles Updated
    • css/bs-rating.css
      • Added .rtl Related Code Blocks
  • jQuery
    • js/functions.js
      • Code Update pageTransition: function() Function Block
      • Code Update contactForm: function() Function Block
      • Code Update subscription: function() Function Block
      • Code Update quickContact: function() Function Block
      • Code Update gridInit: function( $container ) Function Block
      • Code Update filterInit: function() Function Block
      • Code Update extras: function() Function Block
      • Code Update sliderParallaxDimensions: function() Function Block
      • Code Update sliderParallaxDimensions: function() Function Block
      • Added tabsResponsive: function() Function Block
      • Added tabsResponsiveResize: function() Function Block
      • Added SEMICOLON.widget.tabsResponsive(); Function Block to SEMICOLON.widget > init: function()
      • Added SEMICOLON.widget.tabsResponsiveResize(); Function Block to SEMICOLON.widget > init: function()
      • Added SEMICOLON.widget.tabsResponsiveResize(); Function Block to SEMICOLON.documentOnResize > init: function()
      • Code Update sliderRun: function() Function Block
      • Code Update youtubeBgVideo: function() Function Block
      • Removed $youtubeBgPlayerEl = $('.yt-bg-player'), from Global Variable List
      • Added $youtubeBgPlayerEl = $('.yt-bg-player'); to youtubeBgVideo: function() Function Block
      • Code Update lightbox: function() Function Block
      • Code Update onePageScroll: function() Function Block
      • Code Update topsearch: function() Function Block
      • Code Update loadFlexSlider: function() Function Block
      • Code Update headerSchemeChanger: function( activeSlide, onWinLoad ) Function Block
      • Code Update gridInit: function( $container ) Function Block
  • PHP
    • css/colors.php
      • Code Update .owl-carousel .owl-nav Related Code Blocks
      • Code Update #page-menu.dots-menu nav li div Related Code Blocks
    • include/subscribe-cm.php
      • Code Update API Key and List ID Documentation
    • include/jobs.php
      • Code Update Issue with JSON encoding of the Result Messages
    • include/sendemail-autoresponder.php
      • Code Update Incorrect Message Transmitting for AutoResponders: $autoresponder->MsgHTML
      • Code Update Incorrect Autoresponder Name/Email
  • HTML
    • component-datatable.html
      • Code Update Fixed Duplicate CSS Loading in Header and Footer
    • index-wedding.html
      • Code Update Countdown Date Updated
    • demo-media-agency.html
      • Code Update .side-cover-wrapper Updated
    • style-boxes.html
      • Code Update Closeable Native Style Boxes Example added
    • index-boxed.html
      • Added New Template
    • split-menu.html
      • Added New Template
    • shop-combination-filter.html
      • Added New Template
    • profile.html
      • Added New Template
    • portfolio-filter-styles.html
      • Added New Template
    • jobs-file.html
      • Code Update Form Action File Location
      • Added enctype="multipart/form-data" to <form> Tags
    • tabs.html
      • Added Responsive Tabs Example
    • contact-2-recaptcha.html
      • Code Update Form Action File Location
    • contact-3-recaptcha.html
      • Code Update Form Action File Location
    • contact-4-recaptcha.html
      • Code Update Form Action File Location
    • contact-5-recaptcha.html
      • Code Update Form Action File Location
    • contact-6-recaptcha.html
      • Code Update Form Action File Location
    • contact-7-recaptcha.html
      • Code Update Form Action File Location
    • contact-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-2-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-3-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-4-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-5-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-6-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-7-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • rs-demo-hero-web-product-light.html
      • Code Update Fixed Issue with Revolution Slider Parallax Smoothness
    • rs-demo-hero-web-product-dark.html
      • Code Update Fixed Issue with Revolution Slider Parallax Smoothness
  • Plugin Updates
    • include/rs-plugin
      • Code Updates All the Files and Folders updated to the Latest Version

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