Metronic - Admin Dashboard Template

Documentation For Version 1.4

Thank You For Purchasing Metronic, One of Our Premium Items!

If you have any questions that are beyond the scope of this help file, please email our support support@keenthemes.com.

    Overview

    Metronic is a responsive admin dashboard template powered with Twitter Bootstrap Framework for admin and backend applications. Metronic has a clean and intuitive metro style design which makes your next project look awesome and yet user friendly. Metronic comes with a huge collection of plugins and UI components and it works in all major web browsers, tablets and phones.

    Author: KeenThemes
    Contact: support@keenthemes.com
    Created On: 13/02/2013
    Updated On: 6/08/2013

    Live Preview Other Themes

Table of Contents:

2. Template Structure

To top

All template files have fixed structure consisting of header, top menu, main menu, content and footer as shown below:

Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions. 

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

Page head contains metadata, javascript and css files: 

<head>
   <meta charset="utf-8" />
   <title>Metronic | Admin Dashboard Template</title>
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   <meta content="" name="description" />
   <meta content="" name="author" />
   <!-- BEGIN GLOBAL MANDATORY STYLES -->
   <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
   <link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
   <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/style-metro.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
   <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
   <!-- END GLOBAL MANDATORY STYLES -->
   <!-- BEGIN PAGE LEVEL STYLES --> 
   <link href="assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" type="text/css"/>
   <link href="assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
   <link href="assets/plugins/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
   <link href="assets/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" media="screen"/>
   <link href="assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
   <!-- END PAGE LEVEL STYLES -->
   <link rel="shortcut icon" href="favicon.ico" />
</head>

Header

Header contains of logo and top menu bar and it used in all pages. HTML code of header container shown below: 

<div class="header navbar navbar-inverse navbar-fixed-top">
  <!-- BEGIN TOP NAVIGATION BAR -->
  <div class="navbar-inner">
    <div class="container-fluid">
    <!-- HEADER ELEMENTS GO HERE -->
    </div>
  </div>
  <!-- END TOP NAVIGATION BAR -->
</div>

Sidebar

Sidebar contains of quick search form and main navigation menu. HTML code of sidebar container as shown below: 

<!-- BEGIN SIDEBAR -->
<div class="page-sidebar nav-collapse collapse">
  <!-- MAIN MENU GOES HERE.-->
</div>
<!-- END SIDEBAR -->

Content

Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below: 

<!-- BEGIN PAGE -->
<div class="page-content">
  <!-- BEGIN PAGE CONTAINER-->
  <div class="container-fluid">
    <!-- BEGIN PAGE HEADER-->
    <div class="row-fluid">
      <div class="span12">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->   
        <h3 class="page-title">
          Dashboard
          <small>statistics and more</small>
        </h3>
        <ul class="breadcrumb">
          <li>
            <i class="icon-home"></i>
            <a href="#">Home</a> 
            <span class="icon-angle-right"></span>
          </li>
          <li><a href="#">Dashboard</a></li>
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB--> 
      </div>
    </div>
    <!-- END PAGE HEADER-->
    <!-- CONTENT BODY GOES HERE >>>> -->
  </div>   
  <!-- END PAGE CONTAINER-->
</div>      
<!-- END PAGE -->

Footer

<!-- BEGIN FOOTER -->
<div class="footer">
   <div class="footer-inner">
      2013 &copy; Metronic by keenthemes.
   </div>
   <div class="footer-tools">
      <span class="go-top">
      <i class="icon-angle-up"></i>
      </span>
   </div>
</div>
<!-- END FOOTER -->

End Of Page(Javascripts)

Javascript files loaded in the end of page. This will reduce page load time.

  <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
  <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
   <!-- BEGIN CORE PLUGINS -->
  <script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
   <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
   <!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
   <script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      
   <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
   <!--[if lt IE 9]>
   <script src="assets/plugins/excanvas.min.js"></script>
   <script src="assets/plugins/respond.min.js"></script>  
   <![endif]-->   
   <script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
   <script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>  
   <script src="assets/plugins/jquery.cookie.min.js" type="text/javascript"></script>
   <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
  <!-- END CORE PLUGINS -->
   <!-- BEGIN PAGE LEVEL PLUGINS -->
   <script src="assets/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>   
   <script src="assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
   <script src="assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
   <script src="assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
   <script src="assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
   <script src="assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
   <script src="assets/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>  
   <script src="assets/plugins/flot/jquery.flot.js" type="text/javascript"></script>
   <script src="assets/plugins/flot/jquery.flot.resize.js" type="text/javascript"></script>
   <script src="assets/plugins/jquery.pulsate.min.js" type="text/javascript"></script>
   <script src="assets/plugins/bootstrap-daterangepicker/date.js" type="text/javascript"></script>
   <script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>     
   <script src="assets/plugins/gritter/js/jquery.gritter.js" type="text/javascript"></script>
   <script src="assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
   <script src="assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js" type="text/javascript"></script>
   <script src="assets/plugins/jquery.sparkline.min.js" type="text/javascript"></script>  
   <!-- END PAGE LEVEL PLUGINS -->
   <!-- BEGIN PAGE LEVEL SCRIPTS -->
   <script src="assets/scripts/app.js" type="text/javascript"></script>
   <script src="assets/scripts/index.js" type="text/javascript"></script>        
   <!-- END PAGE LEVEL SCRIPTS -->  
   <script>
      jQuery(document).ready(function() {    
         App.init(); // initlayout and core plugins
         Index.init();
         Index.initJQVMAP(); // init index page's custom scripts
         Index.initCalendar(); // init index page's custom scripts
         Index.initCharts(); // init index page's custom scripts
         Index.initChat();
         Index.initMiniCharts();
         Index.initDashboardDaterange();
         Index.initIntro();
      });
   </script>
  <!-- END JAVASCRIPTS -->

HTML Code Comment Sample

All the html, css and javascript file contents have easy to refer and meaningful comments: 

<!-- BEGIN LOGO -->
<a class="brand" href="index.html">
<img src="assets/plugins/img/logo.png" alt="logo" />
</a>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<img src="assets/plugins/img/menu-toggler.png" alt="" />
</a>          
<!-- END RESPONSIVE MENU TOGGLER -->

CSS Code Comment Sample

/***
Header and header elements.
***/
.header {
  padding: 0 !important;
  margin: 0 !important;
}

.header .brand {
  margin-top: -1px;
}

Javascript Code Comment Sample

var initDrag = function (el) {
  // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  // it doesn't need to have a start or end
  var eventObject = {
      title: $.trim(el.text()) // use the element's text as the event title
  };
  // store the Event Object in the DOM element so we can get to it later
  el.data('eventObject', eventObject);
  // make the event draggable using jQuery UI
}

3. Font

To top

Metronic uses Open Sans font from google fonts. The font imported in main css file: assets/css/style.css 

/***
Import fonts
***/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

4. Theme & Layout Configuration

To top

Setup Theme

Metronic comes with 6 color themes, default, blue, grey, brown, purple, light. To setup a selected theme. Include style/themes/[theme_name].css in page head. For instance, if you like to use blue theme, include style/themes/blue.css css file. CSS file load order should be followed as shown below: 

<head>
  <meta charset="utf-8" />
  <title>Metronic Admin Dashboard Template</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  <link href="assets/plugins/css/metro.css" rel="stylesheet" />
  <link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
  <link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link href="assets/plugins/css/style.css" rel="stylesheet" />
  <link href="assets/plugins/css/style_responsive.css" rel="stylesheet" />
  
<link href="assets/plugins/css/style_blue.css" rel="stylesheet" />

  <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="assets/plugins/gritter/css/jquery.gritter.css" />
  <link rel="stylesheet" type="text/css" href="assets/plugins/uniform/css/uniform.default.css" />
  <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-daterangepicker/daterangepicker.css" />
  <link href="assets/plugins/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
  <link rel="apple-touch-icon-precomposed" href="assets/plugins/ico/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon" href="assets/plugins/ico/favicon.png">
