Conquer - Admin Dashboard Template

Documentation For Version 2.0

Thank You For Purchasing Conquer, 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.

Table of Contents:

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:

<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<title>Conquer | Visual Charts</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<meta name="MobileOptimized" content="320">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="assets/css/style-conquer.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/plugins.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<!-- END HEAD -->

Header

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

<!-- BEGIN HEADER -->
<div class="header navbar  navbar-fixed-top">
  <!-- BEGIN TOP NAVIGATION BAR -->
  <div class="header-inner">
    <!-- BEGIN LOGO -->
    <div class="page-logo">
            <a href="index.html">
                <img src="assets/img/logo.png" alt="logo"/>
            </a>
        </div>
        <form class="search-form search-form-header" role="form" action="index.html">
            <div class="input-icon right">
                <i class="icon-magnifier"></i>
                <input type="text" class="form-control input-sm" name="query" placeholder="Search...">
            </div>
        </form>
    <!-- END LOGO -->
    <!-- BEGIN RESPONSIVE MENU TOGGLER -->
    <a href="javascript:;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <img src="assets/img/menu-toggler.png" alt=""/>
    </a>
    <!-- END RESPONSIVE MENU TOGGLER -->
    <!-- BEGIN TOP NAVIGATION MENU -->
    <ul class="nav navbar-nav pull-right">
      <!-- BEGIN NOTIFICATION DROPDOWN -->
      <li class="dropdown" id="header_notification_bar">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="icon-bell"></i>
        <span class="badge badge-success">
        6 </span>
        </a>
        <ul class="dropdown-menu extended notification">
          <li>
            <p>
               You have 14 new notifications
            </p>
          </li>
          <li>
            <ul class="dropdown-menu-list scroller" style="height: 250px;">
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-success">
                <i class="fa fa-plus"></i>
                </span>
                New user registered. <span class="time">
                Just now </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-danger">
                <i class="fa fa-bolt"></i>
                </span>
                Server #12 overloaded. <span class="time">
                15 mins </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-warning">
                <i class="fa fa-bell"></i>
                </span>
                Server #2 not responding. <span class="time">
                22 mins </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-info">
                <i class="fa fa-bullhorn"></i>
                </span>
                Application error. <span class="time">
                40 mins </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-danger">
                <i class="fa fa-bolt"></i>
                </span>
                Database overloaded 68%. <span class="time">
                2 hrs </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-danger">
                <i class="fa fa-bolt"></i>
                </span>
                2 user IP blocked. <span class="time">
                5 hrs </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-warning">
                <i class="fa fa-bell"></i>
                </span>
                Storage Server #4 not responding. <span class="time">
                45 mins </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-info">
                <i class="fa fa-bullhorn"></i>
                </span>
                System Error. <span class="time">
                55 mins </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="label label-sm label-icon label-danger">
                <i class="fa fa-bolt"></i>
                </span>
                Database overloaded 68%. <span class="time">
                2 hrs </span>
                </a>
              </li>
            </ul>
          </li>
          <li class="external">
            <a href="#">See all notifications <i class="fa fa-angle-right"></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" data-hover="dropdown" data-close-others="true">
        <i class="icon-envelope-open"></i>
        <span class="badge badge-info">
        5 </span>
        </a>
        <ul class="dropdown-menu extended inbox">
          <li>
            <p>
               You have 12 new messages
            </p>
          </li>
          <li>
            <ul class="dropdown-menu-list scroller" style="height: 250px;">
              <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>
                <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">
                40 mins </span>
                </span>
                <span class="message">
                Vivamus sed auctor 40% nibh congue 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">
                46 mins </span>
                </span>
                <span class="message">
                Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
                </a>
              </li>
            </ul>
          </li>
          <li class="external">
            <a href="inbox.html">See all messages <i class="fa fa-angle-right"></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" data-hover="dropdown" data-close-others="true">
        <i class="icon-calendar"></i>
        <span class="badge badge-warning">
        5 </span>
        </a>
        <ul class="dropdown-menu extended tasks">
          <li>
            <p>
               You have 12 pending tasks
            </p>
          </li>
          <li>
            <ul class="dropdown-menu-list scroller" style="height: 250px;">
              <li>
                <a href="#">
                <span class="task">
                <span class="desc">
                New release v1.2 </span>
                <span class="percent">
                30% </span>
                </span>
                <span class="progress">
                <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                <span class="sr-only">
                40% Complete </span>
                </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-striped">
                <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
                <span class="sr-only">
                65% Complete </span>
                </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">
                <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
                <span class="sr-only">
                98% Complete </span>
                </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-striped">
                <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                <span class="sr-only">
                10% Complete </span>
                </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-striped">
                <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100">
                <span class="sr-only">
                58% Complete </span>
                </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-striped">
                <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                <span class="sr-only">
                85% Complete </span>
                </span>
                </span>
                </a>
              </li>
              <li>
                <a href="#">
                <span class="task">
                <span class="desc">
                New UI release </span>
                <span class="percent">
                18% </span>
                </span>
                <span class="progress progress-striped">
                <span style="width: 18%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">
                <span class="sr-only">
                18% Complete </span>
                </span>
                </span>
                </a>
              </li>
            </ul>
          </li>
          <li class="external">
            <a href="#">See all tasks <i class="fa fa-angle-right"></i></a>
          </li>
        </ul>
      </li>
      <!-- END TODO DROPDOWN -->
      <li class="devider">
         &nbsp;
      </li>
      <!-- BEGIN USER LOGIN DROPDOWN -->
      <li class="dropdown user">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <img alt="" src="assets/img/avatar3_small.jpg"/>
        <span class="username">
        Nick </span>
        <i class="fa fa-angle-down"></i>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="extra_profile.html"><i class="fa fa-user"></i> My Profile</a>
          </li>
          <li>
            <a href="page_calendar.html"><i class="fa fa-calendar"></i> My Calendar</a>
          </li>
          <li>
            <a href="page_inbox.html"><i class="fa fa-envelope"></i> My Inbox <span class="badge badge-danger">
            3 </span>
            </a>
          </li>
          <li>
            <a href="#"><i class="fa fa-tasks"></i> My Tasks <span class="badge badge-success">
            7 </span>
            </a>
          </li>
          <li class="divider">
          </li>
          <li>
            <a href="login.html"><i class="fa fa-key"></i> Log Out</a>
          </li>
        </ul>
      </li>
      <!-- END USER LOGIN DROPDOWN -->
    </ul>
    <!-- END TOP NAVIGATION MENU -->
  </div>
  <!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->

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 CONTENT -->
<div class="page-content-wrapper">
  <div class="page-content">
    <!-- BEGIN PAGE HEADER-->
    <h3 class="page-title">
      Visual Charts <small>visual charts & graphs</small>
    </h3>
    <div class="page-bar">
      <ul class="page-breadcrumb">
        <li>
          <i class="fa fa-home"></i>
          <a href="index.html">Home</a>
          <i class="fa fa-angle-right"></i>
        </li>
        <li>
          <a href="#">Visual Charts</a>
        </li>
      </ul>
      <div class="page-toolbar">
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-fit-height default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
          Actions <i class="fa fa-angle-down"></i>
          </button>
          <ul class="dropdown-menu pull-right" role="menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li class="divider">
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- END PAGE HEADER-->
    <!-- BEGIN PAGE CONTENT -->
    ............
    <!-- END PAGE CONTENT-->
  </div>
