Overview

Dear customers, first of all we would like to thank you for choosing Unify Template! We truly hope that Unify will serve you well, and that it will live up to your expectations.


We hope you will enjoy using Unify template's easy to navigate and user-friendly layout as well as developer-friendly code. Furthermore, a lot of resources have been employed and many options have been added just to make sure that our valued customers will be satisfied with their purchase.


Updates

In order to keep up with the fast paced evolution of web design trends, we always try to release new updates on continuous basis. Our goal with each update is to impress our customers and to put huge smiles on their faces.

We would like to bring to your attention that once you purchase Unify, you become eligible for a lifetime entitlement to download updates for FREE!

On the other hand however, we regret to inform you that license upgrade is not available. If you wish to upgrade your license, a new purchase must be made.

Current updated release is v1.9+, which offers several improvements including fixed bugs, a variety of new thematic demos and plenty of new designs. Unify does not stop there as many more new amazing features are surely coming soon in the next updates. Thank you always for using Unify Template and for being a vital part of its success.


Support

We believe in Unify that support is a crucial aspect of any successful product. Therefore, we try our very best to offer the most excellent support, and we always try anything within our power to assist our valued customers. It is worth noting that our support mainly covers any design issues that one might encounter, in addition to frontend-related issues, as long as it is not complete customized work.

If you have any questions, please feel free to contact us at support@htmlstream.com and we will do our best to get back to you within 24 hours. It might take a bit longer, but we try hard not to keep you waiting longer than 48 hours.

You may also leave us a message through our social pages: Facebook and Twitter

Main Structure top

Files Structure Updated v1.9.2

Unify comes with 6 complete independent packages. In your download package, inside the HTML fodler you will find main Unify Main (Default) template and assets files, E-commerce (Shop UI) , Blog & Template, One Pages, Landing Pages, and Email Templates packages. It also includes with PSD files. Please check README.txt file in the PSD folder to download the full version of available PSD files. The README.txt file includes the download link and password.


DOWNLOAD PACKAGE

  • ---- Documentation
  • ---- PSD
  • ---- HTML
    • ---- assets
    • ---- E-Commerce
    • ---- Blog-Magazine
    • ---- One-Pages
      • ---- assets
      • ---- Classic
      • ---- Agency
      • ---- App
      • ---- Architecture
      • ---- Business
      • ---- Lawyer
      • ---- Shipping
      • ---- Spa
      • ---- Travel
      • ---- Wedding
      • ---- Courses
      • ----  ..
      • ----  ..
    • ---- Landing-Pages
    • ---- Email-Templates
    • ----  index.html
    • ----  ..
    • ----  ..

Home pages in Unify Template consist of header, slider, content part, footer and copyright parts. However, inner pages include breadcrumbs instead of slider.

Beginning of the Page

In order to detect Internet Explorer browser version 9, a specific class is implemented at the beginning of all HTML pages, as shown in the code below.

<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

Page Head Updated v1.7

Page head contains Metadata, Favicon, Title, Web Fonts and CSS links.

<head>
    <title>Unify - Responsive Website Template</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico">

    <!-- Web Fonts -->
    <link rel="shortcut" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">

    <!-- CSS Global Compulsory -->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- CSS Header and Footer -->
    <link rel="stylesheet" href="assets/css/headers/header-default.css">
    <link rel="stylesheet" href="assets/css/footers/footer-v1.css">

    <!-- CSS Implementing Plugins -->
    <link rel="stylesheet" href="assets/plugins/animate.css">
    <link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">

    <!-- CSS Theme -->
    <link rel="stylesheet" href="assets/css/theme-colors/default.css">

    <!-- CSS Customization -->
    <link rel="stylesheet" href="assets/css/custom.css">
</head>

Wrapper Added v1.4

.wrapper class is added on v1.4 to wrap ALL body contents. It mainly consists of header, slider, breadcrumbs, content parts etc.

<div class="wrapper">
    ...
    ...
</div>

Note Below codes are nested within the wrapper content. It starts from header and ends after the copyright part.


Header Updated v1.6

<!--=== Header ===-->
<div class="header">
    <!-- Topbar -->
    <div class="topbar">
        ...
        ...
    </div>
    <!--  End Topbar -->

    <!-- Navbar -->
    <div class="navbar navbar-default mega-menu" role="navigation">
        ...
        ...
    </div>
    <!-- End Navbar -->
</div>
<!--=== End Header ===-->

Content Updated v1.6

Container block includes all the content of the page. Moreover, the .content class was added in v1.4 to the main wrap container to give space (padding) for the content.

<!--=== Content Part  ===-->
<div class="container content">
    ...
    ...
</div><!--/container-->
<!--=== End Content Part  ===-->

Footer

<!--=== Footer Version 1 ===-->
<div class="footer-v1">
    <div class="footer">
        <div class="container">
            ...
            ...
        </div>
    </div><!--/footer-->

    <div class="copyright">
        <div class="container">
            ...
            ...
        </div>
    </div><!--/copyright-->
</div><!--/footer-v1-->
<!--=== End Footer Version 1 ===-->

Javascript and jQuery

Javascript files are called at the bottom of the page, this practice effectively reduces load time.

<!-- JS Global Compulsory -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- JS Implementing Plugins -->
<script src="assets/plugins/back-to-top.js"></script>
<script src="assets/plugins/smoothScroll.js"></script>

<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>

<!-- JS Page Level -->
<script src="assets/js/app.js"></script>
<script>
jQuery(document).ready(function() {
    App.init();
});
</script>

<!--[if lt IE 9]>
    <script src="assets/plugins/respond.js"></script>
    <script src="assets/plugins/html5shiv.js"></script>
    <script src="assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->

Misc Pages Updated v1.9.1

Misc pages were purposely created with merely the main parts of the page, which makes it easier for developers to add their content directly. Simply use any following page to start your new project:

  1. page_misc_blank.html   Empty blank page with all main components connected already
  2. page_misc_boxed.html   Boxed layout of Unify Template
  3. page_misc_boxed_img.html   Boxed layout of Unify Template
  4. page_misc_boxed_fixed_header.html  Fixed header in boxed layout of Unify Template
  5. page_misc_dark.html   Dark version of Unify Template
  6. page_misc_dark_boxed.html   Dark version in boxed layout of Unify Template
  7. page_misc_dark_other_color.html   Dark version with other theme color of Unify Template
  8. page_misc_sticky_footer.html.html   Sticky Footer with Copyright Section

Headers & Footers Updated v1.9top

Unify Template includes 8 Header and Footer alternatives.

Headers Updated v1.9

Make the Header Fixed to the Top

Where x  =  v1, v2, v3, v5, v6 or nothing for the default header. Any header option can be used as fixed (sticky) header except for v4 and v7. On a different note, header One Page is designed only for One Page template and can not be used in other Unify pages. For detailed information on how to use header options, please refer to "Header Options" section below.

<body class="header-fixed">
..
..
<!--=== Header x ===-->
    <div class="header-x header-sticky">
    ..
    ..
    </div>
<!--=== End Header x===-->
..
..
</body>

Header Options

For more detailed information click any link below

Header "Default"

Header v1

Header v1
<!--=== Header v1===-->
<div class="header-v1">
    <!-- Topbar -->
    <div class="topbar-v1">
        ...
        ...
    </div>
    <!--  End Topbar -->

    <!-- Navbar -->
    <div class="navbar navbar-default mega-menu" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                ...
                ...
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
                ...
                ...
            </div><!-- /navbar-collapse -->
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header v1 -->

Info Example Page: feature_header_v1.html

Header v2

Header v2
<!--=== Header v2===-->
<div class="header-v2 header-sticky">
    <div class="container container-space">
        <!-- Topbar v2 -->
        <div class="topbar-v2">
            ...
            ...
        </div>
        <!--  End Topbar v2 -->
    </div>

    <!-- Navbar -->
    <div class="navbar navbar-default mega-menu" role="navigation">
        <div class="container container-space">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                ...
                ...
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                ...
                ...
            </div><!-- /navbar-collapse -->
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header v2 -->

Info Example Page: feature_header_v2.html

Header v3

Header v3
<!--=== Header v3===-->
<div class="header-v3">
    <div class="container container-space">
    <!-- Navbar -->
    <div class="navbar navbar-default mega-menu" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                ...
                ...
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                ...
                ...
            </div><!-- /navbar-collapse -->
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header v3 -->

Info Example Page: feature_header_v3.html

Header v4

Header v4
<!--=== Header v4===-->
<div class="header-v4">
    <div class="container">
        <!-- Topbar v1 -->
        <div class="topbar-v1">
            ...
            ...
        </div>
        <!--  End Topbar v1 -->
    </div>

    <!-- Navbar -->
    <div class="navbar navbar-default mega-menu" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                ...
                ...
            </div>

            <div class="clearfix"></div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                ...
                ...
            </div><!-- /navbar-collapse -->
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header v4 -->

Info Example Page: feature_header_v4.html

Header v5

Header v5
<!--=== Header v5===-->
<div class="header-v5">
    <div class="container">
        <!-- Topbar v3 -->
        <div class="topbar-v3">
            ...
            ...
        </div>
        <!--  End Topbar v3 -->
    </div>

    <!-- Navbar -->
    <div class="navbar navbar-default mega-menu" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                ...
                ...
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                ...
                ...
            </div><!-- /navbar-collapse -->
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header v5 -->

Info Example Page: feature_header_v5.html

Header v6 Transparent

Header v6 Transparent
<!--=== Header 6===-->
<div class="header-6 header-sticky">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="menu-container">
                ...
                ...
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                ...
                ...
            </div><!-- /navbar-collapse -->
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_transparent.html

Header v6 Dark Transparent

Header v6 Dark Transparent
<!--=== Header 6===-->
<div class="header-6 header-sticky header-dark-transparent">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_semi_dark_transparent.html

Header v6 White Transparent

Header v6 White Transparent
<!--=== Header 6===-->
<div class="header-6 header-sticky header-white-transparent">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_semi_white_transparent.html

Header v6 Border Bottom

Header v6 Border Bottom
<!--=== Header 6===-->
<div class="header-6 header-sticky header-border-bottom">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_border_bottom.html