</head>

Fluid Layout

1) Fluid Layout with Not Fixed Header

<body class="">
   <!-- BEGIN HEADER -->
   <div class="header navbar navbar-inverse navbar-fixed-top">
      <!-- BEGIN TOP NAVIGATION BAR -->
      <div class="navbar-inner">
         <div class="container-fluid">
            <!-- HEADER CONTENT GOES HERE -->
         </div> 
      </div>
      <!-- END TOP NAVIGATION BAR -->
   </div>
   <!-- END HEADER -->
   <!-- BEGIN CONTAINER -->  
   <div class="page-container row-fluid">
      <!-- BEGIN SIDEBAR -->
      <div class="page-sidebar nav-collapse collapse">
         <!-- PAGE SIDEBAR CONTENT GOES HERE -->
      </div>
      <!-- END SIDEBAR -->
      <!-- BEGIN PAGE -->
      <div class="page-content">
         <!-- PAGE CONTENT GOES HERE -->
      </div>
      <!-- END PAGE -->          
   </div>
   <!-- END CONTAINER -->   
   <!-- BEGIN FOOTER -->
   <div class="footer">
      <!-- PAGE FOOTER GOES HERE -->
   </div>  
   <!-- END FOOTER -->
</body>

2) Fluid Layout with Fixed Sidebar & Fixed Footer

<body class="page-sidebar-fixed page-footer-fixed">
   <!-- BEGIN HEADER -->
   <div class="header navbar navbar-inverse">
      <!-- BEGIN TOP NAVIGATION BAR -->
      <div class="navbar-inner">
         <div class="container-fluid">
            <!-- HEADER CONTENT GOES HERE -->
         </div> 
      </div>
      <!-- END TOP NAVIGATION BAR -->
   </div>
   <!-- END HEADER -->
   <!-- BEGIN CONTAINER -->  
   <div class="page-container row-fluid">
      <!-- BEGIN SIDEBAR -->
      <div class="page-sidebar nav-collapse collapse">
         <!-- PAGE SIDEBAR CONTENT GOES HERE -->
      </div>
      <!-- END SIDEBAR -->
      <!-- BEGIN PAGE -->
      <div class="page-content">
         <!-- PAGE CONTENT GOES HERE -->
      </div>
      <!-- END PAGE -->          
   </div>
   <!-- END CONTAINER -->   
   <!-- BEGIN FOOTER -->
   <div class="footer">
      <!-- PAGE FOOTER GOES HERE -->
   </div>  
   <!-- END FOOTER -->
</body>

 

Boxed Layout

1) Enable Boxed Layout with Fixed Header:

<body class="page-header-fixed page-sidebar-fixed page-boxed">
   <!-- BEGIN HEADER -->
   <div class="header navbar navbar-inverse navbar-fixed-top">
      <!-- BEGIN TOP NAVIGATION BAR -->
      <div class="navbar-inner">
         <div class="container">
            <!-- HEADER CONTENT GOES HERE -->
         </div> 
      </div>
      <!-- END TOP NAVIGATION BAR -->
   </div>
   <!-- END HEADER -->
   <!-- BEGIN BOXED CONTAINER -->
   <div class="container"> 
      <!-- BEGIN CONTAINER -->  
      <div class="page-container row-fluid">
         <!-- BEGIN SIDEBAR -->
         <div class="page-sidebar nav-collapse collapse">
            <!-- PAGE SIDEBAR CONTENT GOES HERE -->
         </div>
         <!-- END SIDEBAR -->
         <!-- BEGIN PAGE -->
         <div class="page-content">
            <!-- PAGE CONTENT GOES HERE -->
         </div>
         <!-- END PAGE -->          
      </div>
      <!-- END CONTAINER -->   
   </div>
   <!-- END BOXED CONTAINER -->
   <!-- BEGIN FOOTER -->
   <div class="footer">
      <div class="container">
      <!-- PAGE FOOTER GOES HERE -->
      </div>
   </div>  
   <!-- END FOOTER -->
</body>

2) Enable Boxed Layout with Not Fixed Header:

<body class="page-header-fixed page-sidebar-fixed page-boxed">
   <!-- BEGIN HEADER -->
   <div class="header navbar navbar-inverse navbar-static-top">
      <!-- BEGIN TOP NAVIGATION BAR -->
      <div class="navbar-inner">
         <div class="container">
            <!-- HEADER CONTENT GOES HERE -->
         </div> 
      </div>
      <!-- END TOP NAVIGATION BAR -->
   </div>
   <!-- END HEADER -->
   <!-- BEGIN BOXED CONTAINER -->
   <div class="container"> 
      <!-- BEGIN CONTAINER -->  
      <div class="page-container row-fluid">
         <!-- BEGIN SIDEBAR -->
         <div class="page-sidebar nav-collapse collapse">
            <!-- PAGE SIDEBAR CONTENT GOES HERE -->
         </div>
         <!-- END SIDEBAR -->
         <!-- BEGIN PAGE -->
         <div class="page-content">
            <!-- PAGE CONTENT GOES HERE -->
         </div>
         <!-- END PAGE -->          
      </div>
      <!-- END CONTAINER -->   
   </div>
   <!-- END BOXED CONTAINER -->
   <!-- BEGIN FOOTER -->
   <div class="footer">
      <div class="container">
      <!-- PAGE FOOTER GOES HERE -->
      </div>
   </div>  
   <!-- END FOOTER -->
</body>

5. Top Menu

To top

Top menu enables an easy access to most frequently accessed information and pages.

Top Menu Dropdown Options