</div>
<!-- END CONTENT -->

Footer

<!-- BEGIN FOOTER -->
<div class="footer">
   <div class="footer-inner">
      2013 &copy; Conquer 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 CORE PLUGINS -->
<script src="assets/plugins/jquery-1.11.0.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.3.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.3.custom.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<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/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/jquery.peity.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.pulsate.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-knob/js/jquery.knob.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/bootstrap-daterangepicker/moment.min.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>
<!-- IMPORTANT! fullcalendar depends on jquery-ui-1.10.3.custom.min.js for drag & drop support -->
<script src="assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-easypiechart/jquery.easypiechart.min.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>
<script src="assets/scripts/tasks.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.initPeityElements();
   Index.initKnowElements();
   Index.initDashboardDaterange();
   Tasks.initDashboardWidget();
});
</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
}

Conquer uses Open Sans font from google fonts. The font must be loaded in HTML heade before the rest of css files:

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>

Theme Setup

Conquer comes with 5 color themes, default, blue, grey, red, 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:

<link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>

Layout Settings

The best way to learn how to use Conquer's available layout options, please go to one of Conquer pages and use the "Theme Settings" panel located at the top right of the page. Choose you preferred layout options, and use Chrome's Developer Tool and Firefox's Firebug Tool to see the HTML code changes upon you select your layout combination. When you change the laypout option, mostly some css classes will be added into the page's body element. When you change the layout settings only the most parent HTML elements will be modified, the page content part remains as it is.

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

Top Menu Dropdown Options

