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.

HTML Structure

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

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

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

</head>
<body>

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

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

			...

		</header>

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

			<div class="content-wrap">

				<div class="container clearfix">

					...

				</div>

			</div>

		</section>

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

			<div class="container">

				...

			</div>

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

				<div class="container clearfix">

					...

				</div>

			</div>

		</footer>

	</div>

</body>
</html>

Layout Settings

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

<body class="stretched">

Smooth Scrolling

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

Favicons & Apple Touch Icons

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

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

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

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

Page Loading Transitions

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

<body class="no-transition">

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

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

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

Setting up LESS CSS

  • Step 1:

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

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

    To their respective LESS Linking:

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

    Add the LESS Script just after the js/plugins.js Script Linking in your <head> Tag:

    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
  • Step 3:

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

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

Website Optimization Tips

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

  • gZip Compression & Browser Caching

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

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

  • Image Compression & Optimization

    We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:

    • Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
    • Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
    • Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
      For MAC use ImageOptim
      For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
  • CSS & jQuery Minifications

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

  • Content Delivery Network

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

  • Fast Web Hosting Servers

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

Upgrading Canvas: v3.x to v4.0

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

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

CSS Files:

  • #primary-menu

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

  • #page-menu

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

  • .slider-parallax

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

  • Swiper Slider Base CSS

    We have removed the Swiper Slider Base CSS Codes and moved it to a Separate CSS File named css/swiper.css for better handling of Swiper Plugin Updates. It is recommended that you remove this entire Code Blocks. Search for the following code in the style.css File:

    .swiper-container {
    	margin:0 auto;
    	position:relative;
    	overflow:hidden;
    	-webkit-backface-visibility:hidden;
    	-moz-backface-visibility:hidden;
    	-ms-backface-visibility:hidden;
    	-o-backface-visibility:hidden;
    	backface-visibility:hidden;
    	/* Fix of Webkit flickering */
    	z-index:1;
    }
    
    ...

    Files Affected: style.css

  • #portfolio

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

  • #shop

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

  • All other Minor Changes has been described in the Changelog Section

PHP Files:

  • Form Processing and Subscription Files

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

HTML Files:

  • JS Files Linking moved to Footer

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

    Example:
    JS Linking in Canvas v3.x

    JS Linking in Canvas v4.x
  • Mega Menu Content

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

    Example:
    Mega Menu in Canvas v3.x

    Mega Menu in Canvas v4.0
  • Slider Parallax

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

    Example:
    Slider Parallax in Canvas v3.x

    Slider Parallax in Canvas v4.0
  • Canvas/Swiper Slider

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

  • Page Menu

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

    Before:
    <!-- Page Sub Menu
    ============================================= -->
    <div id="page-menu">
    
    	<div id="page-menu-wrap">
    
    		<div class="container clearfix">
    
    			<div class="menu-title">Explore <span>CANVAS</span></div>
    
    			<nav>
    				<ul>
    					<li class="current"><a href="#">Gallery</a></li>
    					<li><a href="#">Features</a></li>
    					<li><a href="#">Models</a>
    						<ul>
    							<li><a href="#">Small Size</a></li>
    							<li><a href="#">Normal Size</a></li>
    							<li><a href="#">Large Size</a></li>
    						</ul>
    					</li>
    					<li><a href="#">Reviews</a>
    						<ul>
    							<li><a href="#">Expert Reviews</a></li>
    							<li><a href="#">User Reviews</a></li>
    						</ul>
    					</li>
    					<li><a href="#">Compare</a></li>
    					<li><a href="#">Build</a></li>
    					<li><a href="#">Order</a></li>
    				</ul>
    			</nav>
    
    		<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>
    
    		</div>
    
    	</div>
    
    </div><!-- #page-menu end -->
    After:
    <!-- Page Sub Menu
    ============================================= -->
    <div id="page-menu">
    
    	<div id="page-menu-wrap">
    
    		<div class="container clearfix">
    
    			<div class="menu-title">Explore <span>CANVAS</span></div>
    
    			<nav>
    				<ul>
    					<li class="current"><a href="#"><div>Gallery</div></a></li>
    					<li><a href="#"><div>Features</div></a></li>
    					<li><a href="#"><div>Models</div></a>
    						<ul>
    							<li><a href="#"><div>Small Size</div></a></li>
    							<li><a href="#"><div>Normal Size</div></a></li>
    							<li><a href="#"><div>Large Size</div></a></li>
    						</ul>
    					</li>
    					<li><a href="#"><div>Reviews</div></a>
    						<ul>
    							<li><a href="#"><div>Expert Reviews</div></a></li>
    							<li><a href="#"><div>User Reviews</div></a></li>
    						</ul>
    					</li>
    					<li><a href="#"><div>Compare</div></a></li>
    					<li><a href="#"><div>Build</div></a></li>
    					<li><a href="#"><div>Order</div></a></li>
    				</ul>
    			</nav>
    
    		<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>
    
    		</div>
    
    	</div>
    
    </div><!-- #page-menu end -->
  • Isotope Grids

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Before:
    <div id="contact-form-result" data-notify-type="success" data-notify-msg="<i class=icon-ok-sign></i> Message Sent Successfully!"></div>
    After:
    <div class="contact-form-result"></div>

    The Contact Form Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Contact Forms.

  • Quick Contact Forms

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

    Before:
    <div id="quick-contact-form-result" data-notify-type="success" data-notify-msg="<i class=icon-ok-sign></i> Message Sent Successfully!"></div>
    After:
    <div class="quick-contact-form-result"></div>

    The Quick Contact Form Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Quick Contact Forms.

  • Subscription Forms

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

    Before:
    <div id="widget-subscribe-form-result" data-notify-type="success" data-notify-msg=""></div>
    After:
    <div class="widget-subscribe-form-result"></div>

    The Subscription Form Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Subscription Forms.

  • Canvas Slider Javascript

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

  • Owl Carousel Javascript

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