<!-- BEGIN TOP NAVIGATION MENU -->              
<ul class="nav pull-right">
   <!-- BEGIN NOTIFICATION DROPDOWN -->   
   <li class="dropdown" id="header_notification_bar">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="icon-warning-sign"></i>
      <span class="badge">6</span>
      </a>
      <ul class="dropdown-menu extended notification">
         <li>
            <p>You have 14 new notifications</p>
         </li>
         <li>
            <a href="#">
            <span class="label label-success"><i class="icon-plus"></i></span>
            New user registered. 
            <span class="time">Just now</span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="label label-important"><i class="icon-bolt"></i></span>
            Server #12 overloaded. 
            <span class="time">15 mins</span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="label label-warning"><i class="icon-bell"></i></span>
            Server #2 not respoding.
            <span class="time">22 mins</span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="label label-info"><i class="icon-bullhorn"></i></span>
            Application error.
            <span class="time">40 mins</span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="label label-important"><i class="icon-bolt"></i></span>
            Database overloaded 68%. 
            <span class="time">2 hrs</span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="label label-important"><i class="icon-bolt"></i></span>
            2 user IP blocked.
            <span class="time">5 hrs</span>
            </a>
         </li>
         <li class="external">
            <a href="#">See all notifications <i class="m-icon-swapright"></i></a>
         </li>
      </ul>
   </li>
   <!-- END NOTIFICATION DROPDOWN -->
   <!-- BEGIN INBOX DROPDOWN -->
   <li class="dropdown" id="header_inbox_bar">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="icon-envelope"></i>
      <span class="badge">5</span>
      </a>
      <ul class="dropdown-menu extended inbox">
         <li>
            <p>You have 12 new messages</p>
         </li>
         <li>
            <a href="inbox.html?a=view">
            <span class="photo"><img src="./assets/img/avatar2.jpg" alt="" /></span>
            <span class="subject">
            <span class="from">Lisa Wong</span>
            <span class="time">Just Now</span>
            </span>
            <span class="message">
            Vivamus sed auctor nibh congue nibh. auctor nibh
            auctor nibh...
            </span>  
            </a>
         </li>
         <li>
            <a href="inbox.html?a=view">
            <span class="photo"><img src="./assets/img/avatar3.jpg" alt="" /></span>
            <span class="subject">
            <span class="from">Richard Doe</span>
            <span class="time">16 mins</span>
            </span>
            <span class="message">
            Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh
            auctor nibh...
            </span>  
            </a>
         </li>
         <li>
            <a href="inbox.html?a=view">
            <span class="photo"><img src="./assets/img/avatar1.jpg" alt="" /></span>
            <span class="subject">
            <span class="from">Bob Nilson</span>
            <span class="time">2 hrs</span>
            </span>
            <span class="message">
            Vivamus sed nibh auctor nibh congue nibh. auctor nibh
            auctor nibh...
            </span>  
            </a>
         </li>
         <li class="external">
            <a href="inbox.html">See all messages <i class="m-icon-swapright"></i></a>
         </li>
      </ul>
   </li>
   <!-- END INBOX DROPDOWN -->
   <!-- BEGIN TODO DROPDOWN -->
   <li class="dropdown" id="header_task_bar">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="icon-tasks"></i>
      <span class="badge">5</span>
      </a>
      <ul class="dropdown-menu extended tasks">
         <li>
            <p>You have 12 pending tasks</p>
         </li>
         <li>
            <a href="#">
            <span class="task">
            <span class="desc">New release v1.2</span>
            <span class="percent">30%</span>
            </span>
            <span class="progress progress-success ">
            <span style="width: 30%;" class="bar"></span>
            </span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="task">
            <span class="desc">Application deployment</span>
            <span class="percent">65%</span>
            </span>
            <span class="progress progress-danger progress-striped active">
            <span style="width: 65%;" class="bar"></span>
            </span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="task">
            <span class="desc">Mobile app release</span>
            <span class="percent">98%</span>
            </span>
            <span class="progress progress-success">
            <span style="width: 98%;" class="bar"></span>
            </span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="task">
            <span class="desc">Database migration</span>
            <span class="percent">10%</span>
            </span>
            <span class="progress progress-warning progress-striped">
            <span style="width: 10%;" class="bar"></span>
            </span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="task">
            <span class="desc">Web server upgrade</span>
            <span class="percent">58%</span>
            </span>
            <span class="progress progress-info">
            <span style="width: 58%;" class="bar"></span>
            </span>
            </a>
         </li>
         <li>
            <a href="#">
            <span class="task">
            <span class="desc">Mobile development</span>
            <span class="percent">85%</span>
            </span>
            <span class="progress progress-success">
            <span style="width: 85%;" class="bar"></span>
            </span>
            </a>
         </li>
         <li class="external">
            <a href="#">See all tasks <i class="m-icon-swapright"></i></a>
         </li>
      </ul>
   </li>
   <!-- END TODO DROPDOWN -->
   <!-- BEGIN USER LOGIN DROPDOWN -->
   <li class="dropdown user">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <img alt="" src="assets/img/avatar1_small.jpg" />
      <span class="username">Bob Nilson</span>
      <i class="icon-angle-down"></i>
      </a>
      <ul class="dropdown-menu">
         <li><a href="extra_profile.html"><i class="icon-user"></i> My Profile</a></li>
         <li><a href="page_calendar.html"><i class="icon-calendar"></i> My Calendar</a></li>
         <li><a href="inbox.html"><i class="icon-envelope"></i> My Inbox(3)</a></li>
         <li><a href="#"><i class="icon-tasks"></i> My Tasks</a></li>
         <li class="divider"></li>
         <li><a href="extra_lock.html"><i class="icon-lock"></i> Lock Screen</a></li>
         <li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>
      </ul>
   </li>
   <!-- END USER LOGIN DROPDOWN -->
</ul>
<!-- END TOP NAVIGATION MENU -->

8. New Page

To top

To create a new page, you can use layout_blank_page.html which provides basic page layout which you can extend and modify further.

9. Buttons

To top

Button styles can be applied to any element with the .btn class applied. Basically, you'll want to apply these to only <a> and <button>, <input> elements.

class="" Description
<button type="button" class="btn">Default button</button> Default button
<button type="button" class="btn blue">Blue button</button> Blue button
<button type="button" class="btn red">Red button</button> Red button
<button type="button" class="btn green">Green button</button> Green button
<button type="button" class="btn purple">Purple button</button> Purple button
<button type="button" class="btn yellow">Yellow button</button> Yellow button
<button type="button" class="btn grey">Grey button</button> Grey button
<button type="button" class="btn grey mini">Grey Mini button</button> Grey Mini button
<button type="button" class="btn grey big">Huge button</button> Huge button

9. Javascript Initialization

To top

Core javascript initialization implemented in assets/scripts/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 () {

    var localVariable; //local variable

    var sampleFunction = function() {
       //sample function code
    }

    return {

        //main method to initiate template pages
        init: function () {           
            sampleFunction() // call local function
        },

        //sample method declaration
        sampleMethod: function (test) 
        {
          alert(test);
      }

    };

}();

Core Handler Functions defined in assets/scripts/app.js

Below will be listed all handler functons implemented in App object:

handleInit

Main initialization function.

handleDesktopTabletContents

Handlers switching of page element classes for desktop and tablet mode.

handleSidebarState

Hides sidebar toggler if window width smaller than 900px(for table and phone mode)

runResponsiveHandlers

Runs the responsive handler functions set by global API function App.addResponsiveHandler(function) which will be executed when screen size or content size changed.

handleResponsiveOnResize

Handles responsive elements on window resize.

handleResponsive

Handles responsive layout on screen size resize or mobile device rotate.

handleSidebarToggler

Handles sidebar hide/close.

handleMainMenu

Initializes & handles sidebar navigation menu(the main menu).

handleHorizontalMenu

Initializes & handles horizontal navigation menu.

handlePortletTools

Initializes & handles portlet tools as described in below image.

handleFixInputPlaceholderForIE

Fixes and enabled HTML5 input placeholder support for Internet Explorer 8 & 9.

handleTooltip

Initializes & handles Bootstrap Tooltip Plugin(ui_general.html)

handleTabs

Initializes & handles Bootstrap Tab Plugin(ui_tabs_accordions.html)

handleDropdowns

Initializes & handles Bootstrap Dropdowns(ui_buttons.html)

handlePopover

Initializes & handles Bootstrap Popover Plugin(ui_general.html)

handleScrollers

Initializes & handles jQuery Slim Scroller Plugin(index.html)

handleChoosenSelect

Initializes & handles Bootstrap Choosen Plugin(form_component.html)

handleUniform

Initializes & handles jQuery Uniform Plugin(form_component.html)

handleAccordions

Initializes & handles Bootstrap Accordion(Collapse) Plugin(ui_tabs_accordions.html)

handleGoTop

Initializes & handles go to top button at footer.

handleStyler

Initializes & handles style swicher panel.

handleTheme

Initializes & handles template introduction(using gritter notifications).

10. Javascript Plugins & Resources

To top

Select Plugin Or Resource:

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

index.html

Official Documentation

http://omnipotent.net/jquery.sparkline

jQuery Input Mask

jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

form_components.html

Official Documentation

http://github.com/RobinHerbots/jquery.inputmask

jQuery Multi Select

This plugin is a drop-in replacement for the standard select element with multiple attribute activated.

CSS Files

<link href="assets/plugins/jquery-multi-select/css/multi-select-metro.css" rel="stylesheet" type="text/css" media="screen"/>

JavaScript Files

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

Demo Page

form_components.html

Official Documentation

http://loudev.com/

Bootstrap Switch

Use Radio Buttons as switches.

CSS Files

  <link href="assets/plugins/bootstrap-switch/static/stylesheets/bootstrap-switch-metro.css" rel="stylesheet" type="text/css" media="screen"/>

JavaScript Files

  <script src="assets/plugins/bootstrap-switch/static/js/bootstrap-switch.js" type="text/javascript"></script>

Demo Page

form_components.html

Official Documentation

http://www.larentis.eu/switch/

jQuery jCrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

CSS Files

  <link href="assets/plugins/jcrop/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" media="screen"/>