<!-- BEGIN TOP NAVIGATION MENU -->
<ul class="nav navbar-nav pull-right">
  <!-- BEGIN NOTIFICATION DROPDOWN -->
  <li class="dropdown" id="header_notification_bar">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
      data-close-others="true">
    <i class="icon-warning-sign"></i>
    <span class="badge badge-success">6</span>
    </a>
    <ul class="dropdown-menu extended notification">
      <li>
        <p>You have 14 new notifications</p>
      </li>
      <li>
        <ul class="dropdown-menu-list scroller" style="height: 250px;">
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-success"><i class="icon-plus"></i></span>
            New order. 
            <span class="time">Just now</span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-danger"><i class="icon-bolt"></i></span>
            Server overloaded. 
            <span class="time">15 mins</span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-warning"><i class="icon-bell"></i></span>
            Reboot failed.
            <span class="time">22 mins</span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-info"><i class="icon-bullhorn"></i></span>
            System error.
            <span class="time">40 mins</span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-danger"><i class="icon-bolt"></i></span>
            Network overloaded 90%. 
            <span class="time">2 hrs</span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-danger"><i class="icon-bolt"></i></span>
            Order canceled.
            <span class="time">5 hrs</span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-warning"><i class="icon-bell"></i></span>
            Storage Server #4 not responding.
            <span class="time">45 mins</span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-info"><i class="icon-bullhorn"></i></span>
            System Error.
            <span class="time">55 mins</span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="label label-sm label-icon label-danger"><i class="icon-bolt"></i></span>
            Database overloaded 68%. 
            <span class="time">2 hrs</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="external">   
        <a href="#">See all notifications <i class="icon-angle-right"></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" data-hover="dropdown"
      data-close-others="true">
    <i class="icon-envelope"></i>
    <span class="badge badge-info">5</span>
    </a>
    <ul class="dropdown-menu extended inbox">
      <li>
        <p>You have 12 new messages</p>
      </li>
      <li>
        <ul class="dropdown-menu-list scroller" style="height: 250px;">
          <li>  
            <a href="inbox.html?a=view">
            <span class="photo"><img src="./assets/img/avatar2.jpg" alt=""/></span>
            <span class="subject">
            <span class="from">Elis Chang</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">Patrick Nilson</span>
            <span class="time">11 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">Nick</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>  
            <a href="inbox.html?a=view">
            <span class="photo"><img src="./assets/img/avatar2.jpg" alt=""/></span>
            <span class="subject">
            <span class="from">Rose Wong</span>
            <span class="time">3 hrs</span>
            </span>
            <span class="message">
            Vivamus sed auctor 40% nibh congue 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">Jhon Doe</span>
            <span class="time">5 hrs</span>
            </span>
            <span class="message">
            Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh
            auctor nibh...
            </span>  
            </a>
          </li>
        </ul>
      </li>
      <li class="external">   
        <a href="inbox.html">See all messages <i class="icon-angle-right"></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" data-hover="dropdown" data-close-others="true">
    <i class="icon-ok"></i>
    <span class="badge badge-warning">5</span>
    </a>
    <ul class="dropdown-menu extended tasks">
      <li>
        <p>You have 12 pending tasks</p>
      </li>
      <li>
        <ul class="dropdown-menu-list scroller" style="height: 250px;">
          <li>  
            <a href="#">
            <span class="task">
            <span class="desc">Conquer v1.6 release</span>
            <span class="percent">30%</span>
            </span>
            <span class="progress">
            <span style="width: 10%;" class="progress-bar progress-bar-info" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">10% Complete</span>
            </span>
            </span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="task">
            <span class="desc">Project Demo</span>
            <span class="percent">65%</span>
            </span>
            <span class="progress progress-striped">
            <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">65% Complete</span>
            </span>
            </span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="task">
            <span class="desc">iOS app release</span>
            <span class="percent">98%</span>
            </span>
            <span class="progress">
            <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">98% Complete</span>
            </span>
            </span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="task">
            <span class="desc">Server maintenance</span>
            <span class="percent">10%</span>
            </span>
            <span class="progress progress-striped">
            <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">10% Complete</span>
            </span>
            </span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="task">
            <span class="desc">Project status update</span>
            <span class="percent">58%</span>
            </span>
            <span class="progress progress-striped">
            <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">58% Complete</span>
            </span>
            </span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="task">
            <span class="desc">Android app development</span>
            <span class="percent">85%</span>
            </span>
            <span class="progress progress-striped">
            <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">85% Complete</span>
            </span>
            </span>
            </a>
          </li>
          <li>  
            <a href="#">
            <span class="task">
            <span class="desc">Conquer v1.5 release</span>
            <span class="percent">18%</span>
            </span>
            <span class="progress progress-striped">
            <span style="width: 18%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">18% Complete</span>
            </span>
            </span>
            </a>
          </li>
        </ul>
      </li>
      <li class="external">   
        <a href="#">See all tasks <i class="icon-angle-right"></i></a>
      </li>
    </ul>
  </li>
  <!-- END TODO DROPDOWN -->
  <li class="devider">&nbsp;</li>
  <!-- BEGIN USER LOGIN DROPDOWN -->
  <li class="dropdown user">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
    <img alt="" src="assets/img/avatar3_small.jpg"/>
    <span class="username">Nick</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 <span class="badge badge-danger">3</span></a>
      </li>
      <li><a href="#"><i class="icon-tasks"></i> My Tasks <span class="badge badge-success">7</span></a>
      </li>
      <li class="divider"></li>
      </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 -->
              

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

CSS

To overide the theme CSS styles you can use assets/css/custom.css for your own customization. This will make the future updates easier if you keep your own CSS code seperate.

Javascript

To overide or extend the theme Javascript functions you can use assets/scripts/custom.js. Please keep your own code seperate as much as possible to make the future updates straightforward.

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

Twitter Typeahead

A fast and fully-featured autocomplete library.

CSS Files

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

JavaScript Files

<script src="assets/plugins/typeahead/handlebars.min.js" type="text/javascript"></script>
<script src="assets/plugins/typeahead/typeahead.bundle.min.js" type="text/javascript"></script>

Demo Page

components_form_tools.html

Official Documentation

http://twitter.github.io/typeahead.js/

Simple Line Icons

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

CSS Files

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

Demo Page

ui_icons.html

Official Documentation

http://graphicburger.com/simple-line-icons-webfont/

jQuery jsTree

A tree view plugin for jQuery

CSS Files

<link rel="stylesheet" type="text/css" href="assets/plugins/jstree/dist/themes/default/style.min.css">