Header Types

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

Type Class Features Code Example
Default Default Header with a White Background & Dark text.
<header id="header">
	...
</header>
.dark Header with a Dark Background & Light text.
<header id="header" class="dark">
	...
</header>
.transparent-header Header with a Transparent Background. This header is effective for showing Sliders or other types of Hero Images on the Top with a Transparent Logo & Menu. You can add the dark class for a Light Colored Text.
<header id="header" class="transparent-header">
	...
</header>
.semi-transparent Header with a Semi Transparent Background. You can add the dark class for a Light Colored Text & a Dark Background.
<header id="header" class="transparent-header semi-transparent">
	...
</header>
.floating-header This activates the Floating Header. You can add the dark class for a Light Colored Text & a Dark Background.
<header id="header" class="transparent-header floating-header">
	...
</header>
.side-header This is a Side Header Left Aligned. Unlike the above Headers, this class should be added to the body.
<body class="stretched side-header">
	<header id="header">
		...
	</header>

	...

</body>
.open-header This is a Side Header Left Aligned which is hidden by default & opens via a Trigger. Unlike the above Headers, this class should be added to the body. This class can only be used for the Side Headers. If you want to close the Side Header on scrolling, please add the .close-header-on-scroll class to the body tag.
<body class="stretched side-header open-header">
	<header id="header">
		...
	</header>

	...

</body>
.push-wrapper This is a Side Header Left Aligned which is hidden by default & opens via a Trigger. When the Header opens, it also pushes the wrapper to the right. Unlike the above Headers, this class should be added to the body. This class can only be used for the Side Headers. If you want to close the Side Header on scrolling, please add the .close-header-on-scroll class to the body tag.
<body class="stretched side-header open-header push-wrapper">
	<header id="header">
		...
	</header>

	...

</body>
.side-header-right This is a Side Header Right Aligned. Unlike the above Headers, this class should be added to the body. You can easily add the .open-header & .push-wrapper classes to the body tag to make this Side Header follow the above behaviours.
<body class="stretched side-header side-header-right">
	<header id="header">
		...
	</header>

	...

</body>

Mega Menu

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

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

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

Widgets in Mega Menu

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

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

			<h4>Our Location</h4>

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

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

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

Menu Styles

You can use from a variety of 8 Menu Styles.

Style Class Description Code Example
Default Default Menu Style which aligns to the right.
<nav id="primary-menu">
	...
</nav>
.style-2 Menu aligns beside the Logo.
<nav id="primary-menu" class="style-2">
	...
</nav>
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>

Alternate Mobile Menu

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

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

	<ul>
		....
	</ul>

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

	....

Page Sub Menu

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

<div id="page-menu">

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

		<div class="container clearfix">

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

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

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

		</div>

	</div>

</div>

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

Dots Sub Menu

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

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

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

		<div class="container clearfix">

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

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

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

		</div>

	</div>

</div>

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

Helper Classes

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

Helper Class Description
.no-sticky Disable Stickiness of the Header. Use it on the header tag.
.static-sticky Disable Resizing when Headers turn Sticky. Use it on the header tag.
data-sticky-class Use a different Header Style when it gets Sticky. This will look something like this:

<header class="dark" data-sticky-class="not-dark">
You can use these classes: .dark, .not-dark, .semi-transparent. Remember, if you use the .semi-transparent Class, then you'll also need to include the .transparent Class.
.not-dark This is a Handy Class, if you want to use Mixins. Suppose, You want to use the Dark Header Style, but dont want the Dropdown Menus to be Dark too, then you can simply add this class to the Primary Menu and you are good to go.