Header v6 Classic Dark

Header v6 Classic Dark
<!--=== Header 6===-->
<div class="header-6 header-sticky header-classic-dark">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_classic_dark.html

Header v6 Classic White

Header v6 Classic White
<!--=== Header 6===-->
<div class="header-6 header-sticky header-classic-white">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_classic_white.html

Header v6 Dark Dropdown

Header v6 Dark Dropdown
<!--=== Header 6===-->
<div class="header-6 header-sticky header-dark-dropdown">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_dark_dropdown.html

Header v6 Dark on Scroll

Header v6 Dark on Scroll 
<!--=== Header 6===-->
<div class="header-6 header-sticky header-dark-scroll">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_dark_scroll.html

Header v6 Dark Search Box

Header v6 Dark Search Box
<!--=== Header 6===-->
<div class="header-6 header-sticky header-dark-search">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_dark_search.html

Header v6 Dark on Responsive

Header v6 Dark on Responsive
<!--=== Header 6===-->
<div class="header-6 header-sticky header-dark-res-nav">
    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
        <div class="container">
            ...
            ...
        </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header 6 -->

Info Example Page: feature_header_v6_dark_res_nav.html

Header v7 Left

Header v7 Left
<!--=== Header v7 Left===-->
<div class="header-v7 header-left-v7">
    <nav class="navbar navbar-default mCustomScrollbar" role="navigation" data-mcs-theme="minimal-dark">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="menu-container">
            ...
            ...
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            ...
            ...
        </div>
    </nav>
</div>
<!-- End Header v7 Left-->

Info Example Page: page_home12.html

Header v7 Right

Header v7 Right
<!--=== Header v7 Right===-->
<div class="header-v7 header-right-v7">
    <nav class="navbar navbar-default mCustomScrollbar" role="navigation" data-mcs-theme="minimal-dark">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="menu-container">
            ...
            ...
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            ...
            ...
        </div>
    </nav>
</div>
<!-- End Header v7 Right-->

Info Example Page: page_home13.html

Header v8

Header v8
<!--=== Header v8===-->
<div class="header-v8 header-sticky">
    <!-- Topbar blog -->
    <div class="blog-topbar">
        ...
        ...
    </div>
    <!-- End Topbar blog -->

    <!-- Navbar -->
    <div class="navbar mega-menu" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="res-container">
            ...
            ...
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            ...
            ...
        </div>
      </div>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Header v8-->

Info Example Page: feature_header_v8.html

Footers Updated v1.9

Footer Options

For more detailed information click any link below

Theme Configuration Updated v1.9.1 top

Unify Template includes 12 predefined theme colors. All theme CSS files are located in assets/css/theme-colors/..

  • default #72c02c #5fb611
  • blue #3498db #2980b9
  • orange #e67e22 #d35400
  • red #e74c3c #c0392b
  • light #95a5a6 #7f8c8d
  • purple #9b6bcc #814fb5
  • aqua #27d7e7 #26bac8
  • brown #9c8061 #81674b
  • dark-blue #4765a0 #324c80
  • light-green #79d5b3 #59b795
  • dark-red #b61332 #a10f2b
  • teal #2cd5b6 #18ba9b

To change the theme color, you should just replace assets/css/theme-colors/default.css with assets/css/theme-colors/your_theme.css or you can use ready theme css files blue.css, red.css, orange.css etc. instead of your_theme.css

<head>
    <title>Unify - Responsive Website Template</title>

    <!-- CSS Theme -->
    <link rel="stylesheet" href="assets/css/theme-colors/default.css" />
</head>

Info If you want to use the default theme style, there's no necessity to link assets/css/theme-colors/default.css you can just remove this line from the HTML head. It's already included in the main CSS files such as style.css, app.css etc.

Theme color CSS links

If you wish to use one of the Unify predefined theme colors, simply use one of the CSS links bellow and replace it with the above default.css link

<link rel="stylesheet" href="assets/css/theme-colors/default.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/default.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/blue.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/orange.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/red.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/light.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/purple.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/aqua.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/brown.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/dark-blue.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/light-green.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/dark-red.css"/>
<link rel="stylesheet" href="assets/css/theme-colors/teal.css"/>

Dark Layout

Here are two easy steps to implement the Dark Theme:

1. Link dark.css inside <head> section.

2. Add a .dark class to <body> tag.

<head>
    <title>Unify - Responsive Website Template</title>

    <!-- CSS Theme -->
    <link rel="stylesheet" href="assets/css/theme-colors/dark.css">
</head>


<body class="dark">
    ....
    ....
</body>

Info Example Page: page_misc_dark.html

Boxed Layout Added v1.9.1

To apply the boxed layout, you may just add the class boxed-layout and the class container to the <body> tag..

<body class="boxed-layout container">
    ....
    ....
</body>

Info Example Page: page_misc_boxed.html

CSS (Cascading Style Sheets) top

CSS Files Structure

Unify Template uses a number of CSS files in order to keep the template organized and easy to use for further development, from small projects to massive corporate projects. All CSS files are logically organized. Knowing CSS files makes customization process a lot easier and far more flexible. In addition app.css and blocks.css CSS files are used globally in all packages, It helps to use all Unify default elements, blocks etc. in any packages.

All CSS files located in assets/css

CSS

  • ---- pages: From here you may control all of the independent CSS pages.
  • ---- headers: From here you may control all of the 8 Headers. They are in a separate folder because usually one header is used per project.
  • ---- footers: From here you may control all of the 8 Footers. They are in a separate folder because usually one footer is used per project.
  • ---- theme-skins From here you may control the theme skins. At the moment Unify has only one theme skin which is dark version of Unify Template.
  • ---- theme-colors: From here you may control all 12 theme colors. For color codes please refer to "Theme Configuration" section.
  • ----  app.css
  • ----  style.css
  • ----  blocks.css

CSS Classes Updated v1.9

For more detailed information click any link below

Spaces

General classes for spaces

# Class Name (Selector) Description Declaration
1 content Applies40pxpadding from top and bottom.
Designed to be used in big blocks		 padding-top: 40px;
padding-bottom: 40px;
2 content-sm Applies60pxpadding from top and bottom.
Designed to be used in big blocks		 padding-top: 60px;
padding-bottom: 60px;
3 content-md Applies80pxpadding from top and bottom padding-top: 80px;
padding-bottom: 80px;
4 content-lg Applies100pxpadding from top and bottom.
Designed to be used in big blocks		 padding-top: 100px;
padding-bottom: 100px;
5 space-lg-hor Applies60pxpadding from left and right side padding-left: 60px
padding-right: 60px;
6 space-xlg-hor Applies100pxpadding from left and right side padding-left: 100px;
padding-right: 100px;
7 margin-left-5 Applies5pxmargin to the left margin-left: 5px
8 margin-right-5 Applies5pxmargin to the right margin-right: 5px
9 no-top-space Removes padding-top and margin-top margin-top: 0;
padding-top: 0;
10 no-bottom-space Removes padding-bottom and margin-bottom margin-bottom: 0;
padding-bottom: 0;
11 margin-bottom-5 Applies5px margin to the bottom margin-bottom: 5px
12 margin-bottom-10 Applies10px margin to the bottom margin-bottom: 10px
13 margin-bottom-15 Applies15px margin to the bottom margin-bottom: 15px
14 margin-bottom-20 Applies20px margin to the bottom margin-bottom: 20px
15 margin-bottom-25 Applies25px margin to the bottom margin-bottom: 25px
16 margin-bottom-30 Applies30px margin to the bottom margin-bottom: 30px
17 margin-bottom-35 Applies35px margin to the bottom margin-bottom: 35px
18 margin-bottom-40 Applies40px margin to the bottom margin-bottom: 40px
19 margin-bottom-45 Applies45px margin to the bottom margin-bottom: 45px
20 margin-bottom-50 Applies50px margin to the bottom margin-bottom: 50px
21 margin-bottom-55 Applies55px margin to the bottom margin-bottom: 55px
22 margin-bottom-60 Applies60px margin to the bottom margin-bottom: 60px

Example:

<ul class="margin-bottom-40">
    <li>Donec posuere</li>
    <li>Donec posuere</li>
    <li>Donec posuere</li>
</ul>

For medium device modern @media (max-width: 992px)

Those classes are effective when the screen size is less than 992px in width. For example when elements are placed horizontally on bigger devices and vertically on smaller devices they will get stuck to each other because there is not enough spacing between elements. Which is why the following classes will be very useful.

# Class Name (Selector) Description Declaration
1 md-margin-bottom-10 Applies10pxmargin bottom for widths less than992pxonly margin-bottom: 10px
2 md-margin-bottom-20 Applies20pxmargin bottom for widths less than992pxonly margin-bottom: 20px
3 md-margin-bottom-30 Applies30pxmargin bottom for widths less than992pxonly margin-bottom: 30px
4 md-margin-bottom-40 Applies40pxmargin bottom for widths less than992pxonly margin-bottom: 40px
5 md-margin-bottom-50 Applies50pxmargin bottom for widths less than992pxonly margin-bottom: 50px
6 md-margin-bottom-60 Applies60pxmargin bottom for widths less than992pxonly margin-bottom: 60px

For small device mode @media (max-width: 768px)

Those classes are effective when the screen size is less than 768px in width. For example when elements are placed horizontally on bigger devices and vertically on smaller devices they will get stuck to each other because there is not enough spacing between elements. Which is why the following classes will be very useful.

# Class Name (Selector) Description Declaration
1 sm-margin-bottom-10 Applies10pxmargin bottom for widths less than768pxonly margin-bottom: 10px
2 sm-margin-bottom-20 Applies20pxmargin bottom for widths less than768pxonly margin-bottom: 20px
3 sm-margin-bottom-30 Applies30pxmargin bottom for widths less than768pxonly margin-bottom: 30px
4 sm-margin-bottom-40 Applies40pxmargin bottom for widths less than768pxonly margin-bottom: 40px
5 sm-margin-bottom-50 Applies50pxmargin bottom for widths less than768pxonly margin-bottom: 50px
6 sm-margin-bottom-60 Applies60pxmargin bottom for widths less than768pxonly margin-bottom: 60px

Colors