JavaScript Files

  <script src="assets/plugins/jcrop/js/jquery.color.js" type="text/javascript"></script>
  <script src="assets/plugins/jcrop/js/jquery.Jcrop.min.js" type="text/javascript"></script>

Demo Page

form_image_crop.html

Official Documentation

http://github.com/tapmodo/Jcrop

Twitter Bootstrap Hover Dropdown

A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

index.html

Official Documentation

http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/

Bootstrap X-editable

In-place editing with Twitter Bootstrap.

CSS Files

  <!-- BEGIN PLUGINS USED BY X-EDITABLE -->
  <link href="assets/plugins/select2/select2_metro.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="assets/plugins/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="assets/plugins/bootstrap-timepicker/compiled/timepicker.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css" media="screen"/>
  <!-- END PLUGINS USED BY X-EDITABLE -->
  <!-- BEGIN X-EDITABLE PLUGIN-->
  <link href="assets/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="assets/plugins/bootstrap-editable/inputs-ext/address/address.css" rel="stylesheet" type="text/css" media="screen"/>
  <!-- END X-EDITABLE PLUGIN-->

JavaScript Files

  <!-- BEGIN PLUGINS USED BY X-EDITABLE -->
  <script src="assets/plugins/select2/select2.min.js" type="text/javascript"></script>
  <script src="assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js" type="text/javascript"></script>
  <script src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js" type="text/javascript"></script>
  <script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>
  <script src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
  <!-- END PLUGINS USED BY X-EDITABLE -->
  <!-- BEGIN X-EDITABLE PLUGIN-->
  <script src="assets/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js" type="text/javascript"></script>
  <script src="assets/plugins/bootstrap-editable/inputs-ext/address/address.js" type="text/javascript"></script>
  <script src="assets/plugins/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js" type="text/javascript"></script>
  <!-- END X-EDITABLE PLUGIN-->

Demo Page

form_editable.html

Official Documentation

http://vitalets.github.io/x-editable/demo.html

Bootstrap Extended Modals

Responsive, Stackable, AJAX and more.

CSS Files

<link href="assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css" media="screen"/>

JavaScript Files

<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript"></script>

Demo Page

ui_modals.html

Official Documentation

http://jschr.github.com/bootstrap-modal/

jQuery Easy Pie Chart

Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.

CSS Files

<link href="assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>

JavaScript Files

<script src="assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js" type="text/javascript"></script>

Demo Page

form_components.html

Official Documentation

http://rendro.github.io/easy-pie-chart/

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

index.html

Official Documentation

http://omnipotent.net/jquery.sparkline

jQuery Bootpad for Bootstrap

Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

ui_general.html

Official Documentation

http://botmonster.com/jquery-bootpag/

jQuery Input IP Address Control

During user input field, this plugin controls the format of IPv4 or IPv6 addresses.

CSS Files

No CSS available

JavaScript Files

<script type="text/javascript" src="assets/plugins/jquery.input-ip-address-control-1.0.min.js"></script>

Demo Page

form_components.html

Official Documentation

https://code.google.com/p/jquery-input-ip-address-control

jQuery UI Sliders

The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

CSS Files

<link href="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>

JavaScript Files

<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js"></script>
<script src="assets/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

Demo Page

ui_sliders.html

Official Documentation

www.jqueryui.com/slider/

jQuery UI Datepicker

jQuery UI Datepicker.

CSS Files

<link href="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>

JavaScript Files

<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js"></script>

Demo Page

ui_jqueryui.html

Official Documentation

www.jqueryui.com/datepicker/

jQuery UI Dialogs

jQuery UI Dialogs.

CSS Files

<link href="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>

JavaScript Files

<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js"></script>

Demo Page

ui_jqueryui.html

Official Documentation

http://jqueryui.com/dialog/

jQuery Backstretch

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

CSS Files

No CSS available

JavaScript Files

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

Demo Page

page_coming_soon.html

Official Documentation

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

jQuery Countdown

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

CSS Files

No CSS available

JavaScript Files

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

Demo Page

page_coming_soon.html

Official Documentation

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

Bootstrap Datetimepicker

This project is a fork of bootstrap-datetimepicker project which doesn't include Time part. Some others parts has been improved as for example the load process which now accepts the ISO-8601 format. I've copy/pasted the forked project's documentation and added my specifications.

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

http://www.malot.fr/bootstrap-datetimepicker/

Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/select2/select2_metro.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

ivaynberg.github.io/select2/

jQuery UI Sortable

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

CSS Files

<link href="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>

JavaScript Files

<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js"></script>

Demo Page

portlet_draggable.html

Official Documentation

www.jqueryui.com/sortable/

jQuery BlockUI

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser

CSS Files

No CSS available

JavaScript Files

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

Demo Page

index.html

Official Documentation

www.jquery.malsup.com/block/

BREAKPOINTS.JS(Not in use anymore since v1.3)

Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint

CSS Files

No CSS available

JavaScript Files

<script src="assets/plugins/breakpoints/breakpoints.js"></script>

Demo Page

index.html

Official Documentation

www.xoxco.com/projects/code/breakpoints/

jQuery Pulsate

jQuery Pulsate provides animated pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

ui_general.html

Official Documentation

www.kilianvalkhof.com/jquerypulsate/

Respond

A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more)

CSS Files

No CSS available

JavaScript Files

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

Demo Page

index.html

Official Documentation

www.github.com/scottjehl/Respond

Excanvas

Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages

CSS Files

No CSS available

JavaScript Files

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

Demo Page

index.html

Official Documentation

www.excanvas.sourceforge.net/

Colorpicker for Bootstrap

Add color picker to field or to any other element

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-colorpicker/css/colorpicker.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

www.eyecon.ro/bootstrap-colorpicker/

Enhanced Datepicker for Bootstrap

Add datepicker picker to field or to any other element

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-datepicker/css/datepicker.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

https://github.com/eternicode/bootstrap-datepicker

Date Range Picker for Bootstrap

This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-daterangepicker/daterangepicker.css" />

JavaScript Files

<script type="text/javascript" src="assets/plugins/bootstrap-daterangepicker/date.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>

Demo Page

form_component.html

Official Documentation

www.github.com/dangrossman/bootstrap-daterangepicker

Bootstrap Timepicker

Easily select a time for a text input using your mouse or keyboards arrow keys.

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-timepicker/compiled/timepicker.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

www.jdewit.github.com/bootstrap-timepicker/

Clockface Timepicker

Clockface is a simple timepicker for Twitter Bootstrap

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/clockface/css/clockface.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

www.vitalets.github.com/clockface/

jQuery Tags Input

Magically convert a simple text input into a cool tag list with this jQuery plugin

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/jquery-tags-input/jquery.tagsinput.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

https://github.com/xoxco/jQuery-Tags-Input

Bootstrap Toggle

Bootstrap Toggle Buttons Plugin

CSS Files

<link rel="stylesheet" href="assets/plugins/bootstrap-toggle-buttons/static/stylesheets/bootstrap-toggle-buttons.css" />

JavaScript Files

<script type="text/javascript" src="assets/plugins/bootstrap-toggle-buttons/static/js/jquery.toggle.buttons.js"></script>

Demo Page

form_component.html

Official Documentation

https://github.com/nostalgiaz/bootstrap-toggle-buttons

Bootstrap WYSIWYG5

Simple WYSIWYG Editor for Bootstrap

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" />

JavaScript Files

<script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script> 
<script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>

Demo Page

form_component.html

Official Documentation

http://jhollingworth.github.com/bootstrap-wysihtml5/

CKEditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation

CSS Files

No CSS available

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

http://ckeditor.com/

Chosen for Twitter Bootstrap

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/chosen-bootstrap/chosen/chosen.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

http://chosen-sass-bootstrap.herokuapp.com/

DataTables

DataTables for Twitter Bootstrap

CSS Files

<link rel="stylesheet" href="assets/plugins/data-tables/DT_bootstrap.css" />

JavaScript Files