Example:
<nav id="primary-menu" class="not-dark">


Modifying Header Height

You can change the Default header height of 100px to any other Height according to your Requirements. Simply use the following CSS Codes:
#header,
#header-wrap,
#logo,
#logo img,
#primary-menu:not(.style-2),
#primary-menu:not(.style-2) > ul,
#primary-menu,
#primary-menu ul,
#primary-menu ul li a { height: 100px; }

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

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

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

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

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

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

Page Titles

Class Description Example
Default Default Page Title style with Text aligned Left & Breadcrumbs Right.
<section id="page-title">

		<div class="container clearfix">
			<h1>Page Title</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-right Page Title style with Text aligned Right & Breadcrumbs Left.
<section id="page-title" class="page-title-right">

		<div class="container clearfix">
			<h1>Page Title Right</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-center Page Title style with Text & Breadcrumbs aligned Center.
<section id="page-title" class="page-title-center">

		<div class="container clearfix">
			<h1>Page Title Center</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-mini Page Title style with Mini Title.
<section id="page-title" class="page-title-mini">

		<div class="container clearfix">
			<h1>Page Title Mini</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-dark Page Title style with Background Color Dark.
<section id="page-title" class="page-title-dark">

		<div class="container clearfix">
			<h1>Page Title Dark</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-nobg Page Title style with Background Color Transparent.
<section id="page-title" class="page-title-nobg">

		<div class="container clearfix">
			<h1>Page Title No BG</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-pattern Page Title style with a Background Pattern.
<section id="page-title" class="page-title-pattern">

		<div class="container clearfix">
			<h1>Page Title with Pattern</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-parallax Page Title style with a Parallax Image.
<section id="page-title" class="page-title-parallax page-title-dark" style="background-image: url('');"
	data-stellar-background-ratio="0.3">

		<div class="container clearfix">
			<h1>Page Title Parallax</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-video Page Title style with a HTML5 Video.
<section id="page-title" class="page-title-parallax page-title-dark page-title-video">

		<div class="video-wrap">
			<video width="100%" src="images/videos/deskwork.mp4" preload="auto" loop autoplay muted></video>
			<div class="video-overlay"></div>
		</div>

		<div class="container clearfix">
			<h1>Page Title Video</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>

Columns & Grid

Canvas Grid

.col_full
.col_half
.col_half .col_last
.col_one_third
.col_two_third .col_last
.col_one_fourth
.col_three_fourth .col_last
.col_one_fifth
.col_four_fifth .col_last
.col_two_fifth
.col_three_fifth .col_last
.col_one_sixth
.col_five_sixth .col_last

Bootstrap Grid

.col-md-1
.col-md-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.
  • .nobg - No Backgrounds.
  • .nobgcolor - No Background Colors.
  • .noabsolute - Forces Relative Position.
  • .hidden - Hidden Blocks.
  • .nothidden - No Hidden Blocks.
  • .inline-block - Inline Blocks.
  • .center - Center Aligned Text.
  • .tright - Right Aligned Text.
  • .divcenter - Center Aligned DIVs.
  • .fleft - Left Aligned DIVs.
  • .fright - Right Aligned DIVs.
  • .color - Theme Text Color.
  • .bgcolor - Theme Background Color.
  • .border-color - Theme Border Color.
  • .bgicon - Background Icon.
  • .bganimate - Animates Background Vertically.
  • .grayscale - Adds a Grayscale Filter to the Images and Colors on Hover.
  • .imagescale - Adds a Zoom Out Effect on the Image when Hovered.
  • .t300 - Changes the Font Weight to Light.
  • .t400 - Changes the Font Weight to Normal.
  • .t500 - Changes the Font Weight to Medium.
  • .t600 - Changes the Font Weight to Semi Bold.
  • .t700 - Changes the Font Weight to Bold.
  • .ls1 - Adds a Letter Spacing of 1px.
  • .ls2 - Adds a Letter Spacing of 2px.
  • .ls3 - Adds a Letter Spacing of 3px.
  • .ls4 - Adds a Letter Spacing of 4px.
  • .ls5 - Adds a Letter Spacing of 5px.
  • .noheight - Changes the Height of the Element to 0px.
  • .nolineheight - Changes the Line Height of the Element to 0px.
  • .font-body - Changes the Font Family of the Element equal to the one used for the Body Text.
  • .font-primary - Changes the Font Family of the Element equal to the one used for the Primary Text.
  • .font-secondary - Changes the Font Family of the Element equal to the one used for the Secondary Text.

Useful Snippets

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

Smooth Scrolling to Same Page Sections

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

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

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

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

Responsive Absolute Heights

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

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

Sample Code:

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

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