Classes for text colors

# Class Name (Selector) Description Declaration
1 color-sea Changes a text color to sea color: #1abc9c;
2 color-green Changes a text color to green color: #72c02c
3 color-redgreen1 Changes a text color to redgreen1 color: #2ecc71
4 color-light-green Changes a text color to light-green color: #1abc9c
5 color-purple Changes a text color to purple color: #9b6bcc
6 color-dark-blue Changes a text color to dark-blue color: #4765a0
7 color-blue Changes a text color to blue color: #3498db
8 color-aqua Changes a text color to aqua color: #27d7e7
9 color-red Changes a text color to red color: #e74c3c;
10 color-orange Changes a text color to orange color: #e67e22
11 color-yellow Changes a text color to yellow color: #f1c40f
12 color-brown Changes a text color to brown color: #9c8061
13 color-dark Changes a text color to dark color: #555555
14 color-light-grey Changes a text color to light-grey color: #585f69
15 color-grey Changes a text color to grey color: #95a5a6
16 color-light Changes a text color to light color: #ffffff

classes for Background colors

# Class Name (Selector) Description Declaration
1 bg-color-dark Changes a Background color to dark background-color: #555;
1 bg-color-red Changes a Background color to red background-color: #e74c3c;
1 bg-color-sea Changes a Background color to sea background-color: #1abc9c;
1 bg-color-blue Changes a Background color to blue background-color: #3498db;
1 bg-color-grey Changes a Background color to grey background-color: #95a5a6;
1 bg-color-green Changes a Background color to green background-color: #72c02c;
1 bg-color-brown Changes a Background color to brown background-color: #9c8061;
1 bg-color-orange Changes a Background color to orange background-color: #e67e22;
1 bg-color-green1 Changes a Background color to green1 background-color: #2ecc71;
1 bg-color-purple Changes a Background color to purple background-color: #9b6bcc;
1 bg-color-dark-blue Changes a Background color to dark-blue background-color: #4765a0;
1 bg-color-light-grey Changes a Background color to light-grey background-color: #585f69;
1 bg-color-light-green Changes a Background color to light-green background-color: #79d5b3;

Example:

<div class="bg-color-dark">Demo Information<div>

Rounded Corners

Classes for rounded corners

round classes can be applied to images, blocks, buttons...

rounded-top
rounded-left
rounded-right
rounded-bottom
rounded
rounded-x
rounded-2x
rounded-3x
rounded-4x
# Class Name (Selector) Description Declaration
1 rounded-top Applies 4px border-radius to top corners border-radius: 4px 4px 0 0 !important;
2 rounded-left Applies 4px border-radius to left corners border-radius: 4px 0 0 4px !important;
3 rounded-right Applies 4px border-radius to right corners border-radius: 0 4px 4px 0 !important;
4 rounded-bottom Applies 4px border-radius to bottom corners border-radius: 0 0 4px 4px !important;
5 rounded Applies 4px border-radius to all corners border-radius: 4px;
6 rounded-x Makes the item round (full circle) border-radius: 50% !important;
7 rounded-2 Applies 10px border-radius to all corners border-radius: 10px !important;;
8 rounded-3 Applies 15px border-radius to all corners border-radius: 15px !important;
9 rounded-4 Applies 20px border-radius to all corners border-radius: 20px !important;

Heights

Classes for height

# Class Name (Selector) Description Declaration
1 height-100 Applies minimum 100px of height to an element min-height: 100px;
2 height-200 Applies minimum 200px of height to an element min-height: 200px;
3 height-300 Applies minimum 300px of height to an element min-height: 300px;
4 height-400 Applies minimum 400px of height to an element min-height: 400px;
4 height-500 Applies minimum 500px of height to an element min-height: 500px;

Other Classes

Other classes

# Class Name (Selector) Declaration
1 overflow-h overflow: hidden;
2 overflow-a overflow: auto;
3 clear-both clear: both;
4 dp-none display: none;
5 dp-block display: block;
6 dp-table display: table;
7 dp-inline-block display: inline-block;
8 dp-table-cell display: table-cell;
9 full-width width: 100%;

JavaScript InitializationUpdated v1.9 top

Core javascript initialization is implemented in assets/js/app.js through the "App" object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics.

The App object only includes the initialization of the plugins that are used in almost every Unify page. Other plugins must be initialized independently, refer to the JavaScript Plugins below.

var App = function () {
    ...
    ...
}();

JavaScript Plugins Updated v1.9.2

For more detailed information click any link below

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

CSS Installation

<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">

JavaScript Installation

Under <!-- JS Global Compulsory -->

<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

Official Documentation

http://getbootstrap.com/

Demo

All Unify Pages

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

CSS Installation

No CSS Required

JavaScript Installation

Under <!-- JS Global Compulsory -->

<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery/jquery-migrate.min.js"></script>

Official Documentation

http://jquery.com

Demo

All Unify Pages

Circles Master

Lightweight JavaScript library that generates circular graphs in SVG. Now with animation.

CSS Installation

No CSS Required

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/circles-master/circles.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/plugins/circles-master.js">

Initialization

To initialize the plugin, add the following line CirclesMaster.initCirclesMaster1(); or CirclesMaster.initCirclesMaster2(); to the jQuery function at the bottom of the HTML page:

Official Documentation

https://github.com/lugolabs/circles

Demo

shortcode_compo_charts.html

Counter

Counter-Up is a jQuery plugin that animates a number from zero (counting up towards it)

CSS Installation

No CSS Required

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/counter/waypoints.min.js"></script>
<script src="assets/plugins/counter/jquery.counterup.min.js"></script>

Initialization

To initialize the plugin, add the following line: App.initCounter(); to the jQuery function at the bottom of the HTML page:

Official Documentation

https://github.com/bfintal/Counter-Up

Demo

shortcode_compo_charts.html

Cube Portfolio

Cube Portfolio is a powerful jQuery plugin that provides beautiful animated filtering, custom captions and it’s perfect for portfolios, galleries, team members, blog posts or any other ordered content.

CSS Installation

<link rel="stylesheet" href="assets/plugins/cube-portfolio/cubeportfolio/css/cubeportfolio.min.css">
<link rel="stylesheet" href="assets/plugins/cube-portfolio/cubeportfolio/custom/custom-cubeportfolio.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/cube-portfolio/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/plugins/cube-portfolio/cube-portfolio-4-ns.js">

Note The path depends on the Portfolio grid structure. In the above example 4 columns no space grid is chosen.

Official Documentation

assets/plugins/cube-portfolio/documentation

Demo

Used in Portfolio Pages

Fancybox

FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, HTML content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

CSS Installation

<link rel="stylesheet" href="assets/plugins/fancybox/source//jquery.fancybox.css.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/plugins/fancy-box.js">

Initialization

To initialize the plugin, add the following line: FancyBox.initFancybox(); to the jQuery function at the bottom of the HTML page:

Official Documentation

http://fancyapps.com/fancybox/#examples/

GitHub.

https://github.com/fancyapps/fancyBox/

Demo

feature_gallery.html

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

CSS Installation

<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">

JavaScript Installation

No JavaScript Required

HTML

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag

<i class="fa fa-camera-retro"></i> fa-camera-retro

fa-camera-retro

Official Documentation

http://fortawesome.github.io/Font-Awesome//

Demo

shortcode_icon_fa.html

Line Icons

Simple Line Icons is 162 simple stroke icons that are great for mobile applications, websites, user interfaces, etc. All icons were converted from the same beautiful simple line icon sets released previously on GraphicBurger.

CSS Installation

<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">

JavaScript Installation

No JavaScript Required

HTML

<span class="icon-user"></span>
icon-user

Official Documentation

http://graphicburger.com/simple-line-icons-set-vol-1
http://graphicburger.com/simple-line-icons-set-vol-2
http://graphicburger.com/simple-line-icons-set-vol-3
http://graphicburger.com/simple-line-icons-set-vol-4

Demo

shortcode_line.html

Google Maps (Gmaps)

gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

CSS Installation

No CSS Required

Note If the map doesn't appear:

Then you probably have forgotten to link the file: HTML\assets\css\pages\page_contact.css or the file: HTML\assets\css\style.css. Alternatively however, you can specify a fixed height within your CSS or by using one of the Unify predefined height classes explained above.


JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="assets/plugins/gmap/gmaps.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/pages/page_contacts.js"></script>

Initialization

To initialize the plugin, add the following line: ContactPage.initMap(); to the jQuery function at the bottom of the HTML page:

Set location

To change the location:

1. Navigate to the file HTML\assets\js\pages\page_contacts.js

2. Set the lat and lng coordinates of your location.

Official Documentation

http://hpneo.github.io/gmaps

Demo

shortcode_maps_google.html

Parallax Slider (Main Slider)

Sliding Horizontal Parallax moves multiple elements at the same time but at different speeds to create a parallax effect — the appearance of 3D movement.

CSS Installation

<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<tscript src="assets/plugins/parallax-slider/js/modernizr.js"></script>
<script src="assets/plugins/parallax-slider/js/jquery.cslider.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/plugins/parallax-slider.js">

Initialization

To initialize the plugin, add the following line: ParallaxSlider.initParallaxSlider(); to the jQuery function at the bottom of the HTML page:

Official Documentation

http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery

Demo

index.html

Layer Slider

LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slide-shows with must-see effects. It uses cutting edge technologies to provide the smoothest experience possible, and it comes with more than 200 preset 2D and 3D slide transitions.

CSS Installation

<link rel="stylesheet" href="assets/plugins/layer-slider/layerslider/css/layerslider.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/layer-slider/layerslider/js/greensock.js"></script>
<script src="assets/plugins/layer-slider/layerslider/js/layerslider.transitions.js"></script>
<script src="assets/plugins/layer-slider/layerslider/js/layerslider.kreaturamedia.jquery.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/plugins/layer-slider.js">

Initialization

To initialize the plugin, add the following line: LayerSlider.initLayerSlider(); to the jQuery function at the bottom of the HTML page:

Official Documentation

assets/plugins/layer-slider/documentation

Demo

page_home1.html

Masonry

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

CSS Installation