<script type="text/javascript" src="assets/plugins/data-tables/jquery.dataTables.js"></script>

Demo Page

table_managed.html

Official Documentation

http://www.datatables.net/blog/Twitter_Bootstrap_2

Bootstrap Fileupload

The file upload plugin allows you to create a visually appealing file or image upload widgets

CSS Files

<link rel="stylesheet" href="assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css">
<noscript>
  <link rel="stylesheet" href="assets/plugins/jquery-file-upload/css/jquery.fileupload-ui-noscript.css">
</noscript>

JavaScript Files

<!-- BEGIN:File Upload Plugin JS files-->
<script src="assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="assets/plugins/jquery-file-upload/js/vendor/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="assets/plugins/jquery-file-upload/js/vendor/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="assets/plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
<!-- The File Upload file processing plugin -->
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-fp.js"></script>
<!-- The File Upload user interface plugin -->
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="assets/plugins/jquery-file-upload/js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="js/cors/jquery.xdr-transport.js"></script><![endif]-->

Demo Page

table_managed.html

Official Documentation

http://jasny.github.com/bootstrap/javascript.html#fileupload

FancyBox

FancyBox is a tool for displaying images, html content and multi-media

CSS Files

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

JavaScript Files

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

Demo Page

gallery.html

Official Documentation

http://fancybox.net/

Flot

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

CSS Files

No CSS available

JavaScript Files

<script src="assets/plugins/js/jquery-1.8.3.min.js"></script>	
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/js/jquery.blockui.js"></script>		
<script src="assets/plugins/js/jquery.cookie.js"></script>
<script src="assets/plugins/breakpoints/breakpoints.js"></script>

Demo Page

charts.html

Official Documentation

http://www.flotcharts.org/

gmaps.js

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 Files

No CSS available

JavaScript Files

<script src="assets/plugins/js/gmaps.js"></script>
<script src="assets/plugins/js/demo.gmaps.js"></script>

Demo Page

maps_google.html

Official Documentation

http://hpneo.github.com/gmaps/

FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar

CSS Files

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

JavaScript Files

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

Demo Page

calendar.html

Official Documentation

http://arshaw.com/fullcalendar/

Gritter Notifications

The super awesome background is just to show you that all notifications are transparent

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/gritter/css/jquery.gritter.css" />

JavaScript Files

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

Demo Page

ui_general.html

Official Documentation

http://boedesign.com/demos/gritter/

jQuery slimScroll

slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar

CSS Files

No CSS available

JavaScript Files

<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js"></script>	
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>

Demo Page

index.html

Official Documentation

http://rocha.la/jQuery-slimScroll

JQVMAP

JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

CSS Files

<link href="assets/plugins/jqvmap/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

JavaScript Files

<script src="assets/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>	
<script src="assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>

Demo Page

maps_vector.html

Official Documentation

http://jqvmap.com/

Uniform

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/uniform/css/uniform.default.css" />

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

http://uniformjs.com/

DropzoneJS

DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

CSS Files

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

JavaScript Files

<script src="assets/plugins/dropzone/dropzone.js"></script>

Demo Page

form_dropzone.html

Official Documentation

http://www.dropzonejs.com/

Bootstrap Tree

A lightweight Tree component, built for use with the Twitter Bootstrap framework.

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-tree/bootstrap-tree/css/bootstrap-tree.css" />

JavaScript Files

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

Demo Page

ui_tree.html

Official Documentation

https://github.com/cutterbl/Bootstrap-Tree

Bootstrap Form Wizard

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

form_wizard.html

Official Documentation

https://github.com/VinceG/twitter-bootstrap-wizard

Nestable

Drag & drop hierarchical list with mouse and touch compatibility.

CSS Files

<link rel="stylesheet" tyyope="text/css" href="assets/plugins/jquery-nestable/jquery.nestable.css" />

JavaScript Files

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

Demo Page

ui_nestable.html

Official Documentation

https://github.com/dbushell/Nestable

jQuery Validation Plugin

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy

CSS Files

No CSS available

JavaScript Files

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

Demo Page

form_validation.html

Official Documentation

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Font Awesome 3.2.0

The iconic font designed for use with Twitter Bootstrap

CSS Files

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

Official Documentation

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

Glyphicons Pro

Icons are designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices.

CSS Files

<link href="assets/plugins/glyphicons/css/glyphicons.css" rel="stylesheet" />
<link href="assets/plugins/glyphicons_halflings/css/halflings.css" rel="stylesheet" />

Official Documentation

http://glyphicons.com/

Open Sans

Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700

CSS Files

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

Official Documentation

http://www.google.com/webfonts

11. References

To top

Below is the list of all plugins and external resources used to power this template.

Name Description URL
jQuery 1.10.1 Core Javascript library http://www.jquery.com
jQuery Migrate plugin 1.2.1 jQuery Migrate plugin to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on jQuery 1.9 and later. Use the uncompressed development version to diagnose compatiblity issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings http://www.jquery.com
Twitter Bootstrap v2.3.1 Sleek, intuitive, and powerful front-end framework for faster and easier web development http://twitter.github.com/bootstrap/
Select2 Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results http://ivaynberg.github.io/select2/
Bootstrap Extended Modals Responsive, Stackable, AJAX and more.. http://jschr.github.com/bootstrap-modal/
Bootstrap Switch Use Radio Buttons as switches. http://www.larentis.eu/switch/
jQuery jCrop Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. http://github.com/tapmodo/Jcrop
Twitter Bootstrap Hover Dropdown A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/
Bootstrap X-editable In-place editing with Twitter Bootstrap. http://vitalets.github.io/x-editable/demo.html
jQuery Multi Select This plugin is a drop-in replacement for the standard select element with multiple attribute activated. http://loudev.com/
jQuery Sparklines This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. http://omnipotent.net/jquery.sparkline
jQuery Input Mask jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers. http://github.com/RobinHerbots/jquery.inputmask
jQuery Easy Pie Chart Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element http://rendro.github.io/easy-pie-chart/
jQuery Input IP Address Control During user input field, this plugin controls the format of IPv4 or IPv6 addresses. https://code.google.com/p/jquery-input-ip-address-control
jQuery UI Sliders jQuery UI Sliders http://jqueryui.com/slider/
jQuery UI Datepicker jQuery UI Datepicker http://jqueryui.com/datepicker/
jQuery UI Sortable jQuery UI Sortable http://jqueryui.com/sortable/
jQuery UI Dialogs jQuery UI Dialogs http://jqueryui.com/dialog/
jQuery BlockUI The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser http://jquery.malsup.com/block/
BREAKPOINTS.JS(NOT IN USE ANYMORE SINCE v1.3) Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint http://xoxco.com/projects/code/breakpoints/
jQuery Cookie A simple, lightweight jQuery plugin for reading, writing and deleting cookies. https://github.com/carhartl/jquery-cookie
jQuery Pulsate jQuery Pulsate provides animated pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way. http://kilianvalkhof.com/jquerypulsate/
Respond A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more) https://github.com/scottjehl/Respond
Excanvas Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages http://excanvas.sourceforge.net/
jQuery Backstretch A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. http://srobbin.com/jquery-plugins/backstretch/
jQuery Countdown A jQuery plugin that sets a div or span to show a countdown to a given time. http://keith-wood.name/countdown.html
jQuery Bootpad for Bootstrap Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone. http://botmonster.com/jquery-bootpag/
Colorpicker for Bootstrap Add color picker to field or to any other element http://www.eyecon.ro/bootstrap-colorpicker/
Datepicker for Bootstrap Add datepicker picker to field or to any other element https://github.com/eternicode/bootstrap-datepicker
Bootstrap Datetimepicker This project is a fork of bootstrap-datetimepicker project which doesn't include Time part. Some others parts has been improved as for example the load process which now accepts the ISO-8601 format. http://www.malot.fr/bootstrap-datetimepicker/
Date Range Picker for Bootstrap This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates https://github.com/dangrossman/bootstrap-daterangepicker
Bootstrap Timepicker Easily select a time for a text input using your mouse or keyboards arrow keys. http://jdewit.github.com/bootstrap-timepicker/
Clockface Timepicker Clockface is a simple timepicker for Twitter Bootstrap http://vitalets.github.com/clockface/
jQuery Tags Input Magically convert a simple text input into a cool tag list with this jQuery plugin https://github.com/xoxco/jQuery-Tags-Input
Bootstrap Toggle Bootstrap Toggle Buttons Plugin https://github.com/nostalgiaz/bootstrap-toggle-buttons
Bootstrap WYSIWYG5 Simple WYSIWYG Editor for Bootstrap http://jhollingworth.github.com/bootstrap-wysihtml5/
CKEditor CKEditor is a ready-for-use HTML text editor designed to simplify web content creation http://ckeditor.com/
Chosen for Twitter Bootstrap Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly http://chosen-sass-bootstrap.herokuapp.com/
DataTables DataTables for Twitter Bootstrap http://www.datatables.net/blog/Twitter_Bootstrap_2
Bootstrap Fileupload The file upload plugin allows you to create a visually appealing file or image upload widgets http://jasny.github.com/bootstrap/javascript.html#fileupload
FancyBox FancyBox is a tool for displaying images, html content and multi-media http://fancybox.net/
Flot Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. http://www.flotcharts.org/
gmaps.js gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code http://hpneo.github.com/gmaps/
FullCalendar FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar http://arshaw.com/fullcalendar/
Gritter Notifications The super awesome background is just to show you that all notifications are transparent http://boedesign.com/demos/gritter/
jQuery slimScroll slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar http://rocha.la/jQuery-slimScroll
JQVMAP JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML. http://jqvmap.com/
Uniform Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility http://uniformjs.com/
jQuery File Upload File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery http://blueimp.github.com/jQuery-File-Upload/
DropzoneJS DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews. http://www.dropzonejs.com/
jQuery UI Touch Punch jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. http://touchpunch.furf.com/
Bootstrap Tree A lightweight Tree component, built for use with the Twitter Bootstrap framework. https://github.com/cutterbl/Bootstrap-Tree
Bootstrap Form Wizard This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. https://github.com/VinceG/twitter-bootstrap-wizard
Bootstrap Form Wizard This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. https://github.com/VinceG/twitter-bootstrap-wizard
Nestable Drag & drop hierarchical list with mouse and touch compatibility. https://github.com/dbushell/Nestable
jQuery Validation Plugin The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Font Awesome The iconic font designed for use with Twitter Bootstrap http://fortawesome.github.com/Font-Awesome/
Glyphicons Pro Icons are designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices. http://glyphicons.com/
Open Sans Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700 http://www.google.com/webfonts

