Unify is an incredibly beautiful and fully responsive Bootstrap 3 Template for any type of creative professionals. Template comes with developer friendly and easy to customize code. It works on all main web browsers, tablets and phones.

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

Current upgraded release is v1.8 and much more new amazing features are coming soon in the next updates. Thank you for using Unify Template.

Main Structures top

Files Structure Updated v1.8

Unify comes with 5 complete independant templates. In your download package you will find main "Unify (Default)", "E-commerce (Shop UI)" , "Blog Template", "One Page" and "Email" Templates. It is also comes with PSD files. Please check README.txt file in PSD folder to download full version of avaialbe PSD files. The README.txt file includes download link and password.


  • ---- Documentation
  • ---- PSD
  • ---- HTML
    • ---- assets
    • ---- Email-Templates
    • ---- Blog
    • ---- One-Page
    • ---- Shop-UI
    • ---- One-Page
    • ----  index.html
    • ----  ..
    • ----  ..

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

Beginning of the Page

In order to detect Internet Explorer browser version a specific class implemented to following code at the beginning of all HTML pages

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[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.

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

Wrapper Added v1.4

.wrapper class is added on v1.4 to wrap ALL body contents. Mainly It consist of header, slider, breadcurmbs, content parts etc.

<div class="wrapper">

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

Header Updated v1.6

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

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

Content Updated v1.6

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

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


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

    <div class="copyright">
        <div class="container">
<!--=== End Footer Version 1 ===-->

Javascript and jQuery

Javascript files loaded in the end of page, this will reduce page 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>
jQuery(document).ready(function() {

<!--[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>

Misc Pages Updated v1.7

Misc pages purposly created to use Unify template with minimum effort. Simply use any following page to start your new project.

  1. page_misc_blank.html   is empty blank page with all main components conected already
  2. page_misc_boxed.html   is boxed layout of Unify Template
  3. page_misc_boxed_img.html   is boxed layout of Unify Template
  4. page_misc_boxed_fixed_header.html  is fixed header in boxed layout of Unify Template
  5. page_misc_fixed_header.html   is fixed header in Unify Template
  6. page_misc_dark.html   is dark version of Unify Template
  7. page_misc_dark_boxed.html   is dark version in boxed layout of Unify Template
  8. page_misc_dark_other_color.html   is dark version with other theme color of Unify Template
  9. page_misc_sticky_footer.html.html   is Sticky Footer with Copyright Section

Headers & Footers Updated v1.7top

Unify Template includes 8 Header and Footer alternatives.


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 v4 and v7. Meanwhile, header One Page designed only for One Page templarte and can not be used in other Unify pages. For detailed information how to use header options please refer to "Header Options" section below.

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

Header Options

For more detailed information click any link below

Default Header
<!--=== Header v1===-->
<div class="header-v1">
    <!-- Topbar -->
    <div class="topbar-v1">
    <!--  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">

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

Info Example Page: feature_header_v1.html

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

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

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

Info Example Page: feature_header_v2.html

Default Header
<!--=== 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">

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

Info Example Page: feature_header_v3.html

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

    <!-- 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 class="clearfix"></div>

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

Info Example Page: feature_header_v4.html

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

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

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

Info Example Page: feature_header_v5.html

Default Header
<!--=== 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">

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

Info Example Page: feature_header_v6_transparent.html


Footer Options

For more detailed information click any link below

Theme Configuration Updated v1.7 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 theme color you should just replace assets/css/theme-colors/default.css to 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

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

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

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

Theme color CSS links

If you wish to use one of the Unify predifined theme color, simply use one of the css link bellow and replace with 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 is just two easy steps to make Dark Theme:

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

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

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

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

<body class="dark">

Info Example Page: page_misc_dark.html

CSS (Cascading Style Sheets) top

CSS Files Structure

Unify Templete used number of css files in order to keep the template orginized and make it easy to use for futher develpment from small project to massive corporate projects. All CSS files divided in logical order. Knowing CSS files gives a massive flexibility to organize your next project.

All CSS files located in assets/css


  • ---- pages: From here you may control all independent css pages.
  • ---- headers: From here you may contol all 8 Header. It is in separate folder because usually one header is used per project.
  • ---- footers: From here you may contol all 8 Footers. It is in separate folder because usually one footer is used per project.
  • ---- theme-skins From here you may control theme skins. At the monent 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
  • ----  plugins.css
  • ----  ie8.css

CSS Classes

For more detailed information click any link below

Genereal classes for spaces

# Class Name (Selector) Discription Declaration
1 content Applies40pxpaddding from top and bottom.
Designed to be used in big blocks
padding-top: 40px;
padding-bottom: 40px;
2 content-sm Applies60pxpaddding from top and bottom.
Designed to be used in big blocks
padding-top: 60px;
padding-bottom: 60px;
3 content-md Applies80pxpaddding from top and bottom padding-top: 80px;
padding-bottom: 80px;
4 content-lg Applies100pxpaddding from top and bottom.
Designed to be used in big blocks
padding-top: 100px;
padding-bottom: 100px;
5 space-lg-hor Applies60pxpaddding from left and right side padding-left: 60px
padding-right: 60px;
6 space-xlg-hor Applies100pxpaddding from left and right side padding-left: 100px;
padding-right: 100px;
7 margin-left-5 Applies5pxmargin on the left margin-left: 5px
8 margin-right-5 Applies5pxmargin on 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 to margin bottom margin-bottom: 5px
12 margin-bottom-10 Applies10px to margin bottom margin-bottom: 10px
13 margin-bottom-15 Applies15px to margin bottom margin-bottom: 15px
14 margin-bottom-20 Applies20px to margin bottom margin-bottom: 20px
15 margin-bottom-25 Applies25px to margin bottom margin-bottom: 25px
16 margin-bottom-30 Applies30px to margin bottom margin-bottom: 30px
17 margin-bottom-35 Applies35px to margin bottom margin-bottom: 35px
18 margin-bottom-40 Applies40px to margin bottom margin-bottom: 40px
19 margin-bottom-45 Applies45px to margin bottom margin-bottom: 45px
20 margin-bottom-50 Applies50px to margin bottom margin-bottom: 50px
21 margin-bottom-55 Applies55px to margin bottom margin-bottom: 55px
22 margin-bottom-60 Applies60px to margin bottom margin-bottom: 60px


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

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

Those classes effective when screen size is smaller than 992px. For example when elements are placed horizontally on bigger devices and vertically on smaller devices they stuck to each other because there is no spacing between elements. On this occasion folling classes will be very useful.

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

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

Those classes effective when screen size is smaller than 768px. For example when elements are placed horizontally on bigger devices and vertically on smaller devices they stuck to each other because there is no spacing between elements. On this occasion folling classes will be very useful.

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

classes for text colors

# Class Name (Selector) Discription 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) Discription 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;


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

classes for rounded corners

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

# Class Name (Selector) Discription 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 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;

classes for height

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

Other classes

# Class Name (Selector) Declaration
1 overflow-h overflow: hidden;
2 overflow: hidden; overflow: auto;

JavaScript Initialization top

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

var App = function () {

JavaScript Plugins

For more detailed information click any link below

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

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

Official Documentation



All Unify Pages

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 Available

JavaScript Installation

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

Official Documentation



All Unify Pages

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

CSS Installation

No CSS available

JavaScript Installation

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

Official Documentation




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

CSS Installation

No CSS Available

JavaScript Installation

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

Official Documentation




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

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

Official Documentation



Used in Portfolio Pages

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

<script type="text/javascript" src="assets/fancybox/source/jquery.fancybox.pack.js"></script>

Official Documentation






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 Available


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


Official Documentation




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 Available


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

Official Documentation





Glyphicons is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.
200 Glyphicons Icons have already predefined in Bootstrap and no CSS link required. All Bootstrap predefined 200 icons can be found here


Simply by using <span> tag you can place Glyphicons anywhere you like

<span class="glyphicon glyphicon-heart">glyphicon-heart</span>


Glyphicons Pro

Glyphicons Pro Includes:
470 Glyphicons
260 Glyphicons Filetypes
200 Glyphicons Halflings
50 Glyphicons Social

470 Glyphicons icons CSS Installation

In order to benifit full strength of Glyphicons Pro, CSS Installation will be needed. For example: If you need only social icons, only social css Installation will be needed

<link rel="stylesheet" href="assets/plugins/glyphicons-pro/glyphicons/web/html_css/css/glyphicons.css">
<link rel="stylesheet" href="assets/plugins/glyphicons-pro/glyphicons_halflings/web/html_css/css/halflings.css">
<link rel="stylesheet" href="assets/plugins/glyphicons-pro/glyphicons_social/web/html_css/css/social.css">
<link rel="stylesheet" href="assets/plugins/glyphicons-pro/glyphicons_filetypes/web/html_css/css/filetypes.css">
Glyphicons Pro HTML
<span class="glyphicons uni-bell"></span>
<span class="halflings uni-glass"></span>
<span class="social facebook"></span>
<span class="filetype pdf"></span>

Official Documentation




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 Available

JavaScript Installation

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

Official Documentation




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

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

Official Documentation




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

CSS Installation

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

JavaScript Installation

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

Official Documentation




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

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

Official Documentation




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

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

Official Documentation




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

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

Official Documentation




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

<script type="text/javascript" src="assets/plugins/sky-forms-pro/sky-forms/js/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="assets/plugins/sky-forms-pro/sky-forms/js/jquery-ui.min.js"></script>
<script type="text/javascript" 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>

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

Official Documentation




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

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

Official Documentation




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 available

JavaScript Installation

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

Official Documentation




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

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

Depending which map style needed, one of any following js instalatian will be required to place

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

Official Documentation




Fonts top

Unify Template uses Open Sans font for headings and some elements from Google Web Fonts. You are able to choose more than 600+ fonts from Google Web Fonts. The font 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">

Credits Updated v1.8 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
Sequence Slider http://www.sequencejs.com
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

Premium Plugin Credits

Name URL
Master Slider http://www.masterslider.com/jquery
Revolution Slider http://www.themepunch.com/codecanyon/revolution
Layer Slider http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin
Cube Portfolio http://scriptpie.com/cubeportfolio/website
Sky Forms Pro http://voky.com.ua/showcase/sky-forms-pro
FancyBox http://fancyapps.com/fancybox
Glyphicons Pro http://glyphicons.com

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


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.

Video Tutorial "Dynamic Unify PHP + PHP-OOP + Ajax + MySQL" by Igor Alves

We would like to thank Igor Alves for his Unify template video tutorial contribution and invite anyone who has already created any tutorials or planing to create. We will add any Unify tutorials to our documentation if the tutorials will help our customers.

All Rights belong to Igor Alves

End of Documentation top

Once again, thank you for purchasing Unify Template.