<link rel="stylesheet" href="assets/css/pages/blog_masonry_3col.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/masonry/jquery.masonry.min.js"></script>
<script src="assets/js/pages/blog-masonry.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/pages/blog-masonry.js">

Official Documentation

http://masonry.desandro.com//

Demo

blog_masonry_3col.html

Owl Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

CSS Installation

<link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.carousel.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/plugins/owl-carousel.js"></script>

Initialization

To initialize the plugin, add the following line: OwlCarousel.initOwlCarousel(); to the jQuery function at the bottom of the HTML page:

Official Documentation

http://owlgraphic.com/owlcarousel//

Demo

shortcode_carousels.html

Revolution Slider

Slider Revolution is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!

CSS Installation

<link rel="stylesheet" href="assets/plugins/revolution-sliderrs-plugin/css/tools.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/revolution-slider/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="assets/plugins/revolution-sliderrs-plugin/js/jquery.themepunch.revolution.min.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/plugins/revolution-slider.js"></script>

Initialization

To initialize the plugin, add the following line: RevolutionSlider.initRSfullScreenOffset(); to the jQuery function at the bottom of the HTML page:

Official Documentation

assets/plugins/revolution-slider/documentation

Demo

page_home9.html

Sky Forms

Sky Forms Pro is a set of beautiful form elements with large amount of javascript features: validation, masking, modals, ajax submit, datepickers. It allows you to create forms of any complexity and for any needs: login, registration, contacts, review, order, comment, checkout, etc.

CSS Installation

<link rel="stylesheet" href="assets/plugins/sky-forms-pro/sky-forms/css/sky-forms.css">
<link rel="stylesheet" href="assets/plugins/sky-forms-pro/sky-forms/custom/custom-sky-forms.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/sky-forms-pro/sky-forms/js/jquery.maskedinput.min.js"></script>
<script src="assets/plugins/sky-forms-pro/sky-forms/js/jquery-ui.min.js"></script>
<script src="assets/plugins/sky-forms-pro/sky-forms/js/jquery.validate.min.js"></script>

Internet Exploror

<!--[if lt IE 9]>
    <script src="assets/plugins/sky-forms-pro/sky-forms/js/sky-forms-ie8.js"></script>
<![endif]-->

<!--[if lt IE 10]>
    <script src="assets/plugins/sky-forms-pro/sky-forms/js/jquery.placeholder.min.js"></script>
<![endif]-->

Under <!-- JS Page Level -->

<!-- For Masking -->
<script src="assets/js/plugins/masking.js"></script>
<!-- For Datepicker -->
<script src="assets/js/plugins/datepicker.js"></script>
<!-- For Validation -->
<script src="assets/js/plugins/validation.js"></script>

Initialization

To initialize the plugin, add the following line to the jQuery function at the bottom of the HTML page: Masking.initMasking(); for masking, Datepicker.initDatepicker(); for datepicker, or Validation.initValidation(); for validation.

Official Documentation

assets/plugins/sky-forms-pro/documentation

Demo

shortcode_form_general1.html

Countdown

A jQuery plugin that sets a div or span to show a countdown to a given time.

CSS Installation

<link rel="stylesheet" href="assets/css/pages/page_coming_soon.css">

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/countdown/jquery.plugin.js"></script>
<script src="assets/plugins/countdown/jquery.countdown.js"></script>

Under <!-- JS Page Level -->

<script src="assets/js/pages/page_coming_soon.js"></script>

Initialization

To initialize the plugin, add the following line: PageComingSoon.initPageComingSoon(); to the jQuery function at the bottom of the HTML page:

Set countdown

To change the date and time of the countdown:

1. Navigate to HTML/assets/js/pages/page_coming_soon.js

2. Replace the whole function with the following function:


var PageComingSoon = function () {
    return {
      //Coming Soon
      initPageComingSoon: function () {
            $('#defaultCountdown').countdown({until: new Date(yyyy, mm-1, d, hh, mm, ss)})
        }
    };
}();

Official Documentation

http://keith-wood.name/countdown.html

Demo

page_coming_soon.html

jQuery Backstretch

A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

CSS Installation

No CSS required

Note The image is set using JS, please refer to the official documentation for more information.

JavaScript Installation

Under <!-- JS Implementing Plugins -->

<script src="plugins/bootstrap/js/bootstrap.min.js"></script>

Official Documentation

http://srobbin.com/jquery-plugins/backstretch/

Demo

page_coming_soon.html

Vector Map

jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers.

  • Works in all modern browsers (including IE6-8)
  • Looks great on any resolution because of its vector nature
  • Many maps are available
  • Custom maps could be created using converter

CSS Installation

<link rel="stylesheet" href="assets/plugins/vector-map/custom_jquery-jvectormap.css">

JavaScript Installation

Under <!-- JS Page Level -->

<script rel="stylesheet" href="assets/js/plugins/vector-map.js"></script>

Depending on which map style needed, one of the following js installations will be required to place

Under <!-- JS Implementing Plugins -->

<script src="assets/plugins/vector-map/jquery-jvectormap.js"></script>
<script src="assets/plugins/vector-map/jquery-mousewheel.js"></script>
<script src="assets/plugins/vector-map/jquery-mousewheel.js"></script>
<script src="assets/plugins/vector-map/lib/jvectormap.js"></script>
<script src="assets/plugins/vector-map/lib/abstract-element.js"></script>
<script src="assets/plugins/vector-map/lib/abstract-canvas-element.js"></script>
<script src="assets/plugins/vector-map/lib/abstract-shape-element.js"></script>
<script src="assets/plugins/vector-map/lib/svg-element.js"></script>
<script src="assets/plugins/vector-map/lib/svg-group-element.js"></script>
<script src="assets/plugins/vector-map/lib/svg-canvas-element.js"></script>
<script src="assets/plugins/vector-map/lib/svg-shape-element.js"></script>
<script src="assets/plugins/vector-map/lib/svg-path-element.js"></script>
<script src="assets/plugins/vector-map/lib/svg-circle-element.js"></script>
<script src="assets/plugins/vector-map/lib/vml-element.js"></script>
<script src="assets/plugins/vector-map/lib/vml-group-element.js"></script>
<script src="assets/plugins/vector-map/lib/vml-canvas-element.js"></script>
<script src="assets/plugins/vector-map/lib/vml-shape-element.js></script>
<script src="assets/plugins/vector-map/lib/vml-path-element.js"></script>
<script src="assets/plugins/vector-map/lib/vml-circle-element.js"></script>
<script src="assets/plugins/vector-map/lib/vector-canvas.js"></script>
<script src="assets/plugins/vector-map/lib/simple-scale.js"></script>
<script src="assets/plugins/vector-map/lib/numeric-scale.js"></script>
<script src="assets/plugins/vector-map/lib/ordinal-scale.js"></script>
<script src="assets/plugins/vector-map/lib/color-scale.js"></script>
<script src="assets/plugins/vector-map/lib/data-series.js"></script>
<script src="rrrassets/plugins/vector-map/lib/proj.jsrrr"></script>
<script src="assets/plugins/vector-map/lib/world-map.js"></script>
<script src="assets/plugins/vector-map/tests/assets/jquery-jvectormap-world-mill-en.js"></script>

Initialization

To initialize the plugin, add the following lines: VectorMap.initVectorMap(); and VectorMap.initMarkerVectorMap(); to the jQuery function at the bottom of the HTML page:

Official Documentation

http://jvectormap.com

Demo

shortcode_maps_vector.html

Fonts Updated v1.9top

Unify Template uses Open Sans font for headings and some elements from Google Web Fonts. You are able to choose from more than 600+ fonts from Google Web Fonts. The font is linked in all HTML files at the <head> section.

<!-- Web Fonts -->
<link rel="shortcut" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">

Note Always remember to specify the font you choose in your CSS.



.example {
    font-family: "Open Sans", Arial, sans-serif;
}

Example The specification for Open Sans font family in CSS.

Credits Updated v1.9 top

All plugins are located in assets/plugins/..

Name URL
Bootstrap http://getbootstrap.com
jQuery http://jquery.com
Font Awesome http://fortawesome.github.io/Font-Awesome
Line Icons http://graphicburger.com/simple-line-icons-webfont
Parallax Slider http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery
OWL Carousel http://owlgraphic.com/owlcarousel
Backstretch http://srobbin.com/jquery-plugins/backstretch
MIXITUP https://mixitup-old.kunkalabs.com
Counter-Up https://github.com/bfintal/Counter-Up
Pace.js http://github.hubspot.com/pace/docs/welcome
Circles (Master) https://github.com/lugolabs/circles
Respond.js https://github.com/scottjehl/Respond
Ladda Buttons https://github.com/scottjehl/Respond
HTML5 Shiv https://github.com/aFarkas/html5shiv
Countdown http://keith-wood.name/countdown.html
GMaps http://hpneo.github.io/gmaps
Brand Buttons https://github.com/theaqua/bootstrap-brand-buttons
Hover Effects http://ianlunn.github.io/Hover/
Login/Sign up Modal Window https://codyhouse.co/gem/loginsignup-modal-window/
Masonry http://masonry.desandro.com/
Vector Maps http://jvectormap.com/
WOW Animation http://mynameismatthieu.com/WOW/
Animate.css https://daneden.github.io/animate.css/
Modernizr https://modernizr.com/
Smooth Scroll https://github.com/kswedberg/jquery-smooth-scroll

Premium Plugin Credits Updated v1.9

Name URL
Master Slider http://codecanyon.net/item/master-slider-jquery-touch-swipe-slider/6337671
Revolution Slider http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Layer Slider http://codecanyon.net/item/layerslider-responsive-jquery-slider-plugin/922100
Cube Portfolio http://codecanyon.net/item/cube-portfolio-responsive-jquery-grid-plugin/6372959
Sky Forms Pro http://codecanyon.net/item/sky-forms-pro/5414510
FancyBox http://fancyapps.com/fancybox

Image and Design credits

Premium Image Credits

Due to licencing rights following images are only used in demo for demonstration purposes and it can be purchased at wwww.photodune.net, http://peopleimages.com and http://deathtothestockphoto.com

Change Log top

Please do not forget to backup your files before the upgrade.