JavaScript Files

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

Demo Page

ui_tree.html

Official Documentation

http://www.jstree.com/

Bootstrap Session Timeout

After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

layout_session_timeout.html

Official Documentation

https://github.com/travishorn/jquery-sessionTimeout

jQuery Idle Timeout

This script allows you to detect when a user becomes idle (detection provided by Paul Irish's idletimer plugin) and notify the user his/her session is about to expire. Similar to the technique seen on Mint.com. Polling requests are automatically sent to the server at a configurable interval, maintaining the users session while s/he is using your application for long periods of time.

CSS Files

No CSS available

JavaScript Files

<script src="assets/plugins/jquery-idle-timeout/jquery.idletimeout.js" type="text/javascript" ></script>
<script src="assets/plugins/jquery-idle-timeout/jquery.idletimer.js" type="text/javascript" ></script>

Demo Page

layout_idle_timeout.html

Official Documentation

http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm

Bootstrap TouchSpin

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

http://www.virtuosoft.eu/code/bootstrap-touchspin/

Bootstrap Date Paginator

A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application.

CSS Files

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

JavaScript Files

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

Demo Page

ui_datepaginator.html

Official Documentation

http://www.jonathandanielmiles.com/bootstrap-datepaginator/

Bootstrap Maxlength

This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

http://mimo84.github.com/bootstrap-maxlength/

Bootstrap Markdown

Markdown editing for Bootstrap.

CSS Files

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

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

http://toopay.github.com/bootstrap-markdown/

Twitter Bootstrap Hover Dropdown Plugin

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/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>

Demo Page

index.html

Official Documentation

https://github.com/CWSpear/bootstrap-hover-dropdown

MixItUp - A CSS3 and jQuery Filter & Sort Plugin

MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content!

CSS Files

No CSS available

JavaScript Files

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

Demo Page

page_portfolio.html

Official Documentation

http://mixitup.io

Bootstrap FuelUX Tree

Bootstrap FuelUX Tree View For Conquer.

CSS Files

<link href="assets/plugins/fuelux/css/tree-Conquer.css" rel="stylesheet" type="text/css" media="screen"/>

JavaScript Files

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

Demo Page

ui_tree.html

Official Documentation

http://exacttarget.github.io/fuelux/#tree

Bootstrap FuelUX Input Spinner

Bootstrap FuelUX Input Spinner For Conquer.

CSS Files

No CSS available

JavaScript Files

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

Demo Page

form_component.html

Official Documentation

http://exacttarget.github.io/fuelux/#spinner

jQuery IonRange Slider

Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS.

CSS Files

<link href="assets/plugins/ion.rangeslider/css/ion.rangeSlider.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/ion.rangeslider/css/ion.rangeSlider.Conquer.css" rel="stylesheet" type="text/css"/>

JavaScript Files

<script src="assets/plugins/ion.rangeslider/js/ion-rangeSlider/ion.rangeSlider.min.js" type="text/javascript"></script>

Demo Page

ui_noui_sliders.html

Official Documentation

http://ionden.com/a/plugins/ion.rangeSlider/

Bootstrap Toastr Notifications

Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

CSS Files

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

JavaScript Files

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

Demo Page

ui_toastr.html

Official Documentation

http://codeseven.github.io/toastr/demo.html

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

Bootstrap X-editable

In-place editing with Twitter Bootstrap.

CSS Files

  <!-- BEGIN PLUGINS USED BY X-EDITABLE -->
  <link href="assets/plugins/select2/select2_conquer.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

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

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

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/flot/jquery.flot.js" type="text/javascript"></script>
<script src="assets/plugins/flot/jquery.flot.resize.js" type="text/javascript"></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/

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/js/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

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

Name Description URL
jQuery 1.11.0 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 v3.2.0 Sleek, intuitive, and powerful front-end framework for faster and easier web development http://getbootstrap.com
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/
Twitter Bootstrap Hover Dropdown Plugin A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience. https://github.com/CWSpear/twitter-bootstrap-hover-dropdown
Bootstrap Session Timeout After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL. https://github.com/travishorn/jquery-sessionTimeout
jQuery Idle Timeout This script allows you to detect when a user becomes idle (detection provided by Paul Irish's idletimer plugin) and notify the user his/her session is about to expire. Similar to the technique seen on Mint.com. Polling requests are automatically sent to the server at a configurable interval, maintaining the users session while s/he is using your application for long periods of time. http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm
Bootstrap TouchSpin A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys. http://www.virtuosoft.eu/code/bootstrap-touchspin/
Bootstrap Date Paginator A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application. http://www.jonathandanielmiles.com/bootstrap-datepaginator/
Bootstrap Maxlength This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. http://mimo84.github.com/bootstrap-maxlength/
Bootstrap Markdown Markdown editing for Bootstrap. http://toopay.github.com/bootstrap-markdown/
MixItUp - A CSS3 and jQuery Filter & Sort Plugin MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content! http://mixitup.io
Bootstrap FuelUX Input Spinner Bootstrap FuelUX Input Spinner For Conquer. http://exacttarget.github.io/fuelux/#spinner
jQuery IonRange Slider Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS. http://ionden.com/a/plugins/ion.rangeSlider/
Bootstrap Toastr Notifications Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. http://codeseven.github.io/toastr/demo.html
Twitter Typeahead v0.10.2 A fast and fully-featured autocomplete library. http://twitter.github.io/typeahead.js/
jQuery jsTree A tree view plugin for jQuery. http://www.jstree.com/
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
Bootstrap X-editable In-place editing with Twitter Bootstrap. http://vitalets.github.io/x-editable/demo.html
Bootstrap Extended Modals Responsive, Stackable, AJAX and more. http://jschr.github.com/bootstrap-modal/
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 Sortable jQuery UI Sortable http://jqueryui.com/sortable/
jQuery BlockUI The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser http://jquery.malsup.com/block/
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 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/
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/
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 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 4.1 The iconic font designed for use with Twitter Bootstrap http://fontawesome.io/
Simple Line Icons Simple Line Icons is 162 simple stroke icons that are great for mobile applications, websites, user interfaces, etc. All icons were converted from the same beautiful simple line icon sets released previously on GraphicBurger. http://graphicburger.com/simple-line-icons-webfont/
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

Version 2.0 – 11 August 2014

  • UPDATE: Bootstrap 3.2.0
    • Updated plugin folder: assets/plugins/bootstrap/
    • Modified html files: all html files
  • UPDATE: jQuery 1.11.0
    • Updated plugin file: assets/plugins/jquery-1.11.0.min.js
    • Modified html files: all html files
  • NEW: Twitter Typeahead Plugin Integration
    • Added plugin folder: assets/plugins/typeahead/
    • Updated html file: form_components.html
    • Modified css file: assets/css/plugins.css
    • Modified javascript file: assets/scripts/form-components.js
  • NEW: Simple Line Icons Integration
    • Added plugin folder: assets/plugins/simple-line-icons/
    • Added html file: ui_icons.html
    • Modified css file: assets/css/style.css
  • NEW: Datatable Scroller Extension Integration
    • Modified html file: table_advanced.html
    • Modified javascript file: assets/scripts/table-advanced.js
  • NEW: Datatable ColReorder Extension Integration
    • Modified html file: table_advanced.html
    • Modified javascript file: assets/scripts/table-advanced.js
  • IMPROVEMENT: More Smooth Draggable Portlets
    • Modified html file: theme/portlet_draggable.html
    • Modified css file: assets/css/style-conquer.css
    • Added javascript file: assets/scripts/portlet-draggable.js
  • IMPROVEMENT: jQuery SlimScroll with Smoth Animation & Windows Phone Support
    • Updated plugin folder: assets/jquery-slimscroll/
    • Modified javascript file: assets/scripts/app.js
  • UPDATE: Datatable 1.10.0
    • Updated plugin folder: assets/plugins/datatable/
    • Modified css file: assets/css/plugins.css
    • Modified html files: table_advanced.html, table_ajax.html, table_editable.html, table_managed.html
  • UPDATE: Fontawesome 4.1.0
    • Updated plugin folder: assets/font-awesome/
    • Modified html file: ui_icons.html
  • UPDATE: jQuery Nestable
    • Updated plugin folder: assets/jquery-nestable/
    • Modified html file: ui_nestable.html
  • UPGRADE: jQuery Multiselect v0.9.11
    • Updated plugin folder: assets/plugins/jquery-multi-select/
  • UPGRADE: Bootstrap Daterangepicker v1.3.5
    • Updated plugin folder: assets/plugins/bootstrap-daterangepicker/
  • UPGRADE: Bootstrap Datepicker v1.3.0
    • Updated plugin folder: assets/plugins/bootstrap-daterangepicker/
  • UPGRADE: Bootstrap Hover Dropdown v2.0.3
    • Updated plugin folder: assets/plugins/bootstrap-hover-dropdown/
  • UPGRADE: Bootstrap Maxlength v 1.5.3
    • Updated plugin folder: assets/plugins/bootstrap-maxlength/
  • UPGRADE: Bootstrap Modal v2.2.4
    • Updated plugin folder: assets/plugins/bootstrap-modal/
  • UPGRADE: Bootstrap Select v1.5.4
    • Updated plugin folder: assets/plugins/bootstrap-select/
  • UPGRADE: Bootstrap Switch 3
    • Updated plugin folder: assets/plugins/bootstrap-switch/
  • UPGRADE: Bootstrap TouchSpin v2.8.0
    • Updated plugin folder: assets/plugins/bootstrap-touchspin/
  • UPGRADE: CKEditor Version 4.4.0
    • Updated plugin folder: assets/plugins/ckeditor/
  • UPGRADE: Bootstrap Clockface 1.0.1
    • Updated plugin folder: assets/plugins/clockface/
  • UPGRADE: FullCalendar v1.6.4
    • Updated plugin folder: assets/plugins/fullcalendar/
  • UPGRADE: GMaps.js v0.4.11
    • Updated plugin folder: assets/plugins/gmaps/
  • UPGRADE: Ion.RangeSlider V1.9.1
    • Updated plugin folder: assets/plugins/ion.rangeslider/
  • UPGRADE: Bootstrap Password Strength v1.1.2
    • Updated plugin folder: assets/plugins/bootstrap-pwstrength/
  • UPGRADE: jQquery Easypiechart v2.1.5
    • Updated plugin folder: assets/plugins/jquery-easypiechart/
  • UPGRADE: jQuery File Upload v9.5.7
    • Updated plugin folder: assets/plugins/jquery-file-upload/
  • UPGRADE: jQuery Inputmask v3.0.3
    • Updated plugin folder: assets/plugins/jquery-inputmask/
  • UPGRADE: jQuery Knob v1.2.8
    • Updated plugin folder: assets/plugins/jquery-knob/
  • UPGRADE: jQuery Slimscroll v1.3.2
    • Updated plugin folder: assets/plugins/jquery-slimscroll/
  • UPGRADE: jQuery Validation Plugin v1.12.0
    • Updated plugin folder: assets/plugins/jquery-validation/
  • UPGRADE: jsTree 3.0.0
    • Updated plugin folder: assets/plugins/jstree/
  • UPGRADE: Select2 3.4.6
    • Updated plugin folder: assets/plugins/select2/


Version 1.5.2 – 9 December 2013

  • UPDATE: Bootstrap 3.0.3
    • Updated plugin folder: assets/plugins/bootstrap/
  • NEW: Right Sidebar Layout Option
    • Added html file: layout_sidebar_reversed.html
    • Modified html files(refer page-sidebar-wrapper and page-content-wrapper divs): all HTML files
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style-responsive.css
    • Modified javascript file: assets/scripts/app.js
  • ENHANCEMENT: Prevent Blocking jquery.cookie.min.js by ModSecurity by changing plugin filename to jquery.cokie.min.js
    • Change plugin file name: jquery.cokie.min.js
    • Updates html files: all HTML files
  • UPDATE: jQuery Countdown Plugin v1.6.3
    • Updated plugin folder: assets/plugins/countdown
  • NEW: Bootstrap Style Full Number Pagination For Datetable Plugin
    • Modified html file: table_ajax.html
    • Modified javascript file: assets/scripts/table-ajax.js
    • Updated plugin folder: assets/css/data-tables/
  • FIX: Responsive Project List Issue on User Profile Page
    • Modified html file: extra_profile.html
    • Modified css file: assets/css/pages/profile.css
  • FIX: Managed Datatable Group Check/Uncheck Issue.
    • Modified javascript file: assets/scripts/table-managed.js
  • FIX: Content Height Issue On Sidebar Expand in Sidebar Closed Page.
    • Modified javascript file: assets/scripts/app.js
  • FIX: Clockface Timepicker z-index issue in Modals.
    • Modified css file: assets/css/plugins.css
  • FIX: Bootstrap Wysihtml5 Insert URL Issue.
    • Updated plugin folder: assets/plugins/bootstrap-wysihtml5/


Version 1.5.1 – 2 December 2013

  • UPDATE: Bootstrap 3.0.2
    • Updated plugin folder: assets/plugins/bootstrap/
  • NEW: User Session Timeout Plugin Integration
    • Added html file: layout_session_timeout.html
    • Added demo PHP script: demo/timeout-keep-alive.php
    • Added plugin folder: assets/plugins/bootstrap-sessiontimeout/
  • NEW: User Idle Timeout Plugin Integration
    • Added html file: layout_idle_timeout.html
    • Added demo PHP script: demo/idletimeout_keepalive.php
    • Added plugin folder: assets/plugins/jquery-idle-timeout/
    • Added javascript file: assets/scripts/idle-timeout.js
  • NEW: Ajax Datatable Integration
    • Added html file: table_ajax.html
    • Added demo PHP script: demo/table_ajax.php
    • Updated plugin folder: assets/plugins/data-tables/
    • Added javascript file: assets/scripts/table-ajax.js
  • NEW: Bootstrap TouchSpin Plugin Integration
    • Modified html file: form_component.html
    • Modified javascript file: assets/scripts/form_components.js
    • Added plugin folder: assets/plugins/bootstrap-touchspin/
  • NEW: Bootstrap Date Paginator Plugin Integration
    • Added html file: ui_datepaginator.html
    • Modified javascript file: assets/scripts/ui_bootbox.js
    • Added plugin folder: assets/plugins/bootstrap-datepaginator/
  • NEW: Button Dropdown Menu With Multilevel Submenu
    • Modified html file: ui_buttons.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style-conquer.css
  • NEW: Button Dropdown Menu with Search box
    • Modified html file: ui_bottons.html
    • Modified style file: assets/css/style-conquer.css
  • ENHANCEMENT: Input Group, Icon Input, Markdown Input Validation Samples
    • Modified html file: form_validation.html
    • Modified javascript file: assets/scripts/form-validation.js
    • Modified css file: assets/css/plugins.css
  • ENHANCEMENT: Form Input Validation Samples
    • Modified html file: form_validation.html
    • Modified javascript file: assets/scripts/form-validation.js
    • Modified css file: assets/css/plugins.css
  • ENHANCEMENT: Bootstrap Switch Samples with Long Text.
    • Modified html file: form_component.html
  • UPDATE: Font Awesome 4.0.1
    • Modified html files: all html files
    • Modified css file: style.css
    • Modified css file: style-conquer.css
    • Modified css file: plugins.css
    • Modified javascript file: assets/scripts/ui_bootbox.js
    • Modified plugin folder: assets/plugins/bootstrap-datepaginator/
    • Modified plugin folder: assets/plugins/bootstrap-datepicker/
    • Modified plugin folder: assets/plugins/bootstrap-daterangepicker/
    • Modified plugin folder: assets/plugins/bootstrap-datetimepicker/
    • Modified plugin folder: assets/plugins/bootstrap-editable/
    • Modified plugin folder: assets/plugins/bootstrap-timepicker/
    • Modified plugin folder: assets/plugins/bootstrap-wysihtml5/
    • Modified plugin folder: assets/plugins/bootstrap-fuelux/
    • Updated plugin folder: assets/plugins/font-awesome/
  • ENHANCEMENT: Datepicker with Disabled Past Dates
    • Modified html file: form_component.html
  • FIXED: Bootstrap Modal Issue(when modal opened the page content shifts to the right)
    • Modified style files: assets/css/style.css, assets/css/style-conquer.css, assets/css/plugins.css
    • Modified html file: ui_modals.html
    • Modified html file: ui_extended_modals.html
  • FIXED: Bootstrap Tab Activation Through URL Issue(parent tabs are not activated)
    • Modified javascript file folder: assets/scripts/app.js
  • FIXED: Bootstrap WYSIWYG5 Modal Dialogs Issue(duplicated modal containers when bootstrap modal plugin used)
    • Updated plugin folder: assets/plugins/bootstrap-wysihtml5/
  • FIXED: Main Content Height Issue with Fixed Layout on Large Screens
    • Modified javascript file: assets/scripts/app.js
  • FIXED: Image Crop Samples Issue on 1024 screen resolution
    • Modified html file: form_image_crop.html
    • Modified css file: assets/css/pages/image-crop.css
    • Modified javascript file: assets/scripts/form-image-crop.js


Version 1.5 – 30 October 2013

  • NEW: Bootstrap 3.0 Support
    • Modified html files: all html files
    • Modified css files: all css files
    • Modified js files: all js files
    • Added js files(to support BS2 autocomplete feature since it was dropped in BS3): assets/plugins/bootstrap/js/bootstrap2-typeahead.min.js
  • 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: Portfolio Page using jQuery Mixitup Plugin
    • Added html file: page_portfolio.html
    • Added css file: assets/css/pages/portfolio.css
    • Added js files: assets/scripts/portfolio.js
  • NEW: Bootstrap Toastr Notifications
    • Added html file: ui_toastr.html
    • Added plugin folder: assets/plugins/bootstrap-toastr/
  • NEW: Bootstrap FuelUX Tree View
    • Added html file: ui_tree.html
    • Added js file: ui_tree.js
    • Added plugin folder: assets/plugins/fuelux/
  • NEW: Bootstrap FuelUX Form Input Spinners
    • Added html file: form_component.html
    • Modified js file: form_component.js
    • Added plugin folder: assets/plugins/fuelux/
  • NEW: IonRange Sliders
    • Added html file: ui_ion_sliders.html
    • Added plugin folder: assets/plugins/ion.rangeslider/
  • NEW: NoUI Range Sliders
    • Added html file: ui_noui_sliders.html
    • Added plugin folder: assets/plugins/nouislider/
  • NEW: Bootstrap Maxlength Plugin Integration
    • Modified html file: form_component.html
    • Modified javascript file: assets/scripts/form_components.js
    • Added plugin folder: assets/plugins/bootstrap-maxlength/
  • NEW: Bootstrap Markdown Editor Plugin Integration
    • Modified html file: form_component.html
    • Modified css file: assets/css/plugins.css
    • Added plugin folder: assets/plugins/bootstrap-markdown/
  • NEW: Extended Bootstrap Modals Plugin
    • Added html file: ui_extended_modals.html
    • Added plugin folder: assets/plugins/bootstrap-modal/
  • NEW: Disabled Menu Links for Sidebar Menu & Topbar Menu
    • Added html file: layout_disabled_menu.html
    • Modified css file: assets/css/style.css
  • NEW: Google reCaptcha Integration
    • Modified html file: form_component.html
    • Modified css file: assets/css/plugins.css
  • NEW: FlipScroll Responsive Datatable
    • Modified html file: table_responsive.html
    • Modified css file: assets/css/style.css
  • NEW: Scrollable Responsive Datatable
    • Modified html file: table_responsive.html
    • Modified javascript file: assets/scripts/app.js
    • Modified css file: assets/css/style.css
  • NEW: Inline Social Icons
    • Modified html file: ui_buttons.html
    • Modified css file: assets/css/style.css
  • 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: Horizontal Scrollable Datatables Adaptable To Any Device Width.
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/plugins.css
    • Updated plugin folder: assets/plugins/date-tables/
  • UPGRADE: Latest jQuery 1.10.2
    • Updated file: assets/plugins/jquery-1.10.2.min.js
  • UPGRADE: Latest Bootstrap Colorpicker
    • Updated folder: assets/plugins/bootstrap-colorpicker
  • UPGRADE: Latest Bootstrap Datepicker
    • Updated folder: assets/plugins/bootstrap-datepicker
  • UPGRADE: Latest Bootstrap Datepicker
    • Updated folder: assets/plugins/bootstrap-datepicker
  • UPGRADE: Latest Bootstrap Daterangepicker v1.2
    • Updated folder: assets/plugins/bootstrap-daterangepicker
  • UPGRADE: Latest Bootstrap Datetimepicker
    • Updated folder: assets/plugins/bootstrap-datetimepicker
  • UPGRADE: Latest Bootstrap X-Editable v1.4.6(Bootstrap 3.0 support implemented by KeenThemes)
    • Updated folder: assets/plugins/bootstrap-editable
  • UPGRADE: Latest Bootstrap Switch v1.8
    • Updated folder: assets/plugins/bootstrap-switch
  • UPGRADE: Latest Bootstrap Timepicker
    • Updated folder: assets/plugins/bootstrap-timepicker
  • UPGRADE: Latest Bootstrap Wizard
    • Updated folder: assets/plugins/bootstrap-wizard
  • UPGRADE: Latest Clockface Timepicker v1.0.0
    • Updated folder: assets/plugins/clockface
  • UPGRADE: Latest Dropzone Plugin
    • Updated folder: assets/plugins/dropzone
  • UPGRADE: Latest Font Awesome 3.2.1
    • Updated folder: assets/plugins/font-awesome
  • UPGRADE: Latest jQuery File Upload v5.32.3
    • Updated folder: assets/plugins/jquery-file-upload
  • UPGRADE: Latest jQuery MultiSelect v0.9.8
    • Updated folder: assets/plugins/jquery-multi-select
  • UPGRADE: Latest jQuery Slimscroll v1.3.1
    • Updated folder: assets/plugins/jquery-slimscroll
  • UPGRADE: Latest Select2 v3.4.3
    • Updated folder: assets/plugins/select2
  • ENHANCEMENT: Global Code Enhancement with Bootstrap 3.0 Support
    • Modified html files: all html files
    • Modified css file: all css files
    • Modified javascript file: all js files
  • DROPPED: jQueryUI Datepicker
    • Use Bootstrap Datepicker as a replacement
  • DROPPED: jQueryUI Dialogs
    • Use Bootstrap Modal or Bootstrap Toastr Notifications as a replacement
  • DROPPED: jQuery Chosen
    • Use Select2 as a replacement

Version 1.4 – 19 April 2013

  • NEW: Added icon view for collapsed sidebar
  • NEW: Added jQuery UI Sliders
  • NEW: Added Tree View
  • NEW: Added jQuery Nestable Lists
  • NEW: Added Advance Form Samples
  • NEW: Added jQuery Select2
  • NEW: Added IP Address Input Control
  • NEW: Added Form Input Masks
  • NEW: Added jQuery UI Sliders
  • NEW: Added Form Validation
  • NEW: Added jQuery Miltiple File Upload
  • NEW: Added jQuery Dropzone File Upload
  • NEW: Added Editable Data Table
  • NEW: Added buttons, dropdowns and pagionation in portlet header
  • NEW: Added user profile page
  • NEW: Added invoice page
  • NEW: Added pricing table page
  • NEW: Added 404 & 500 error pages
  • NEW: Added full with page sample
  • NEW: Added remember me checkbox in login form
  • IMPROVEMENT: Assets re-organized with new folder structure
  • IMPROVEMENT: Core and demo javascript code put in separate javascript files
  • IMPROVEMENT: Core and page css put in separate style files
  • FIXED: Some minor bug fixing

Version 1.3 – 20 Februry 2013

  • Updated documentation in HTML format
  • Minor bug fixing
  • Some code enhancements
  • jQuery version updated to 1.8.3
  • Added show/hide sidebar menu functionality
  • Added WYSIWYG editor(CKEditor)
  • Added tags input(jQuery Tags Input Plugin)
  • Added chat portlet(index.html)
  • Added form layouts page(form_layouts.html)
  • Added form components page(form_components.html)
  • Added form wizard page(form_wizard.html)
  • Added form validation page(form_validation.html)
  • Added basic tables page(table_basic.html)
  • Added advance tables page(table_advance.html)
  • Added blank page(sample_blank.html)
  • Added blank page with closed sidebar(sample_sidebar_closed.html)
  • Added FAQ page(sample_faq.html)
  • Added pricing table page(sample_pricing_tables.html)

Version 1.2 – 12 January 2013

  • Fixed some minor bugs
  • Added jQuery Knob based Statistic Block Widgets in dashboard page (index.html)
  • Added Bootstrap File Upload Plugin (forms.html)
  • Added Google Map sample page (maps_google.html)
  • Added UI Tabs and Accordions sample page (ui_elements_tabs_accordions.html)

Version 1.1 – 09 January 2013

  • Fixed drag & drop bug after window scroll(calendar.html)

Version 1.0 – 08 January 2013

  • Initial release
Conquer v2.0 has major changes ans improvements so you will need to update the theme from scratch by replacing the the assets folder and updating the html code.

Please check out http://getbootstrap.com/getting-started/#migration to learn more about Bootstrap 2.x to 3.0 migration.

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

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