12. Change Log

To top

Version 1.4 – 29 June 2013(Both LTR and RTL versions)

  • NEW: Added Recent Activities Portlet in the Dashboard
    • Modified html file: index.html
  • NEW: Added Todo/Tasks Portlet in the Dashboard
    • Modified html file: index.html
    • Added style file: assets/css/pages/tasks.html
    • Added javascript file: assets/scripts/tasks.js
  • NEW: Bootstrap X-editable Plugin Integration
    • Added html file: form_editable.html
    • Added javascript file: assets/scripts/form-editable.js
    • Added plugin folder: assets/plugins/bootstrap-editable/
  • NEW: Image Crop Plugin Integration
    • Added html file: form_image_crop.html
    • Added javascript file: assets/scripts/form-image-crop.js
    • Added plugin folder: assets/plugins/jcrop/
  • NEW: Bootstrap Switch Plugin Integration
    • Added html file: form_components.html
    • Added javascript file: assets/scripts/form-components.js
    • Added plugin folder: assets/plugins/bootstrap-switch/
  • NEW: Language Switching Bar
    • Added html file: layout_language_bar.html
    • Modified style file: assets/css/style.css
  • NEW: Added Samples For Ajax Username Availability Checking
    • Modified html file: form_components.html
    • Modified style file: assets/css/style.css
    • Modified javascript file: assets/scripts/form-components.js
  • NEW: Added Samples For Password Strength Checking
    • Modified html file: form_components.html
    • Modified style file: assets/css/style.css
    • Modified javascript file: assets/scripts/form-components.js
  • NEW: Added Loading Indicator(Spinner) In Form Inputs
    • Modified html file: form_components.html
    • Modified style file: assets/css/style.css
  • NEW: Hoverable Dropdown Plugin Integration
    • Modified html files: all html files
    • Added plugin folder: assets/plugins/bootstrap-hover-dropdown/
  • NEW: Added Notification Badges for Sidebar Menu, Top Bar User Menu and Bootsrap Dropdowns
    • Modified html file: all html files
    • Modified style file: assets/css/style.css
  • NEW: Added Full Screen Mode Toggle Link Under The User Top Menu
    • Modified html files: all html files
    • Modified javascript file: assets/scripts/app.js
  • ENHANCEMENT: The Sidebar Menu's Submenu Auto Scroll/Focus on Expand
    • Modified html files: all html files
    • Modified javascript file: assets/scripts/app.js
  • ENHANCEMENT: Scrollable Top Bar Notifications(Inbox, Notifications, Tasks)
    • Modified html files: all html files
    • Modified style file: assets/css/style.css
  • ENHANCEMENT: Add Address Fields in Registration Form(Address, City, Country)
    • Modified html files: login.html login-soft.html
    • Modified style files: assets/css/pages/login.css assets/css/pages/login-soft.css
    • Modified javascript files: assets/scripts/login.js assets/scripts/login-soft.js
  • ENHANCEMENT: Change Non-Responsive Boxed Page Layout Width to 1000px
    • Modified style file: assets/css/style-non-responsive.css
  • ENHANCEMENT: Added Form Validation Samples for WYSIHTML5 Editor and CKEditor
    • Modified html file: form_validation.html
    • Modified style file: assets/css/style.css
    • Modified javascript file: assets/scripts/form-validation.js
  • ENHANCEMENT: Enabled Login Form Submit Based on Form's action attribute
    • Modified html files: login.html login-soft.html
    • Modified javascript files: assets/scripts/login.js assets/scripts/login-soft.js
  • ENHANCEMENT: Added Samples For Toolbar Containing of Buttons & Button Dropdowns
    • Modified html file: ui_buttons.html
  • ENHANCEMENT: Added Samples For Popovers & Tooltips in Slim Scroll Container
    • Modified html file: ui-general.html
  • ENHANCEMENT: Modal Dialogs with Slim Scroll Content
    • Modified html file: ui_modals.html
  • UPGRADE: Bootstrap 2.3.2
    • Updated folder: assets/plugins/bootstrap/
  • UPGRADE: Select2 3.4.1
    • Updated folder: assets/plugins/select2/
  • FIXED: Missing Images For DataTabeles Column Order Disabled State
    • Added image files: assets/data-tables/images/sort_asc_disabled.png assets/data-tables/images/sort_desc_disabled.png
  • FIXED: Uniform Checkbox & Radio Button Disabled State Bug
    • Modified style file: assets/css/style.css
    • Updated image file: assets/plugins/uniform/images/sprite.png
  • FIXED: Slim Scroll Container's Height Issue(content is fully expanded before Slim Scroller initialization)
    • Modified html file: index.html
    • Modified javascript file: assets/scripts/app.js
  • FIXED: Nested Portlets Issue
    • Modified style file: assets/css/style.css
  • FIXED: Page Breadcrumb Overlapping Issue on IE8
    • Modified style file: assets/css/style.css
  • FIXED: Inbox Ajax Load Issue On Chrome(412 error)
    • Modified javascript file: assets/scripts/inbox.js
  • FIXED: Select2 Z-Index Issue on Modals
    • Modified style file: assets/plugins/select2/select2_metro.css
    • Modified style file: assets/css/style-metro.css
  • FIXED: Fix Form Input Height on Mobile Devices
    • Modified style file: assets/css/style-metro.css