Version 1.9.3 – 01 April 2016

  • FIXED: Version name (typo error) in the download package
  • UPDATED: Animate CSS v4.5.1

Version 1.9.2 – 29 March 2016

  • NEW: Courses Layout (One-Pages/Courses/index.html)
  • NEW: Wedding Layout (One-Pages/Wedding/index.html)
  • IMPROVEMENT: Documentation
  • IMPROVEMENT: Busines Layout - promo and equal height blocks (One-Pages/Business/..)
  • IMPROVEMENT: Spa Layout - vertical align texts in some blocks (One-Pages/Spa/..)
  • IMPROVEMENT: Equal Height javascript codes (app.js)
  • IMPROVEMENT: Header v8 for iPhones (app.js)
  • FIXED: Google Maps for IE in Thematic Layouts
  • FIXED: Different slips in (blocks.css)
  • FIXED: Equal Height issue on Home Allure (page_home17.html)

Version 1.9.1 – 07 February 2016

  • NEW: Business Layout (One-Pages/Business/index.html)
  • NEW: Wealth Landing Page (Landing-Pages/Wealth/index.html)
  • NEW: Consulting Landing Page (One-Pages/Consulting/index.html)
  • NEW: Login and Registration Page (page_login_and_registration.html)
  • NEW: Login Page Option 2 (page_login2.html)
  • NEW: Registration Page Option 2 (page_registration2.html)
  • NEW: 404 Error Page 4 (page_404_error4.html)
  • NEW: 404 Error Page 5 (page_404_error5.html)
  • NEW: 404 Error Page 6 (page_404_error6.html)
  • NEW: Coming Soon Page v2 (page_coming_soon2.html)
  • NEW: Coming Soon Page v3 (page_coming_soon3.html)
  • NEW: Coming Soon Page v4 (page_coming_soon4.html)
  • NEW: Coming Soon Page v5 (page_coming_soon5.html)
  • NEW: Coming Soon Page v6 (page_coming_soon6.html)
  • NEW: RTL Business
  • NEW: RTL Agency
  • NEW: RTL Travel
  • NEW: RTL Lawyer
  • NEW: RTL Architecture
  • NEW: RTL Mobile App
  • NEW: RTL Spa
  • NEW: RTL Shipping
  • IMPROVEMENT: Older version of Coming Soon, 404 Error pages pages
  • IMPROVEMENT: Equal Height codes in app.js
  • FIXED: Links for Breadcrumb options (blocks.css)
  • FIXED: Multiple Progressbar issue (app.css)
  • UPDATED: Layer Slider v5.6.0
  • UPDATED: Cube Portfolio v3.5.1

Version 1.9 – 31 December 2015

  • NEW: Agency Layout
  • NEW: Lawyer Layout
  • NEW: Travel Layout
  • NEW: Architecture Layout
  • NEW: Mobile App Layout
  • NEW: Spa Layout
  • NEW: Shipping Layout
  • NEW: Hero Fashion
  • NEW: Hero Gym
  • NEW: Hero Photography
  • NEW: Hero Restaurant
  • NEW: Hero Web App Dark
  • NEW: Hero Web App Light
  • NEW: Home Aspire
  • NEW: Home Allure
  • NEW: Animated Titles (demo on promo block in the page: page_home15.html)
  • NEW: CTA - Call to Actions (feature_call_to_actions.html)
  • NEW: full-height statix text image bg slider (page_home2.html)
  • NEW: full-height statix animated texts (page_home4.html)
  • NEW: full-height Youtube video background (page_home5.html)
  • NEW: on click sidebar navigation left and right (page_home17.html and page_home18.html)
  • NEW: Blog Page Layout v4
  • NEW: Modal Popups
  • NEW: 2000+ Pro Line Icons
  • UPDATED: Bootstrap v3.3.6
  • UPDATED: Animate.css - v3.5.0
  • UPDATED: WOW.js - v1.1.2
  • UPDATED: Cube Portfolio v3.4.2
  • UPDATED: Font Awesome 4.5.0
  • UPDATED: Master Slider v2.16.3
  • UPDATED/NEW: Revolution Slider v5+
  • IMPROVEMENT: Documentation
  • IMPROVEMENT: Shopping cart for mobile devices
  • IMPROVEMENT: Default fixed header for Safari
  • IMPROVEMENT: Default header language hover issue for iOS devices
  • FIXED: One Page focus issue after click and scroll
  • FIXED: Many reported minor bugs

Version 1.8 – 03 July 2015

  • NEW: Blog Template
  • NEW: RTL Unify Main
  • NEW: RTL Unify Blog Template
  • NEW: RTL Unify Shop UI Template
  • NEW: RTL Unify One Page Template
  • NEW: 60+ PSD files
  • NEW: Master Slider Examples
  • NEW: Incredible Home Page (page_home16.html)
  • NEW: Static full-screen block in One Page (one_page_home1.html)
  • NEW: Popup login/registration for One Page (one_page_home2.html)
  • NEW: Language bar in One Page (one_page_home3.html)
  • NEW: Centered logo - header v4 (feature_header_v4_logo_centered.html)
  • NEW: Defaul Header without Topbar (feature_header_default_no_topbar.html)
  • NEW: Defaul Centered Header (feature_header_default_centered.html)
  • NEW: Header Login/Reg Popup (feature_header_default_login_popup.html)
  • NEW: Header v8 (feature_header_v8.html)
  • NEW: Footer v8 (feature_footer_v8.html)
  • NEW: Feature Icon Blocks (feature_icon_blocks.html)
  • NEW: Feature Team Blocks (feature_team_blocks.html)
  • NEW: Feature Testimonials and Quotes (feature_testimonials_quotes.html)
  • NEW: Feature News Blocks (feature_news_blocks.html)
  • NEW: Blog Home Page (blog/index.html)
  • NEW: Blog Page Layouts v1 (blog_page_layouts1.html)
  • NEW: Blog Page Layouts v2 (blog_page_layouts2.html)
  • NEW: Blog Page Layouts v3 (blog_page_layouts4.html)
  • NEW: Blog Post Layout v1 (blog_post_layouts1.html)
  • NEW: Blog Post Layout v2 (blog_post_layouts2.html)
  • NEW: Blog Post Layout v3 (blog_post_layouts3.html)
  • NEW: Blog Post Layout v4 (blog_post_layouts4.html)
  • NEW: Blog Post Layout v5 (blog_post_layouts5.html)
  • NEW: Blog Post Layout v6 (blog_post_layouts6.html)
  • NEW: Blog Post Layout v7 (blog_post_layouts7.html)
  • NEW: Blog Post Layout v8 (blog_post_layouts8.html)
  • NEW: Blog Post Layout v9 (blog_post_layouts9.html)
  • NEW: Blog Left Sidebar Example (blog_post_layouts_ls.html)
  • NEW: Blog Full Width Example (blog_post_layouts_fw.html)
  • NEW: Blog Grid: 1 Col (blog_grid_1.html)
  • NEW: Blog Grid: 2 Col (blog_grid_2.html)
  • NEW: Blog Grid: 3 Col (blog_grid_3.html)
  • NEW: Blog Grid: 4 Col (blog_grid_4.html)
  • NEW: Blog Grid: Full Width - 4 Col (blog_grid_4_fw.html)
  • NEW: Blog Grid: Right Sidebar - 2 Col (blog_grid_2_rs.html)
  • NEW: Blog Grid: Left Sidebar - 2 Col (blog_grid_2_ls.html)
  • NEW: Blog Single Page (blog_single.html)
  • NEW: Blog Home Boxed Page (blog_home_boxed.html)
  • NEW: Blog Home Boxed Space Page (blog_home_boxed_space.html)
  • UPGRADE: Bootstrap v3.3.5
  • UPGRADE: jQuery v1.11.3
  • UPGRADE: Master Slider v2.15.0
  • UPGRADE: Cube Portfolio v2.3.3
  • DROPPED: Glyphicons Pro (due to lincese changes)
  • FIXED: Navigation alignemtn and search box in page_home6.html page
  • FIXED: Footer logo in page_home9.html page
  • FIXED: Default header z-index issue with FancyBox
  • FIXED: Thumbnail FancyBox in the shorcodes page (Thanks to "Harald Meyer")
  • FIXED: Header v3 spacing issue on hover (Thanks to "Dario")
  • FIXED: Some design issues on dark layout styles
  • FIXED: Header v7 (sidebar header) - content onclick with ajax call issue
  • FIXED: Revolution Slider loading issue
  • IMPROVEMENT: "Timeline v2" tag
  • IMPROVEMENT: Header v7 (sidebar header) - added submenu option
  • IMPROVEMENT: One Page navigation - added submenu option
  • IMPROVEMENT: One Page navigation hides on scroll in mobile/tablet devices