Responsive Classes

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

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

Sample Code:

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

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

Slider Types & their Options

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

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

Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs

Canvas Swiper Slider

Usage:

Here is the HTML Code for the Canvas Swiper Slider:

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

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

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

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

Setting Slider Height:

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

Settings:

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

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

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

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

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

Initializing Canvas Swiper Slider using Custom Javascript

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

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

Canvas Swiper Slider Documentation

Slider Captions

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

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

Slider Helper Classes

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

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

Blog Setup

Posts use Simple Markup. Use the Code Sample below:

<div id="posts">

	<div class="entry clearfix">

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

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

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

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

	</div>

	...

</div>

Post Types

You can use a 7 different types of Post Types:

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

Comment Types

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

  • Default
  • Facebook
  • Disqus

Facebook Comments

Code Sample for Facebook Comments:

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

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

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

</div>

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

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

Disqus Comments

Code Sample for Disqus Comments:

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

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

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

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

</div>

Portfolio Setup

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

Setting up Portfolio Filter:

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

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

</ul>

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

Setting up Portfolio Items:

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

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

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

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

	</article>

	...

</div>

In Page AJAX

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

Setting up AJAX Portfolio Wrapper:

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

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

Note: Place this code before the Portfolio Codes start.

Setting up AJAX Portfolio Items

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

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

Modal AJAX

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

Setting up Modal AJAX Portfolio Items

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

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

Infinity Scroll

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

Add the Following Code after the Portfolio #portfolio Container:

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

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

Script for Infinity Scroll:

<script type="text/javascript">

	jQuery(window).load(function(){

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

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

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

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

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

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

	});

</script>

Introduction

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

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

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

Animations

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

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

You can also use delays for your Animations:

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

Note: Delay Duration is in milliseconds.

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

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

Sections & Parallax

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

Setting up Sections:

Setup your Sections outside the .container element.

Light Section:

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

		...

	</div>
</div>

Dark Section:

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

		...

	</div>
</div>

Setting up Parallax Sections:

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

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

		...

	</div>
</div>

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

Setting up HTML5 Video Sections:

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

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

	<div class="container clearfix">

		...

	</div>

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

</div>

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.

Toggles

You can add a Toggle using the Code below:

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

Options:

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

Styles:

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

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

Accordions

You can add a Accordion using the Code below:

<div class="accordion clearfix">

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

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

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

</div>

Options:

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

Styles:

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

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

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

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

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

</div>

Responsive Slider

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

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

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

  • data-animation - Defines the Animation Style of the Slider. Use slide or fade
  • data-easing - Easing of the Slide Animation. Eg. easeInQuad
  • data-direction - Direction of the Slide Animation. Use horizontal or vertical
  • data-slideshow - Enables/Disables Auto Slideshow. Set to true or false
  • data-pause - Time Interval between Slide Animations when Auto Slideshow enabled in milliseconds. Eg. 5000 for 5 Seconds
  • data-speed - Speed of the Slide Animation in milliseconds. Eg. 600 for 0.6 Seconds
  • data-video - Set to true if a Slide in the Slider contains a Embedded Video
  • data-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.

Owl Carousel

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

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

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

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

Initializing Owl Carousel using Custom Javascript

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

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

Owl Carousel Documentation

Lightbox & Notifications

Setting up Lightboxes:

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

Single Image:
<a href="link-to-lightbox-image.jpg" data-lightbox="image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
Iframe:
<a href="http://yourwebsite.com" data-lightbox="iframe">Your Website in a Lightbox</a>
Video:
<a href="http://www.youtube.com/watch?v=kuceVNBTJio" data-lightbox="iframe">Lightbox Video</a>

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

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

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

Gallery:
<div data-lightbox="gallery">
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
</div>
AJAX Gallery:
<div data-lightbox="ajax-gallery">
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
</div>

Showing Lightbox Captions:

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

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

Setting up Notifications:

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

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

The Notification Shortcode has the following customizable options:

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

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

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

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

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

Modal on Load

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

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

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

The Modal on Load has the following customizable options:

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

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

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

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

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

Code Sample:

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

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

Twitter Widget

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

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

Code Sample:

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

Twitter Feed Avatars

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

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

Code Sample for a Twitter Feeds Scroller:

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


Twitter oAuth Authentication Setup

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

  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.

Contact Forms & Mailchimp Subscriptions

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

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

Contact Forms

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

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

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

reCaptcha Settings

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

  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


Not receiving Form Emails?

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

$mail = new PHPMailer();

Add this after the above line:

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

MailChimp Subscriptions Setup

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

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

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

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

Google Custom Search Setup

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

var cx = '006140480002229796823:xbltpcavzi0';

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
    • demos/travel/css/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
    • demos/travel/js/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