Version 1.3 – 14 June 2013(Both LTR and RTL versions)

  • NEW: Layout Options(Boxed Layout, Non-Responsive Boxed Layout, Fixed Footer, Fixed Sidebar)
    • Modified html files: all html files
    • Modified style file: assets/css/style.css
    • Modified style file: assets/css/style-responsive.css
    • Added style file: assets/css/style-non-responsive.css
    • Modified javascript file: assets/scripts/app.js
  • NEW: Switching Back to LTR from RTL Version(Multi lingual RTL & LTR Support)
    • Modified html files: all html files
    • Modified style files: all css files under assets/css/*
    • Modified javascript files: all javascript files under assets/scripts/*
    • Modified plugin files: all plugins files & folders under assets/plugins/*
  • NEW: Added Complete Grey Theme Color
    • Modified html files: all html files
    • Added style files: assets/css/themes/grey.css
    • Modified javascript file: assets/scripts/app.js
  • NEW: jQuery Multi Select
    • Modified html files: form_comonents.html
    • Modified style file: aassets/css/style.css
    • Modified javascript file: assets/scripts/form-components.js
    • Added plugin folder: assets/plugins/jquery-multi-select/
  • NEW: Bootstrap Extended Modals
    • Modified html files: ui_modals.html
    • Modified style file: assets/css/style.css
    • Modified style file: assets/css/style-metro.css
    • Added javascript file: assets/scripts/ui-modals.js
    • Added plugin folder: assets/plugins/bootstrap-modal/
  • NEW: Timeline Page
    • Added html file: page_timeline.html
    • Added css file: assets/css/pages/timeline.css
  • NEW: New Login Form Option
    • Added html file: login_soft.html
    • Modified style file: assets/css/pages/login-soft.css
  • NEW: Advanced Data Table Samples(Responsive Datatable with Expandable Row Details & Datatable with Show/Hide Column Options)
    • Added html file: table_advanced.html
    • Added javascript file: assets/scripts/table-advanced.js
    • Modified style file: assets/css/style.css
  • NEW: 404 Error Page Option #1
    • Added html file: extra_404_option1.html
    • Modified style file: assets/css/pages/error.css
  • NEW: 404 Error Page Option #2
    • Added html file: extra_404_option2.html
    • Modified style file: assets/css/pages/error.css
  • NEW: 404 Error Page Option #3
    • Added html file: extra_404_option3.html
    • Modified style file: assets/css/pages/error.css
    • Added image: assets/img/pages/earth.jpg
  • NEW: 500 Error Page Option #1
    • Added html file: extra_500_option1.html
    • Modified style file: assets/css/pages/error.css
  • NEW: 500 Error Page Option #2
    • Added html file: extra_500_option2.html
    • Modified style file: assets/css/pages/error.css
  • NEW: More Plot Pie Chart Samples
    • Added html file: charts.html
    • Modified javascript file: assets/scripts/charts.js
  • NEW: jQuery Migrate v1.2.1 Plugin(used with jQuery 1.10.1 for the backward compatability)
    • Added javascript file: assets/plugins/jquery-migrate-1.2.1.min.js
  • NEW: Added Instagram & VK Social Icons
    • Modifed style file: assets/css/style.css
  • ENHANCEMENT: Improved Footer, Header & Sidebar Menu
    • Modified html file: all html files
    • Modified javascript file: assets/scripts/app.js
    • Modified style file: assets/css/style.css
    • Modified style file: assets/css/style-responsive.css
  • ENHANCEMENT: Scrollable Accordions(auto focus accordion content on click)
    • Modified html file: ui_tabs_accordions.html
    • Modified javascript file: assets/scripts/app.js
    • Modified style file: assets/css/style.css
  • ENHANCEMENT: Flexible Left & Right Aligned Tabs with Auto Handled Min Height Tab Content(now it works fine when tab has less content)
    • Modified html file: ui_tabs_accordions.html
    • Modified javascript file: assets/scripts/app.js
    • Modified style file: assets/css/style.css
  • ENHANCEMENT: Activate Tab by URL parameter(e.g: page.html#tab_1)
    • Modified html file: ui_tabs_accordions.html
    • Modified javascript file: assets/scripts/app.js
    • Modified style file: assets/css/style.css
  • ENHANCEMENT: Activate Accordion by URL parameter(e.g: page.html#section_1)
    • Modified html file: ui_tabs_accordions.html
    • Modified javascript file: assets/scripts/app.js
    • Modified style file: assets/css/style.css
  • ENHANCEMENT: Scrollable Accordions(auto focus accordion content on click)
    • Modified html file: ui_tabs_accordions.html
    • Modified javascript file: assets/scripts/app.js
    • Modified style file: assets/css/style.css
  • ENHANCEMENT: Dropdown Option with Multi Select Checkbox List
    • Modified html file: ui_buttons.html
    • Modified javascript file: assets/scripts/app.js
    • Modified style file: assets/css/style.css
  • ENHANCEMENT: Form Validation in Form Wizard Steps
    • Modified html file: form_wizard.html
    • Modified javascript file: assets/scripts/form-wizard.js
  • ENHANCEMENT: Validating Select2 Dropdowns
    • Modified html file: form_validation.html
    • Modified javascript file: assets/scripts/form_validation.js
    • Modified style file: assets/css/style.css
  • ENHANCEMENT: Select2 Dropdown UI
    • Modified style file: assets/css/style.css
    • Modified style file: assets/plugins/select2/select2_metro.css
  • UPDATES: Plugin & Resource Updates(Requires replacing files and folders entirely)
    • Latest jQuery v1.10.1 assets/plugins/jquery-1.10.1.min.js
    • Latest FontAwesome v3.2.0 assets/plugins/font-awesome/
    • Latest Bootstrap Datepicker assets/plugins/bootstrap-datepicker/
    • Latest Bootstrap WYSIHTML5 assets/plugins/bootstrap-wysihtml5/
    • Latest jQuery Datatables v1.9.4 assets/plugins/data-tables/
    • Latest Dropzone v3.0 assets/plugins/dropzone/
    • Latest jQuery Flot Charts v0.8.1 assets/plugins/flot/
    • Latest jQuery GMaps v0.4.3 assets/plugins/gmaps/
    • Latest jQuery SlimScroll assets/plugins/jquery-slimscroll/
    • Latest jQuery Validation v1.11.1 assets/plugins/jquery-validation/
    • Latest jQuery Uniform v2.1.0 assets/plugins/uniform/
    • Latest jQuery BlockUI v2.59.0 assets/plugins/jquery.blockui.min.js
    • Latest jQuery Cookie v1.3.1 assets/plugins/jquery.cookie.min.js
  • FIX: Error On Using Multiple WYSIHTML5 Instances
    • Modified html file: form_component.html
    • Modified javascript file: assets/scripts/form-component.js
    • Modified plugin files(requires replacing entire folder): assets/plugins/bootstrap-wysihtml5/
  • FIX: Plot Pie Chart Hover Issue
    • Modified html file: charts.html
    • Modified javascript file: assets/scripts/charts.js
  • FIX: Z-Index Issue When Datepickers, Datetimepicker, Timepicker and Colorpickers used in Modals
    • Modified html file: form_component.html
    • Modified javascript file: assets/scripts/form-component.js
    • Modified style file: assets/css/style.css
  • FIX: Placeholder Issue on Internet Explorer 8 & 9.
    • Modified javascript file: assets/scripts/app.js
  • RETIRED: BREAKPOINTS Plugin Not In Use Anymore
    • Modified html file: all html files
    • Modified javascript file(implemented a function to handle the layout on window resize event): assets/scripts/app.js
    • Plugin folder: assets/plugins/breakpoints/

Version 1.2.4 – 11 May 2013(Both LTR and RTL versions)

  • NEW: Integrated jQuery UI Dialogs:
    • Modified html file: ui_jqueryui.html
    • Modified style file: assets/css/style.css
    • Modified javascript file: assets/scripts/ui-jqueryui.js
  • NEW: Integrated Bootstrap Datatimepicker:
    • Bootstrap Datatimepicker plugin added: assets/plugins/bootstrap-datatimepicker/
    • Modified html file: form_component.html
    • Modified style file: assets/css/style.css
    • Modified javascript file: assets/scripts/form-components.js
  • NEW: Dynamic Pagination - jQuery Bootpad:
    • jQuery Bootpad plugin added: assets/plugins/jquery.bootpag.min,js
    • Modified html file: ui_general.html
    • Modified javascript file: assets/scripts/ui-general.js
  • NEW: Cooming Soon Page:
    • Added html file: page_coming_soon.html
    • Added style file: assets/css/pages/coming-soon.css
    • Added javascript file: assets/scripts/coming-soon.js
    • jQuery Countdown plugin added: assets/plugins/countdown/
    • jQuery Backstretch plugin added: assets/plugins/backstretch/
    • Background images added: assets/img/bg/
  • NEW: Lock Screen:
    • Added html file: extra_lock.html
    • Added style file: assets/css/pages/lock.css
    • Added javascript file: assets/scripts/lock.js
    • jQuery Backstretch plugin added: assets/plugins/backstretch/
    • Background images added: assets/img/bg/
  • IMPROVEMENT: Select2 Dropdowns Integration with Advance Form Layouts:
    • Please use Select2 instead of Chosen since Select2 works very well with bootstrap in responsive layouts
    • Modified style file: assets/css/style.css
    • Modified html page: form_samples.html
  • IMPROVEMENT: Bootstrap Datepicker UI:
    • The datepicker UI modified to give more Metro style
    • Modified style file: assets/css/style.css
    • Modified plugin javascript file: assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js
  • IMPROVEMENT: FullCalendar Colorful Events:
    • Modified style file: assets/css/style.css
    • Modified javascript file: assets/scripts/index.js
    • Modified javascript file: assets/scripts/calendar.js
  • FIXED: FancyBox Image Preview Overlapped by the Fixed Footer:
    • Modified style file: assets/css/style.css
  • FIXED: Select2 diselect icon position issue for RTL version:
    • Modified style file: assets/plugins/select2/select2_metro.css
  • FIXED: Info block alignment in RTL Version -> Extra -> Search Results -> Booking Search:
    • Modified style file: assets/extra_search.html

Version 1.2.3 – 3 May 2013

  • NEW: Full RTL(Right To Left) Support:
    • Created a new folder template_content_rtl for RTL version
    • The theme layout, all the html templates and the plugins converted to RTL version
  • NEW: Loading Page Content via Ajax:
    • Added a new sample page: layout_ajax.html
    • Added loading image for ajax content loading process bar: assets/img/ajax-loading.gif
    • Modified the main script file: assets/scripts/app.js
  • NEW: Responsive Data Tables:
    • Added a new sample page: table_responsive.html
    • Modified the main css file: assets/css/style.css
  • NEW: About Us Page
    • Added a new sample page: page_about.html
    • Added a new css file: assets/css/pages/about-us.css
  • NEW: Contact Us Page
    • Added a new sample page: page_contact.html
    • Added a new javascript file: assets/scripts/contact-us.js
  • NEW: Enhanced Bootstrap Datapicker from
    • Current Bootstrap Datepicker plugin replaced with a better one from
    • The plugin assetsassets/plugins/bootstrap-datepicker and demo samples are not modified since this new plugins is fully compatible enhanced version of the previouse one.
  • FIXED: Broken Portlet Header Issue on Webkit Browsers
    • Modified portlet HTML mackup and the main css file assets/css/style.css

Version 1.2.2 – 22 April 2013

  • NEW: Combined Horizontal & Sidebar Menu Layout
  • NEW: Promo Page Layout
  • NEW: Sidebar Closed Page Layout
  • NEW: Blog Page
  • NEW: News Page
  • NEW: Integrated jQuery UI Datepicker
  • NEW: Social Icons
  • FIXED: Some minor bug fixing

Version 1.2.1 – 13 April 2013

  • NEW: Easy Pie Charts in Dashboard
  • NEW: Sparklines Charts in Dashboard
  • NEW: Form Input Masks
  • NEW: Ip Address Input Control
  • NEW: Search Page Options(Image Search, Booking Search)
  • NEW: Pricing Table Option
  • FIXED: Some minor bug fixing

Version 1.2 – 10 April 2013

  • NEW: Email Templates(email1.html, email2.html, email3.html, email4.html, email5.html, email6.html)
  • NEW: Multi Level Horizontal Menu(horizontal_menu1.html, horizontal_menu2.html,)
  • NEW: 4 Level Sidebar Menu(index.html)
  • NEW: Full Featured Inbox(inbox.html)
  • NEW: Integrated jQuery Select2(form_component.html)
  • NEW: Country List with Flags(form_component.html)
  • NEW: Printable Invoice(extra_invoice.html)
  • UPGRADE: Latest jQuery FullCalendar v1.6.0 Integration(calendar.html)
  • IMPROVEMENT: Sidebar Main Menu Code Optimization
  • IMPROVEMENT: Javascript Optimization(Core and demo functionalities put in seperated files)
  • IMPROVEMENT: CSS Optimization(Core and page level styles put in seperated files)
  • IMPROVEMENT: Assets File Structure Optimized(resources and plugins categorized in seperate folders)
  • FIXED: Some minor bug fixing

Version 1.1.2 – 17 March 2013

  • NEW: Advance Form Samples(form_samples.html)
  • NEW: Advance Form Validation(form_validation.html)
  • NEW: Integrated Tree Views(ui_tree.html)
  • NEW: Integrated Nestable Lists(ui_nestable.html)
  • NEW: Touch Support For Sliders(ui_sliders.html)
  • IMPROVEMENT: Some code improvements
  • FIXED: Some minor bug fixing

Version 1.1.1 – 10 March 2013

  • NEW: Integrated jQuery UI Sliders(ui_sliders.html)
  • NEW: jQuery Knob - Circle Dials(ui_sliders.html)
  • NEW: Windows 8 Style Tiles(ui_tiles.html)
  • NEW: Integrate Multiple File Upload(form_fileupload.html)
  • NEW: Integrated Dropzone File Upload(form_dropzone.html)
  • NEW: Inline Editable Data Tables(table_editable.html)
  • NEW: Full Width Page Layout(extra_full_width.html)
  • NEW: Draggable Portlets Moved To a Seperate Page(portlet_draggable.html)
  • UPGRADE: Twitter Bootstrap v2.3.1
  • IMPROVEMENT: Some code improvements
  • FIXED: Some minor bug fixing

Version 1.1 – 26 Februry 2013

  • NEW: GLYPHICONS PRO package(Value $59)
  • NEW: Show/hide sidebar
  • NEW: Dragable portlets
  • NEW: Buttons/dropdowns/pagination in portlet headers
  • NEW: Styled accordions
  • NEW: User profile page
  • NEW: FAQ rage
  • NEW: Search results page
  • NEW: Invoice rage
  • NEW: Bordered form Layout
  • NEW: 2 new heme colors
  • FIXED: Some minor bug fixing
  • IMPROVEMENT: Some code improvements

Version 1.0 – 13 Februry 2013

  • Initial release

13. Upgrade

To top

Since v1.2 comes with a big javascript, html and css changes, we strongly recommended you to use v1.2 as base and merge the code from earlier version into v1.2.

To upgrade from v1.2.1 to v1.2.2 you may just replace the assets folder.

To upgrade from v1.3 to v1.4 you may just replace the assets folder and merge back your own changes.

Please do not forget to backup your files before the upgrade. If you encountered any problem during the upgrade please contact our support at support@keenthemes.com

14. End Of Documentation

To top

Once again, thanks for purchasing Metronic. We hope you will enjoy using it for your next project.