Version 1.7 – 08 March 2015

  • UPGRADE: Bootstrap v3.3.2
  • UPGRADE: Countdown for jQuery v2.0.1
  • UPGRADE: jQuery v1.11.2
  • UPGRADE: Font Awesome 4.3.0
  • UPGRADE: Revolution Slider v4.6.4
  • UPGRADE: Sky Forms Pro v2.0.5
  • UPGRADE: Cube Portfolio v2.0.1
  • UPGRADE: Master Slider v2.9.3
  • NEW: Added working contact form to all contact pages
  • NEW: Sticky Footer (page_misc_sticky_footer.html)
  • NEW: Transparent Header with 9 Header Styles (header-v6)
  • NEW: Left/Right Sidebar Headers (header-v7)
  • NEW: WoW.js
  • NEW: Equal Height Columns
  • NEW: Smooth Scrolling "smoothScroll.js" (used in all pages)
  • NEW: Vertical Progress Bars
  • NEW: Animated Progress Bars on scroll
  • NEW: Light version of Parallax Quote
  • NEW: Clients v1 with Owl Carousel
  • NEW: Video iFrame (Modal) with Owl Carousel
  • NEW: Quote v1 with Parallax
  • NEW: Quote v2
  • NEW: News v2 Blocks (News/Blog Post)
  • NEW: News v3 Blocks (News/Blog Post)
  • NEW: Process v1 Section
  • NEW: Headline v2 (Title Heading)
  • NEW: Featured Blog (News Post)
  • NEW: Blog Trending (News/Blog Post)
  • NEW: Social Icons v1
  • NEW: Tags v2 (Sidebar Tags)
  • NEW: Pager v2 (Pagination)
  • NEW: Blog Photostream with Lightbox
  • NEW: Image Hover v1 Effects (Scale on Hover)
  • NEW: Image Hover v2 Effects (Black and White)
  • NEW: Call Action v2 with Parallax
  • NEW: Blog Comments with validation
  • NEW: Blog Comments
  • NEW: Dark/Light Option for default Breadcrumbs
  • NEW: Breadcrumbs v1
  • NEW: Breadcrumbs v3
  • NEW: Testimonials v4
  • NEW: Testimonials v6
  • NEW: Parallax Counter v3
  • NEW: Parallax Counter v4
  • NEW: Service Block v4
  • NEW: Service Block v5
  • NEW: Service Block v6
  • NEW: Service Block v7
  • NEW: Service Block v8
  • NEW: Team v3 Blocks
  • NEW: Team v4 Blocks
  • NEW: Team v5 Blocks
  • NEW: Team v6 Blocks
  • NEW: Team v7 Blocks
  • NEW: Home Page with Left sidebar navigation (page_home12.html)
  • NEW: Home Page with Right sidebar navigation (page_home13.html)
  • NEW: About Us v1 Page (page_about2.html)
  • NEW: About Us v2 Page (page_about3.html)
  • NEW: About Me v1 Page (page_about_me.html)
  • NEW: About Me v2 Page (page_about_me1.html)
  • NEW: About Me v3 Page (page_about_me2.html)
  • NEW: About Our Team v1 Page (page_about_our_team.html)
  • NEW: About Our Team v2 Page (page_about_our_team1.html)
  • NEW: About Our Team v3 Page (page_about_our_team2.html)
  • NEW: Services Page v1 (page_services.html)
  • NEW: Services Page v2 (page_services1.html)
  • NEW: Services Page v3 (page_services2.html)
  • NEW: Services Page v4 (page_services3.html)
  • NEW: Coming Soon Page (page_coming_soon1.html)
  • NEW: Gallery Examples Page (feature_gallery.html)
  • NEW: Animation on Scroll Page (feature_animations.html)
  • NEW: Parallax Counters Page (feature_parallax_counters.html)
  • NEW: Parallax Boxes Page (feature_parallax_blocks.html)
  • NEW: Blog Large Image Right Sidebar Page (blog_large_right_sidebar1.html)
  • NEW: Blog Large Image Left Sidebar Page (blog_large_left_sidebar1.html)
  • NEW: Blog Large Image Full Width Sidebar Page (blog_large_full_width1.html)
  • NEW: Blog Medium Image Right Sidebar Page (blog_medium_right_sidebar1.html)
  • NEW: Blog Medium Image Left Sidebar Page (blog_medium_left_sidebar1.html)
  • NEW: Blog Medium Image Full Width Sidebar Page (blog_medium_full_width1.html)
  • NEW: Blog Item Right Sidebar Page (blog_large_right_sidebar_item1.html)
  • NEW: Blog Item Left Sidebar Page (blog_large_left_sidebar_item1.html)
  • NEW: Blog Item Full Width Page (blog_large_full_width_item1.html)
  • NEW: Portfolio Hover Colors Page (portfolio_hover_colors.html)
  • NEW: Portfolio 2 Columns Full Width No Space Page (portfolio_2_columns_fullwidth_no_space.html)
  • NEW: Portfolio 2 Columns Full Width Grid Page (portfolio_2_columns_fullwidth.html)
  • NEW: Portfolio 2 Columns Full Width Grid With Text Page (portfolio_2_columns_fullwidth_text.html)
  • NEW: Portfolio 3 Columns Full Width No Space Page (portfolio_3_columns_fullwidth_no_space.html)
  • NEW: Portfolio 3 Columns Full Width Grid Page (portfolio_3_columns_fullwidth.html)
  • NEW: Portfolio 3 Columns Full Width Grid With Text Page (portfolio_3_columns_fullwidth_text.html)
  • NEW: Header v6 Transparent (feature_header_v6_transparent.html)
  • NEW: Header v6 Dark Semi Transparent (feature_header_v6_semi_dark_transparent.html)
  • NEW: Header v6 White Semi Transparent (feature_header_v6_semi_white_transparent.html)
  • NEW: Header v6 Transparent Border Bottom (feature_header_v6_border_bottom.html)
  • NEW: Header v6 Classic Dark (feature_header_v6_classic_dark.html)
  • NEW: Header v6 Classic White (feature_header_v6_classic_white.html)
  • NEW: Header v6 Dark Dropdown (feature_header_v6_dark_dropdown.html)
  • NEW: Header v6 Dark Navigation on Scroll (feature_header_v6_dark_scroll.html)
  • NEW: Header v6 Dark Search (feature_header_v6_dark_search.html)
  • NEW: Header v6 Dark Navigation in Responsive mode (feature_header_v6_dark_res_nav.html)
  • IMPROVEMENT: Background images for high resolution screens in (paralalx counters, clients block etc.)
  • IMPROVEMENT: Default Header for large logo images (most wanted feature by users request)
  • IMPROVEMENT: Header CSS code structure (added new comment structure with tabel of content)
  • IMPROVEMENT: Portfolio Pages (all portfolio pages)
  • IMPROVEMENT: Smooth Content Scroller for blocks in Shop UI (header cart) and Profile (notes, events, notification etc.) pages
  • IMPROVEMENT: File structure (all detailed information written in the documentation)
  • IMPROVEMENT: Coming Soon Page (page_coming_soon.html) - added sticky footer, updated countdown jquery plugin and enhanced some code structure.
  • IMPROVEMENT: Redesigned About Us (page_about1.html)
  • IMPROVEMENT: Search Pages
  • IMPROVEMENT: Invoice Page
  • IMPROVEMENT: Documentation (Headers, Footers and Plugin sections)
  • FIXED: Language Bar in Default Header for iOS touch devices
  • FIXED: FancyBox overlay issue
  • FIXED: Scrollspy Reference for One Page Template
  • FIXED: Theme colors of border-bottom in Default Header
  • FIXED: Some theme color issues has fixed in Shop UI
  • FIXED: Typo Errors in the Documentation

Version 1.6 – 29 October 2014

  • New: Master Slider (value $17)
  • New: Shop UI Home Page
  • New: Shop UI Product Page
  • New: Shop UI Filter Grid Page
  • New: Shop UI Filter List Page
  • New: Shop UI Checkout Page
  • New: Shop UI Login Page
  • New: Shop UI Registration Page
  • New: One Page (Added Dark Layout)
  • New: One Page (Added all Theme Colors)
  • New: Discover Home Page (Totally Redesigned)
  • New: Creative Home Page
  • New: Inspire Home Page
  • New: Desire Home Page
  • New: Contacts Advanced Page (with working PHP contact forms)
  • New: Contacts Option 3 Page (Classic Style)
  • New: Colourful Pricing Tables Page (Added 4 types of Pricing Tables)
  • New: Flat Pricing Tables (Added 2 types of Pricing Tables)
  • New: Icon Page (Glyphicons Pro IconsHome)
  • New: Portfolio Single Item Page
  • New: Portfolio 2 Columns (Grid)
  • New: Portfolio 2 Columns (Grid Text)
  • New: Portfolio 2 Columns (Grid No Space)
  • New: Portfolio 3 Columns (Grid)
  • New: Portfolio 3 Columns (Grid Text)
  • New: Portfolio 3 Columns (Grid No Space)
  • New: Portfolio 4 Columns (Grid)
  • New: Portfolio 4 Columns (Grid Text)
  • New: Portfolio 4 Columns (Grid No Space)
  • New: Portfolio 4 Columns (Fullwidth Grid)
  • New: Portfolio 4 Columns (Fullwidth Grid Text)
  • New: Portfolio 4 Columns (Fullwidth Grid No Space)
  • New: Portfolio 5 Columns (Grid)
  • New: Portfolio 5 Columns (Grid Text)
  • New: Portfolio 5 Columns (Grid No Space)
  • New: Portfolio 6 Columns (Grid)
  • New: Portfolio 6 Columns (Grid Text)
  • New: Portfolio 6 Columns (Grid No Space)
  • New: Footer Options (Added 3 new options. Can be found all options in feature_footers.html)
  • New: Header Options (Added 2 new header options Transparent and Shop UI. Can be found all options in feature_headers.html)
  • New: Mega Menu (Added 3 types of Mega Menu, one in default headers and 2 demos in Shop pages)
  • New: Two Theme Colors (Added dark-red and teal colors)
  • New: Misc Blank Page
  • New: Misc Boxed Fixed Menu Page
  • New: Misc Dark Page
  • New: Misc Dark Boxed Page
  • New: Misc Dark Page With Different Theme Color
  • New: PSD Files (All Shop UI pages, One Page with dark layout, all other new pages)
  • New: Owl Slider (Added diversity new options))
  • New: Revolution Slider (Added new slides and option with full screen header offset)
  • New: Content Boxes (Added variety options)
  • New: Thumbnail Blocks
  • New: Parallax Counters
  • New: Background Image Blocks/sections (with parallax effect)
  • New: Portfolio Boxes (Added different types)
  • New: Flat Background Block
  • New: Flat Testimonials
  • New: Service Block
  • UPGRADE: Bootstrap 3.2
  • UPGRADE: jQuery 1.11.1
  • UPGRADE: Glyphicons Pro v1.8.1
  • UPGRADE: Font Awesome Icons v4.2
  • UPGRADE: Revolution Slider v4.6.3
  • UPGRADE: Cube Portfolio v1.5.1
  • UPGRADE: Layer Slider v5.3
  • UPGRADE: Sky Forms v2.0.3
  • UPGRADE: Pace.js v0.5.6
  • UPGRADE: GMaps.js v0.4.15
  • IMPROVEMENT: Documentation (Major Enhancement)
  • IMPROVEMENT: All Navigations (Headers)
  • IMPROVEMENT: Main Parallax Slider
  • IMPROVEMENT: Amazing Home Page
  • IMPROVEMENT: All Footer Options
  • IMPROVEMENT: CSS code structure
  • IMPROVEMENT: JavaScript code structure
  • IMPROVEMENT: Dark Version
  • IMPROVEMENT: Google Map scrolling - added “scrollwheel: false” to page_contacts.js
  • IMPROVEMENT: Footer v1 (social icons replaced withfont-awesome icon tooltips)
  • IMPROVEMENT: Pagination page (added rounded pager examples)
  • IMPROVEMENT: custom.js (added new javascript file to write all custom js changes)
  • IMPROVEMENT: Parallax Backgrounds
  • IMPROVEMENT: "Back To Top" Button image replaced with CSS code
  • FIXED: Navigation Mobile Devices (One Page Template)
  • FIXED: Our Clients Carousel (One Page Template)
  • FIXED: Pricing Pages (Theme color issues)
  • FIXED: Fixed Navigation Colours for Tablets and others devices
  • FIXED: Ladda Buttons (Added missed file laddaButtons.js)
  • FIXED: Profile Theme Colors (added missed 9 theme color files)
  • FIXED: Padding space (Bordered Buttons)
  • FIXED: Navigation Tablet Mode Colors
  • FIXED: Fixed sky-forms datepicker responsive issue on resolution 1024x768
  • FIXED: Page Profile Settings Tab

Version 1.5 – 24 June 2014

  • NEW: One Page Template
  • NEW: Flat Pricing Tables
  • NEW: 40+ PSD Pages
  • NEW: Dark Layout Option
  • NEW: Cube Portfolio (value $8)
  • NEW: Blog (Grid) Masonry
  • NEW: 3 Footer Options
  • NEW: 3 Header Options
  • NEW: Instagram Icon
  • NEW: Profile Dashboard
  • NEW: Profile Overview
  • NEW: Profile Users
  • NEW: Profile Projects
  • NEW: Profile Comments
  • NEW: Profile History
  • NEW: Profile Settings
  • NEW FEATURES (Profile Pages)
    • NEW: 4 Tab Form Sections (Edit Profile, Change Password, Payment Options and Notification Settings)
    • NEW: 2 Social Blocks
    • NEW: Profile Timeline Block
    • NEW: Scrollbar
    • NEW: Sidebar Calendar
    • NEW: Notifications
    • NEW: Notes Block
    • NEW: Events Block
    • NEW: Colorful Info Blocks (with counters)
    • NEW: User Info Blocks
    • NEW: Discussions Blocks
    • NEW: Alarm Notifications
  • NEW FEATURES (One Page Template)
    • NEW: Full Screen Revolution Slider
    • NEW: AJAX Portfolio
    • NEW: Quote Parallax Block
    • NEW: Beautiful Team Blocks
    • NEW: Parallax Counter
    • NEW: Serive Blocks
    • NEW: News Blocks
    • NEW: Parallax Twitter Block
    • NEW: Parallax Clients Section
    • NEW: Testimonial Carousel
    • NEW: Contact Forms
  • UPGRADE: Layer Slider v5.1.0
  • UPGRADE: Revolution Slider v4.5 SkyWood
  • UPGRADE: Font Awesome Icons v4.1.0
  • IMPROVEMENT: Unify Buttons
  • IMPROVEMENT: Main Parallax Slider
  • IMPROVEMENT: Jobs Page (Clients Logos)
  • IMPROVEMENT: Navigation
  • IMPROVEMENT: Blog Magazine
  • IMPROVEMENT: Blog Large (Sidebar News)
  • IMPROVEMENT: Font Awesome Icon Page
  • IMPROVEMENT: Our Work Carousel with "Owl Carousel"
  • FIXED: Navigation for Mobile and Tablet Devices
  • FIXED: Many bugs are fixed in IE8:
    • FIXED: Fixed Header Background
    • FIXED: Twitter Blog
    • FIXED: Pricing Stickers
    • FIXED: Easy Block Sections
    • FIXED: Sky Form Icons
    • FIXED: Carousel-v1
    • FIXED: Service Blocks
    • FIXED: Search blocks
    • FIXED: Parallax Team Section
    • FIXED: Parallax Counter
    • FIXED: Job Banner and Image Inputs

Version 1.4 – 06 April 2014

  • NEW: 5 Theme Colors
  • NEW: Discover Page
  • NEW: Jobs Page
  • NEW: Jobs Inner v1 Page
  • NEW: Jobs Inner v2 Page
  • NEW: Jobs Inner v3 Page
  • NEW: About Us Page
  • NEW: About Me Page
  • NEW: Responsive Corporate Email
  • NEW: Responsive Flat Email
  • NEW: Responsive Modern Email
  • NEW: Pricing Tabels
  • NEW: Light Pricing Tabels
  • NEW: Mega Pricing Tabels
  • NEW: Search Results Page
  • NEW: Search Table Results Page
  • NEW: FAQs Page
  • NEW: 404 Eror v1 Page
  • NEW: 404 Eror v2 Page
  • NEW: Blog Timeline Page
  • NEW: Boxed Pages
  • NEW: Parallax Background
  • NEW: Fixed Header
  • NEW: Static Footer
  • NEW: Sub Menu in Dropdown Navigation
  • NEW: Dropcaps
  • NEW: Bordered Texts
  • NEW: Tooltips
  • NEW: Color Texts
  • NEW: Popovers
  • NEW: Highlights
  • NEW: Heading Options
  • NEW: Deviders
  • NEW: Blockquote Styles
  • NEW: Box Shadows
  • NEW: Testimonials Styles
  • NEW: 7 New Button Colors
  • NEW: Icon Button
  • NEW: Outline Buttons
  • NEW: Rounded Buttons
  • NEW: Dropdown Buttons
  • NEW: Split Dropdowns Button
  • NEW: Collection of Brand and Social Buttons
  • NEW: Button Loading & Hover Effects
  • NEW: Icon Sizes
  • NEW: 10+ Icon Color Styles
  • NEW: Rounded Icons
  • NEW: Circle Icons
  • NEW: Rounded and Circle Social Icons
  • NEW: Line Icons
  • NEW: Unlimited Content Boxes
  • NEW: Colored Content Boxes
  • NEW: Tons of Labels & Badges Styles
  • NEW: Progress Bars
  • NEW: Image Styles
  • NEW: Vimeo & Youtube Video Examples
  • NEW: Soundcloud Music
  • NEW: 5+ Panels
  • NEW: Timeline v1
  • NEW: Timeline v2
  • NEW: Responsive Carousel Examples
  • NEW: General Unify Forms
  • NEW: Datepickers
  • NEW: Validation Forms
  • NEW: Masking Forms
  • NEW: Form Layouts
  • NEW: Checkout Form
  • NEW: Review Form
  • NEW: Order Form
  • NEW: Form States
  • NEW: Form Sliders
  • NEW: Modals
  • NEW: Google Maps Examples
  • NEW: Vector Maps
  • NEW: Animated Pie Charts
  • NEW: Counters
  • NEW: Image Breadcrumbs
  • NEW: Animate CSS
  • NEW: Sub Menu on Sidebar Navigation
  • IMPROVEMENT: Typography Page
  • IMPROVEMENT: About Our Team
  • IMPROVEMENT: Clients Page
  • IMPROVEMENT: Gallery Page
  • IMPROVEMENT: Button Sisez
  • IMPROVEMENT: Disabled State
  • IMPROVEMENT: Icon Styles
  • IMPROVEMENT: Bootstrap Forms
  • IMPROVEMENT: Navigation
  • IMPROVEMENT: Documentation
  • FIXED: Mobile Navigation
  • FIXED: Searchbox for Smaller Width Browser
  • FIXED: FancyBox For Mobile
  • FIXED: Button Sizes
  • FIXED: Button Disable States
  • FIXED: Boxed Layout Issue with FancyBox
  • UPDATED: Bootstrap 3.1.1
  • UPDATED: Awesome Icons 4.0.3

Version 1.3 – 19 October 2013

  • NEW: Layer Slider (value $10)
  • NEW: Flatty Home Page
  • NEW: Portfolio Home Page
  • NEW: About Us Option Page
  • NEW: Services Option Page
  • NEW: Invoice Page
  • NEW: Funny Boxes
  • NEW: Meet Our Teamm Page
  • NEW: Registration Option Page
  • NEW: Login Option Page
  • NEW: 3 Column Page
  • NEW: Blog/Magazine Page
  • NEW: Blog Medium Page
  • NEW: Blog Full Width Page
  • NEW: Blog Item Option
  • NEW: Contact Option Page
  • NEW: 404 Error Option Page
  • NEW: Soring Plugin
  • NEW: Tweet Blocks
  • NEW: Tab Styles
  • NEW: Header Option
  • NEW: Content Boxes
  • NEW: Rounded Icon Styles
  • NEW: Colored Social Icon
  • NEW: 12 Different Color Panels
  • NEW: Testimonial Blocks
  • NEW: Boxed Layout
  • NEW: Blog Posts
  • NEW: Blog Quick Links
  • NEW: Panel Tabs
  • NEW: Panel Forms
  • NEW: Responsive Video Class
  • NEW: Youtube Video Example
  • NEW: Info Blocks with Icons
  • NEW: Sidebar Navigation
  • NEW: Hover Dropdown Menu
  • UPGRADE: Twitter Bootstrap 3
  • UPGRADE: jQuery 1.10.2
  • UPGRADE: Revolution Slider 3.0.8
  • UPGRADE: Font Awesome v3.2.1
  • UPGRADE: Glyphicons Pro Icons
  • IMPROVEMENT: Redesigned All Feature Pages
  • IMPROVEMENT: Redesigned Vertical Parallax Slider
  • IMPROVEMENT: Redesigned Service Page
  • IMPROVEMENT: Navigation (Menu)
  • IMPROVEMENT: Blog Spacing
  • IMPROVEMENT: Blog Tags
  • IMPROVEMENT: Tabs/Accordions
  • IMPROVEMENT: Parallax Slider Arrows
  • FIXED: Navigation for Mobile Devices
  • FIXED: Google Map zoom in/out
  • FIXED: Navigation Toggle Color
  • FIXED: Pricing Tables Color
  • FIXED: IE8 Parallax Arrows

Version 1.2 – 27 May 2013

  • NEW: Revolution Slider (value $12)
  • NEW: Coming Soon Page page_coming_soon.html
  • NEW: Glyphicons Pro (value $59)
  • NEW: Four Theme Color Options
  • NEW: Button Styles feature_button.html
  • NEW: Boxed Contact Page page_contact1.html
  • NEW: Search Page page_search.html
  • NEW: Amazing Alternative Home Page page_home5.html
  • IMPROVEMENT: Documentation
  • IMPROVEMENT: Paralax Slider (High Resolution)
  • IMPROVEMENT: HTML/CSS & JS code structures
  • UPGRADE: Twitter Bootstrap v2.3.2
  • UPGRADE: Font Awesome v3.1.1
  • FIXED:
    • Header Search Block (for responsive)
    • Footer Subscribe Form (for IE8)
    • Accardion and Tabs in Firefox browser (added some default bootstrap classes)

Version 1.1 – 24 April 2013

  • UPGRADE: Twitter Bootstrap v2.3.1
  • FIXED: Some page issues in login.html and registration.html

Version 1.0 – 23 April 2013

  • Initial release

Upgrade top

Info Please do not forget to backup your files before the upgrade. If you come across with any problems during the upgrade please contact our support at support@htmlstream.com


Important! Please include all your custom CSS and JavaScript codes to custom.css and custom.js before the upgrading to the latest version. Otherwise, you may lose your custom styles during the upgrade.

The files are located in assets/css/custom.css and assets/js/custom.js. We suggest to write all css/js customizations codes into custom.css and custom.js files.


v1.9+ Upgrade

  • Merged plugins.css into blocks.css, now main global CSS files are app.css and blocks.css. Now, all packages contain app.css and blocks.css files by default. It helps to use any default elements, blocks etc. in any Unify packages. Click here to learn more about the packages.
  • Once Page default pages moved into Classic folder in the One Pages package
  • Hero-Themes moved to One Pages folder (package) e.g. Hero-Fashion, Hero-WebApp etc.
  • Shop-UI folder name changed to E-Commerce
  • Blog folder name changed to Blog-Magazine, the package will be extended in future updates with other blog and magazine design options.
  • One-Page folder name changed to One-Pages, now the package contains dozens thematic design options and counting new demos with each update.
  • tab-v5 class changed to tab-v6 in E-Commerce CSS folder in order to use other global tabs
  • Removed ie8.css file, Unify does not support anymore IE8 and any older version of browsers

Please check changelog section for more information.

v1.8 Upgrade

  • added class name bg-color-white to news-v3 in HTML files and removed background: #fff; for .news-v3 from its CSS file.

Please check changelog section for more information.

v1.7 Upgrade

These files were linked (imported) via CSS in older versions of Unify, starting from v1.7 Unify all these files are linked in each HTML files in the <head> section:

  1. Header File header-default.css
  2. Footer File footer-v1.css
  3. CSS Plugin animate.css
  4. Google Fonts

Info You may find linked CSS files here

Here is the changes made during the v1.7 Unify development:

  • changed handleScrollBar to initScrollBar (shop.app.js)
  • removed/replaced initMouseWheel from shop.app.js to mouse-wheel.js (assets/js/plugins/..)
  • removed blog_right_sidebar.html and blog_left_sidebar.html
  • removed Breadcrumbs v3 and replaced with new design style
  • changed class name: grid-block-v2 to block-grid-v2 (blocks.css)
  • added custom-cubeportfolio.css to assets/cube-portfolio/cubeportfolio/custom/custom-cubeportfolio.css
  • changed path: assets/plugins/sky-forms/version-2.0.1 to assets/plugins/sky-forms-pro/skyforms
  • changed path: assets/plugins/sky-forms/version-2.0.1/css/custom-sky-forms.css to assets/plugins/sky-forms-pro/skyforms/custom/custom-sky-forms.css
  • changed path: assets/ajax/.. to assets/ajax/cube-portfolio/..
  • changed path: assets/php/.. to assets/php/sky-forms-pro/..
  • changed path: assets/css/plugins/animate.css to assets/plugins/animate.css
  • changed path: assets/css/plugins/hover-effect/.. to assets/plugins/hover-effects/..
  • changed path: assets/css/plugins/style-switcher.css to assets/plugins/style-switcher/style-switcher.css
  • changed path: assets/css/plugins/brand-buttons/.. to assets/plugins/brand-buttons/..
  • changed path: assets/js/plugins/placeholder-IE-fixes.js to assets/plugins/placeholder-IE-fixes.js
  • changed HTML files name: profile_* to page_profile_*
  • changed file name feature_*.hmtl to shortcode_*.hmtl

v1.6 Upgrade

  • Almost all plugins are seperated into js files such as Main Parallax Slider, Revolution Slider, Layer Slider etc. to make them easy for controling.
  • Changed themes fodler name to theme-colors which is located in assets/css/
  • Created blocks.css and added verity of css codes of blocks to use them globally.
  • Divided Header Options to separate css files assets/css/headers
    • Totaly rewrited (improved) almost all header options:
    • header-default.css
    • header-v1.css
    • header-v2.css
    • header-v3.css
    • header-v4.css
    • header-v5.css
    • You may find more detailed information in the header section.
  • Divided Footer Options to separate css files assets/css/footers. Moreover we added default-footer for the old main footer.
    • footer-default.css
    • footer-v1.css
    • footer-v2.css
    • footer-v3.css
    • footer-v4.css
    • footer-v5.css
    • footer-v6.css
    • footer-v7.css
    • You may find more detailed information in the footer section.
  • One Page: changed classes inner to call-action-v1-box, inner1 to call-action-v1-in and team to team-v1
  • One Page: footer section code moved into footer-v4.css new file
  • One Page: Twits (Parallax), Out Clients, Testimonials blocks moved into plugins.css
  • One Page: Quote (Parallax), Meet Our Team, Our Services, Portfolio, Call to Action, latest News blocks moved into blocks.css
  • Page Profile Settings js Tab id has been changed (fixed).

v1.4 Upgrade

  • Totaly rewrited almost all feature pages and changed their .html file names.
  • Redesigned and improved page_clients.html page.
  • Changed: page_meet_our_team.html to page_about_our_team.html
  • Changed: page_search.html to page_funny_boxes.html
  • Rewrited class names for content boxes and funny boxes. More examples on pages: feature_box_colored.html and feature_box_funny.html
  • Created some new classes to round and circle elements/blocks. You can use these ready classes .rounded, .rounded-x, .rounded-2x, .rounded-3x, .rounded-4x to round any blocks or elements. .rounded-x used to circle elements and It gives 50% border-radius to any element.
  • Now app.css is built as Unify framework's main stlye. It includes all featres of the Template such as Icons Styles, Buttons, Typography, Content Boxes etc.
  • Redesigned almost all feature elements.
  • Totaly changed header structure. Rewrited both header and topbar blocks. Now topbar is a part of header block.
  • header css files are integrated to style.css
  • responsive.css is integrated to each css files and It's deleted from css folder. Now, no more required to link responsive.css in html files.
  • Added .twitter-time class into <span> for sidebar twitter blocks.
  • Removed dropdown-hover javascript plugin. Now, hover dropdowns work with just css codes.
  • Removed .btn-buy button from the home pages. Instead used default button.
  • Removed icon from the navigation dropdown. Now, dropdown arrows were created from the css.

v1.3 Upgrade

Since latest version of Unify upgraded to Twitter Bootstrap 3 all files comes with a huge JavaScript, HTML and CSS changes.
We suggest you to add the codes from previous version into v1.3 and use it as a base template.

*Please visit the offecial Bootstrap 3 documentation page for more detalied info http://getbootstrap.com

v1.2 Upgrade

Here is breifly explained what we changed in v1.2:

  • File structures:
    • Changed HTML file names. For example:
      • faq.html to page_faq.html
      • about.html to page_about.html
      • contact.html to page_contact.html
      • icons.html to feature_icons.html
      • table.html to feature_table
      • and others...
    • We added all plugins to plugin folder and now all plugins located in assets/plugins/..
  • Parallax Slider now on autoplay. Modified file: assets/plugins/parallax-slider/js/jquery.cslider.js
  • Changed folder and file names from menu to header in CSS folder assets/css/headers/header1.css and assets/css/headers/header2.css
  • Changed Modernizr JS file name assets/js/modernizr.custom.js
  • Changed top and header ID names to CLASS names and now they are <div class="top"> and <div class="header">
  • Changed Social Icons class names which is in footer and in other pages.
  • Deleted tag <div id="body"> in all HTML files
  • Added favicon icon <link rel="shortcut icon" href="favicon.ico">

Info We will improve Unify Documentation in the future updates with more detailed structures. Meanwhile, If you come across any problem during the upgrade please contact to our support at support@htmlstream.com

Others Update v1.6 top

Bootstrap

Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default.

Bootstrap Translations

If you like to learn more about Bootstrap in diffirent languages please click on eof the link below

Supported Browsers

Specifically, Bootstrap supports the latest versions of the following browsers and platforms. On Windows, Bootstrap supports Internet Explorer 8-11. More specific support information is provided below.

Chrome Firefox Internet Explorer Opera Safari
Android Supported Supported N/A Not Supported N/A
iOS Supported N/A Not Supported Supported
Mac OS X Supported Supported Supported Supported
Windows Supported Supported Supported Supported Not Supported

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported. For a list of some of the browser bugs that Bootstrap has to grapple with, see Bootstrap Wall of browser bugs.

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

Feature Internet Explorer 8 Internet Explorer 9
border-radius Not supported Supported
box-shadow Not supported Supported
transform Not supported Supported, with -ms prefix
transition Not supported
placeholder Not supported

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and file://

Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

Respond.js and @import

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

Internet Explorer 8 and box-sizing

IE8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height. For that reason, as of v3.0.1, we no longer use max-width on .containers.

Internet Explorer 8 and @font-face

IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

Sublime Text Editor

We use Sublime text editor for coding. If you would like to use Sublime text editor please click here "Sublime Text Editor" for more detailed information.


End of Documentation top

Once again, thank you for purchasing Unify Template.

With much love Unify team.