Color Admin

“Color Admin Responsive Admin Template” Documentation by “Sean Ngu” v3.0

Created: 18/April/2014
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

A) HTML Structure - top

This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.

<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
  <!-- begin #header -->
  <div id="header" class="header navbar navbar-default navbar-fixed-top">
    <!-- Header Here -->
  </div>
  <!-- end #header -->
  
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">
    <!-- Sidebar Here -->
  </div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->
  
  <!-- begin #content -->
  <div id="content" class="content">
    <!-- Content Here -->
  </div>
  <!-- end #content -->
  
  <!-- begin #footer -->
  <div id="footer" class="footer">
    <!-- Footer Here -->
  </div>
  <!-- end #footer -->
  
  <!-- begin scroll to top btn -->
  <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
    <i class="fa fa-angle-up"></i>
  </a>
  <!-- end scroll to top btn -->
</div>
<!-- end page container -->

B) Beginning of Page - top

Below code is used to detect the internet explorer for browser compatibility & styling setting usage.

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

C) Page Head - top

Page head contains metadata, javascript and css files:

<head>
  <meta charset="utf-8" />
  <title>Color Admin | Dashboard</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  
  <!-- ================== BEGIN BASE CSS STYLE ================== -->
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
  <link href="assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
  <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
  <link href="assets/css/animate.min.css" rel="stylesheet" />
  <link href="assets/css/style.min.css" rel="stylesheet" />
  <link href="assets/css/style-responsive.min.css" rel="stylesheet" />
  <link href="assets/css/theme/default.css" rel="stylesheet" id="theme" />
  <!-- ================== END BASE CSS STYLE ================== -->
  
  <!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
  <link href="assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" />
  <link href="assets/plugins/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
  <link href="assets/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
    <link href="assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" />  
  <!-- ================== END PAGE LEVEL STYLE ================== -->
</head>

D) Top Menu - top

<!-- begin #header -->
<div id="header" class="header navbar navbar-default navbar-fixed-top">
  <!-- begin container-fluid -->
  <div class="container-fluid">
    <!-- begin mobile sidebar expand / collapse button -->
    <div class="navbar-header">
      <a href="javascript:;" class="navbar-brand"><span class="navbar-logo"></span> Color Admin</a>
      <button type="button" class="navbar-toggle" data-click="sidebar-toggled">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- end mobile sidebar expand / collapse button -->
    
    <!-- begin header navigation right -->
    <ul class="nav navbar-nav navbar-right">
      <li>
        <form class="navbar-form full-width hidden-xs">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Enter keyword" />
            <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
          </div>
        </form>
      </li>
      <li class="dropdown">
        <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle f-s-14">
          <i class="fa fa-bell-o"></i>
          <span class="label">5</span>
        </a>
        <ul class="dropdown-menu media-list pull-right animated fadeInDown">
          <li class="dropdown-header">Notifications (5)</li>
          <li class="media">
            <a href="javascript:;">
              <div class="pull-left media-object bg-red"><i class="fa fa-bug"></i></div>
              <div class="media-body">
                <h6 class="media-heading">Server Error Reports</h6>
                <div class="text-muted">3 minutes ago</div>
              </div>
            </a>
          </li>
          <li class="media">
            <a href="javascript:;">
              <div class="pull-left"><img src="assets/img/user-1.jpg" class="media-object" alt="" /></div>
              <div class="media-body">
                <h6 class="media-heading">John Smith</h6>
                <p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
                <div class="text-muted">25 minutes ago</div>
              </div>
            </a>
          </li>
          <li class="media">
            <a href="javascript:;">
              <div class="pull-left"><img src="assets/img/user-2.jpg" class="media-object" alt="" /></div>
              <div class="media-body">
                <h6 class="media-heading">Olivia</h6>
                <p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
                <div class="text-muted">35 minutes ago</div>
              </div>
            </a>
          </li>
          <li class="media">
            <a href="javascript:;">
              <div class="pull-left media-object bg-green"><i class="fa fa-plus"></i></div>
              <div class="media-body">
                <h6 class="media-heading"> New User Registered</h6>
                <div class="text-muted">1 hour ago</div>
              </div>
            </a>
          </li>
          <li class="media">
            <a href="javascript:;">
              <div class="pull-left media-object bg-blue"><i class="fa fa-envelope"></i></div>
              <div class="media-body">
                <h6 class="media-heading"> New Email From John</h6>
                <div class="text-muted">2 hour ago</div>
              </div>
            </a>
          </li>
          <li class="dropdown-footer text-center">
            <a href="javascript:;">View more</a>
          </li>
        </ul>
      </li>
      <li class="dropdown navbar-user">
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
          <img src="assets/img/user-11.jpg" alt="" /> 
          <span class="hidden-xs">Adam Schwartz</span> <b class="caret"></b>
        </a>
        <ul class="dropdown-menu animated fadeInLeft">
          <li class="arrow"></li>
          <li><a href="javascript:;">Edit Profile</a></li>
          <li><a href="javascript:;"><span class="badge badge-danger pull-right">2</span> Inbox</a></li>
          <li><a href="javascript:;">Calendar</a></li>
          <li><a href="javascript:;">Setting</a></li>
          <li class="divider"></li>
          <li><a href="javascript:;">Log Out</a></li>
        </ul>
      </li>
    </ul>
    <!-- end header navigation right -->
  </div>
  <!-- end container-fluid -->
</div>
<!-- end #header -->

E) Sidebar - top

<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
  <!-- begin sidebar scrollbar -->
  <div data-scrollbar="true" data-height="100%">
    <!-- begin sidebar user -->
    <ul class="nav">
      <li class="nav-profile">
        <div class="image">
          <a href="javascript:;"><img src="assets/img/user-11.jpg" alt="" /></a>
        </div>
        <div class="info">
          Sean Ngu
          <small>Front end developer</small>
        </div>
      </li>
    </ul>
    <!-- end sidebar user -->
    <!-- begin sidebar nav -->
    <ul class="nav">
      <li class="nav-header">Navigation</li>
      <li>
        <a href="index.html"><i class="fa fa-laptop"></i> <span>Dashboard</span></a>
      </li>
      <li>
        <a href="inbox.html">
          <span class="badge pull-right">10</span>
          <i class="fa fa-inbox"></i> <span>Inbox</span>
        </a>
      </li>
      <li class="has-sub">
        <a href="javascript:;">
          <i class="fa fa-suitcase"></i> 
          <b class="caret pull-right"></b>
          <span>UI Elements</span> 
        </a>
        <ul class="sub-menu">
          <li><a href="ui_general.html">General</a></li>
          <li><a href="ui_typography.html">Typography</a></li>
          <li><a href="ui_tabs_accordions.html">Tabs & Accordions</a></li>
          <li><a href="ui_modal_notification.html">Modal & Notification</a></li>
          <li><a href="ui_widget_boxes.html">Widget Boxes</a></li>
          <li><a href="ui_media_object.html">Media Object</a></li>
          <li><a href="ui_buttons.html">Buttons</a></li>
          <li><a href="ui_icons.html">Icons</a></li>
        </ul>
      </li>
      <li class="has-sub">
        <a href="javascript:;">
          <i class="fa fa-file-o"></i> 
          <b class="caret pull-right"></b>
          <span>Form Stuff</span> 
        </a>
        <ul class="sub-menu">
          <li><a href="form_elements.html">Form Elements</a></li>
          <li><a href="form_plugins.html">Form Plugins</a></li>
          <li><a href="form_validation.html">Form Validation</a></li>
          <li><a href="form_wizards.html">Wizards</a></li>
          <li><a href="form_wysiwyg.html">WYSIWYG</a></li>
        </ul>
      </li>
      <li class="has-sub">
        <a href="javascript:;">
          <b class="caret pull-right"></b>
          <i class="fa fa-th"></i> 
          <span>Tables</span> 
        </a>
        <ul class="sub-menu">
          <li><a href="table_basic.html">Basic Tables</a></li>
          <li><a href="table_manage.html">Managed Tables</a></li>
        </ul>
      </li>
      <li><a href="charts.html"><i class="fa fa-signal"></i> <span>Charts</span></a></li>
      <li><a href="calendar.html"><i class="fa fa-calendar"></i> <span>Calendar</span></a></li>
      <li class="has-sub">
        <a href="javascript:;">
          <i class="fa fa-map-marker"></i>
          <b class="caret pull-right"></b>
          <span>Map</span>
        </a>
        <ul class="sub-menu">
          <li><a href="map_vector.html">Vector Map</a></li>
          <li><a href="map_google.html">Google Map</a></li>
        </ul>
      </li>
      <li><a href="gallery.html"><i class="fa fa-camera"></i> <span>Gallery</span></a></li>
      <li class="has-sub active">
        <a href="javascript:;">
          <i class="fa fa-cogs"></i>
          <b class="caret pull-right"></b>
          <span>Page Options</span>
        </a>
        <ul class="sub-menu">
          <li class="active"><a href="page_blank.html">Blank Page</a></li>
          <li><a href="page_with_footer.html">Page with Footer</a></li>
          <li><a href="page_without_sidebar.html">Page without Sidebar</a></li>
          <li><a href="page_with_right_sidebar.html">Page with Right Sidebar</a></li>
          <li><a href="page_with_minified_sidebar.html">Page with Minified Sidebar</a></li>
        </ul>
      </li>
      <li class="has-sub">
        <a href="javascript:;">
          <i class="fa fa-gift"></i>
          <b class="caret pull-right"></b>
          <span>Extra</span>
        </a>
        <ul class="sub-menu">
          <li><a href="extra_search_results.html">Search Results</a></li>
          <li><a href="extra_invoice.html">Invoice</a></li>
          <li><a href="extra_404_error.html">404 Error Page</a></li>
          <li><a href="extra_login.html">Login</a></li>
        </ul>
      </li>
      <li class="has-sub">
        <a href="javascript:;">
          <i class="fa fa-align-left"></i> 
          <b class="caret pull-right"></b>
          <span>Menu Level</span>
        </a>
        <ul class="sub-menu">
          <li class="has-sub">
            <a href="javascript:;">
              <b class="caret pull-right"></b>
              Menu 1.1
            </a>
            <ul class="sub-menu">
              <li class="has-sub">
                <a href="javascript:;">
                  <b class="caret pull-right"></b>
                  Menu 2.1
                </a>
                <ul class="sub-menu">
                  <li><a href="javascript:;">Menu 3.1</a></li>
                  <li><a href="javascript:;">Menu 3.2</a></li>
                </ul>
              </li>
              <li><a href="javascript:;">Menu 2.2</a></li>
              <li><a href="javascript:;">Menu 2.3</a></li>
            </ul>
          </li>
          <li><a href="javascript:;">Menu 1.2</a></li>
          <li><a href="javascript:;">Menu 1.3</a></li>
        </ul>
      </li>
      <!-- begin sidebar minify button -->
      <li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li>
      <!-- end sidebar minify button -->
    </ul>
    <!-- end sidebar nav -->
  </div>
  <!-- end sidebar scrollbar -->
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->

F) Page Content - top

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

<!-- begin #content -->
<div id="content" class="content">
  <!-- begin breadcrumb -->
  <ol class="breadcrumb pull-right">
    <li><a href="javascript:;">Home</a></li>
    <li><a href="javascript:;">Page Options</a></li>
    <li class="active">Blank Page</li>
  </ol>
  <!-- end breadcrumb -->
  <!-- begin page-header -->
  <h1 class="page-header">Blank Page <small>header small text goes here...</small></h1>
  <!-- end page-header -->
  
  <!-- Page Content Here -->  
</div>
<!-- end #content -->

G) Panel Box - top

Widget Box used for separate the content clearly by section. 

<!-- begin panel -->
<div class="panel panel-inverse">
  <div class="panel-heading">
    <div class="panel-heading-btn">
      <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
      <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
      <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
      <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
    </div>
    <h4 class="panel-title">Panel Title here</h4>
  </div>
  <div class="panel-body">
    Panel Content Here
  </div>
</div>
<!-- end panel -->

H) Panel Theme - top

Panel Theme used to customize the overall layout options. 

<!-- begin theme-panel -->
<div class="theme-panel">
  <a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn">
    <i class="fa fa-cog"></i>
  </a>
  <div class="theme-panel-content">
    <h5 class="m-t-0">Color Theme</h5>
    <ul class="theme-list clearfix">
      <li class="active"><a href="javascript:;" class="bg-green" data-theme="default" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Default"> </a></li>
      <li><a href="javascript:;" class="bg-red" data-theme="red" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Red"> </a></li>
      <li><a href="javascript:;" class="bg-blue" data-theme="blue" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Blue"> </a></li>
      <li><a href="javascript:;" class="bg-purple" data-theme="purple" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Purple"> </a></li>
      <li><a href="javascript:;" class="bg-orange" data-theme="orange" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Orange"> </a></li>
      <li><a href="javascript:;" class="bg-black" data-theme="black" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Black"> </a></li>
    </ul>
    <div class="divider"></div>
    <div class="row m-t-10">
      <div class="col-md-5 control-label double-line">Header Styling</div>
      <div class="col-md-7">
        <select name="header-styling" class="form-control input-sm">
          <option value="1">default</option>
          <option value="2">inverse</option>
        </select>
      </div>
    </div>
    <div class="row m-t-10">
      <div class="col-md-5 control-label">Header</div>
      <div class="col-md-7">
        <select name="header-fixed" class="form-control input-sm">
          <option value="1">fixed</option>
          <option value="2">default</option>
        </select>
      </div>
    </div>
    <div class="row m-t-10">
      <div class="col-md-5 control-label double-line">Sidebar Styling</div>
      <div class="col-md-7">
        <select name="sidebar-styling" class="form-control input-sm">
          <option value="1">default</option>
          <option value="2">grid</option>
        </select>
      </div>
    </div>
    <div class="row m-t-10">
      <div class="col-md-5 control-label">Sidebar</div>
      <div class="col-md-7">
        <select name="sidebar-fixed" class="form-control input-sm">
          <option value="1">fixed</option>
          <option value="2">default</option>
        </select>
      </div>
    </div>
  </div>
</div>
<!-- end theme-panel -->

I) End of Page (Javascript) - top

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

  <!-- ================== BEGIN BASE JS ================== -->
  <script src="assets/plugins/jquery/jquery-1.9.1.min.js"></script>
  <script src="assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
  <script src="assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
  <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <!--[if lt IE 9]>
    <script src="assets/crossbrowserjs/html5shiv.js"></script>
    <script src="assets/crossbrowserjs/respond.min.js"></script>
    <script src="assets/crossbrowserjs/excanvas.min.js"></script>
  <![endif]-->
  <script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  <script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
  <!-- ================== END BASE JS ================== -->
  
  <!-- ================== BEGIN PAGE LEVEL JS ================== -->
  <script src="assets/plugins/gritter/js/jquery.gritter.js"></script>
  <script src="assets/plugins/flot/jquery.flot.min.js"></script>
  <script src="assets/plugins/flot/jquery.flot.time.min.js"></script>
  <script src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
  <script src="assets/plugins/flot/jquery.flot.pie.min.js"></script>
  <script src="assets/plugins/sparkline/jquery.sparkline.js"></script>
  <script src="assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="assets/plugins/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script>
  <script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
  <script src="assets/js/dashboard.min.js"></script>
  <script src="assets/js/apps.min.js"></script>
  <!-- ================== END PAGE LEVEL JS ================== -->
  <script>
    $(document).ready(function() {
      App.init();
      Dashboard.init();
    });
  </script>
</body>
</html>

J) Page Theme Options - top

Select the css theme from the assets/css/theme/ folder.

Available Theme Options

<!-- DEFAULT - GREEN -->
<link href="assets/css/theme/default.css" rel="stylesheet" />
<!-- BLUE -->
<link href="assets/css/theme/blue.css" rel="stylesheet" />
<!-- PURPLE -->
<link href="assets/css/theme/purple.css" rel="stylesheet" />
<!-- RED -->
<link href="assets/css/theme/red.css" rel="stylesheet" />
<!-- ORANGE -->
<link href="assets/css/theme/orange.css" rel="stylesheet" />
<!-- BLACK -->
<link href="assets/css/theme/black.css" rel="stylesheet" />

K) Page Options - top

Here is the general structure for the each case of page options.

Page Content Theme (Flat Black) NEW

<body class="flat-black">

Page Without Sidebar

<!-- begin #page-container -->
<div id="page-container" class="fade page-without-sidebar">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">

Page With Two Sidebar

<!-- begin #page-container -->
<div id="page-container" class="fade page-with-two-sidebar">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar"></div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->
  <!-- begin #sidebar-right -->
  <div id="sidebar-right" class="sidebar sidebar-right"></div>
  <div class="sidebar-bg sidebar-right"></div>
  <!-- end #sidebar-right -->

Page With Footer

<!-- begin #page-container -->
<div id="page-container" class="fade">
  <!-- begin #footer -->
  <div id="footer" class="footer">
    <!-- Footer Here -->
  </div>
  <!-- end #footer -->

Top Navigation Default

<!-- begin #page-container -->
<div id="page-container" class="fade">
  <!-- begin #header -->
  <div id="header" class="header navbar navbar-default">

Top Navigation Fixed

<!-- begin #page-container -->
<div id="page-container" class="fade page-header-fixed">
  <!-- begin #header -->
  <div id="header" class="header navbar navbar-default navbar-fixed-top">

Top Navigation Inverse Styling

<!-- begin #page-container -->
<div id="page-container" class="fade">
  <!-- begin #header -->
  <div id="header" class="header navbar navbar-inverse">

Sidebar Default

<!-- begin #page-container -->
<div id="page-container" class="fade">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">
    <!-- Sidebar Here -->
  </div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->

Sidebar Fixed

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">

Sidebar Minified

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-minified">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">
    <!-- Sidebar Here -->
  </div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->

Sidebar Position Right

<!-- begin #page-container -->
<div id="page-container" class="fade page-with-right-sidebar">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">

Sidebar Grid Styling

<!-- begin #sidebar -->
<div id="sidebar" class="sidebar sidebar-grid">

Sidebar Gradient Styling NEW

<!-- begin #page-container -->
<div id="page-container" class="gradient-enabled">

Full Height Page / Table Column Page NEW

<!-- begin #content -->
<div id="content" class="content content-full-width">
  <div class="vertical-box">
    <div class="vertical-box-column width-250">
      <div class="vertical-box">
        <div class="wrapper bg-blue-darker text-white">
          Header
        </div>
        <div class="vertical-box-row bg-blue text-white">
          <div class="vertical-box-cell">
            <div class="vertical-box-inner-cell">
              <div data-scrollbar="true" data-height="100%" class="wrapper">
                <!-- auto adjust vertical box with scrollbar here -->
              </div>
            </div>
          </div>
        </div>
        <div class="wrapper bg-silver bg-blue-darker text-white">
          Footer
        </div>
      </div>
    </div>
  </div>
  <div class="vertical-box">
    <!-- next vertical box column with same / different option like the previous sample code -->
  </div>
</div>
<!-- end #content -->

Page Loading HTML NEW

Loading 
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade">
</div>
<!-- end #page-container -->
After Loading 
<!-- begin #page-loader -->
<div id="page-loader" class="fade"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade in">
</div>
<!-- end #page-container -->

L) Using LESS - top

Here is the general LESS structure for the Color Admin.

Required Files

  <link href="assets/less/style.less" rel="stylesheet/less" type="text/css" />
  <script src="assets/plugins/less/less.min.js" type="text/javascript"></script>

style.less

_component_list.less, _widget_list.less, _plugin_list.less, _page_list.less used to include all the required less files.

@import '_variable';
@import '_mixins';
@import '_page_setting';
@import '_header';
@import '_sidebar';
@import '_content';
@import '_footer';
@import '_helper';
@import '_component_list';
@import '_widget_list';
@import '_plugin_list';
@import '_page_list';
@import 'theme/_default';
@import '_responsive';
@import '_content_flat_black';
@import '_pace_loader';

/* Reset and overrides */

body {
    background: @bg_body;
    font-size: @body_font_size;
    font-family: @body_font_family;
    color: @body_text_color;
}
.ie8 body {
    font-family: @ie8_body_font_family;
}
h1, h2, h3, h4, h5, h6{
    font-weight: 500;
    color: @heading_text_color;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-size: 60%;
    font-weight: 300;
    color: @heading_small_text_color;
}
a {
    .transition(color 100ms ease-in-out);
}
a:focus {
    outline: none;
}
label {
    color: #242a30;
}
.material-icons {
    text-rendering: optimizeLegibility;
}

_component_list.less

/* Component List */

@import 'components/_form_elements';
@import 'components/_dropdown_menu';
@import 'components/_tooltip';
@import 'components/_alert_note';
@import 'components/_badge_label';
@import 'components/_pagination';
@import 'components/_progress_bar';
@import 'components/_nav_tab';
@import 'components/_button';
@import 'components/_panel';
@import 'components/_modal';
@import 'components/_media_object';
@import 'components/_table';
@import 'components/_well';
@import 'components/_jumbotron';
@import 'components/_carousel';
@import 'components/_list_group_item';
@import 'components/_list_group';

_widget_list.less

/* Widget List */

@import 'widget/_media_message';
@import 'widget/_widget_stats';
@import 'widget/_todolist';
@import 'widget/_theme_panel';
@import 'widget/_chat_list';
@import 'widget/_registered_user_list.less';
@import 'widget/_widget_chart.less';

_plugin_list.less

/* Plugin List */

@import 'plugins/_jquery_draggable';
@import 'plugins/_slimscrollbar';
@import 'plugins/_gritter_notification';
@import 'plugins/_data_table';
@import 'plugins/_datepicker';
@import 'plugins/_colorpicker';
@import 'plugins/_timepicker';
@import 'plugins/_jquery_autocomplete';
@import 'plugins/_combobox';
@import 'plugins/_bootstrap_select';
@import 'plugins/_tag_it';
@import 'plugins/_parsley';
@import 'plugins/_ckeditor_wysihtml5';
@import 'plugins/_bootstrap_wizard';
@import 'plugins/_fullcalendar';
@import 'plugins/_jvectormap';
@import 'plugins/_flot_chart';
@import 'plugins/_sparkline';
@import 'plugins/_bootstrap_calendar';
@import 'plugins/_superbox';
@import 'plugins/_select2';
@import 'plugins/_datetimepicker';
@import 'plugins/_powerange_slider';
@import 'plugins/_typeahead';
@import 'plugins/_jstree';
@import 'plugins/_bootstrap_datetimepicker';
@import 'plugins/_nvd3';
@import 'plugins/_introjs';
@import 'plugins/_summernote';
@import 'plugins/_bootstrap_colorpalatte';
@import 'plugins/_jquery_simplecolorpicker';
@import 'plugins/_dropzone';

_page_list.less

/* Page List */

@import 'pages/_page_search_results';
@import 'pages/_page_vector_map';
@import 'pages/_page_invoice';
@import 'pages/_page_login';
@import 'pages/_page_login_v2';
@import 'pages/_page_gallery';
@import 'pages/_page_email';
@import 'pages/_page_email_v2';
@import 'pages/_page_email_detail';
@import 'pages/_page_error';
@import 'pages/_page_timeline';
@import 'pages/_page_coming_soon';
@import 'pages/_page_login_register_v3';
@import 'pages/_page_profile';

M) Bootstrap 4 (Alpha 6) - top

Base CSS File Structure

You might need to include the required css file in order to compatible with both bootstrap 3 & 4

<!-- ================== BEGIN BASE CSS STYLE ================== -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href="assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="assets/plugins/bootstrap4/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="assets/css/animate.min.css" rel="stylesheet" />
<link href="assets/css/style-bs4.min.css" rel="stylesheet" />
<link href="assets/css/style.min.css" rel="stylesheet" />
<link href="assets/css/style-responsive.min.css" rel="stylesheet" />
<link href="assets/css/theme/default.css" rel="stylesheet" id="theme" />
<!-- ================== END BASE CSS STYLE ================== -->

Base JS File Structure

Bootstrap 4 required tether.js in order to run the tooltip or popover

<!-- ================== BEGIN BASE JS ================== -->
<script src="assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="assets/plugins/tether/js/tether.min.js"></script>
<script src="assets/plugins/bootstrap4/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
	<script src="assets/crossbrowserjs/html5shiv.js"></script>
	<script src="assets/crossbrowserjs/respond.min.js"></script>
	<script src="assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
<!-- ================== END BASE JS ================== -->

N) Using AJAX version - top

IMPORTANT Please make sure the server configuration is allow POST method request and it is run on server hosted.

Base File Structure

All the header css file & javascript file setting is same with the HTML version. All the ajax content will be fit into the #ajax-content container.

BASE FILE NAME: template_content_ajax/index.html

<body>
  <!-- begin #page-loader -->
  <div id="page-loader" class="fade in"><span class="spinner"></span></div>
  <!-- end #page-loader -->
  
  <!-- begin #page-container -->
  <div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
    <!-- begin #header -->
    <div id="header" class="header navbar navbar-default navbar-fixed-top">
      <!-- header content here -->
    </div>
    <!-- end #header -->
    
    <!-- begin #sidebar -->
    <div id="sidebar" class="sidebar">
      <!-- sidebar content here -->
    </div>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->
    
    <!-- begin #ajax-content -->
    <div id="ajax-content">
      <!-- ajax content HERE -->
    </div>
    <!-- end #ajax-content -->
    
    <!-- begin theme-panel -->
    <div class="theme-panel">
      <!-- theme panel content here -->
    </div>
    <!-- end theme-panel -->
    
    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
      <i class="fa fa-angle-up"></i>
    </a>
    <!-- end scroll to top btn -->
  </div>
  <!-- end page container -->
</body>

Ajax Target File Configuration

You may use the attribute data-toggle="ajax" to call the javascript function. The href is the target location / target url that retrieve the ajax content. If you wish to configure the AJAX content page load function, you may refer to the javascript function name handleLoadPage inside /assets/js/apps.js. 

<a href="#ajax/index.html" data-toggle="ajax">Dashboard v1</a>

Restart Global Function after Ajax Content Page Loaded

You may use the following code to restart the global function used in apps.js

Global Function List
1. handleDraggablePanel()
2. handleLocalStorage()
3. handleSlimScroll()
4. handlePanelAction()
5. handelTooltipPopoverActivation()
6. handleAfterPageLoadAddClass() 
<script>
    App.restartGlobalFunction();
</script>

Set Page Title after Ajax Content Page Loaded

<script>
    App.setPageTitle('Color Admin | Dashboard V2');
</script>

Load Javascript / JS File in Ajax Content Page

We are using jQuery function $.getScript to load the javascript file. Here is some example to load the ajax content page that having their own javascript file. 

<script>
var handleDashboardGritterNotification = function() {
    $(window).load(function() {
        setTimeout(function() {
            $.gritter.add({
                title: 'Welcome back, Admin!',
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                image: 'assets/img/user-2.jpg',
                sticky: true,
                time: '',
                class_name: 'my-sticky-class'
            });
        }, 1000);
    });
};
$.getScript('assets/plugins/gritter/js/jquery.gritter.js').done(function() {
  handleDashboardGritterNotification();
});
</script>

O) Using Angular JS Version - top

Angular JS File Structure:

template_content_angularjs/
├── index.html
├── assets/
│   ├── crossbrowserjs/
│   ├── css/
│   ├── img/
│   ├── js/
│   │   ├── angular-app.js
│   │   ├── angular-controller.js
│   │   ├── angular-directive.js
│   │   ├── angular-setting.js
│   │   ├── apps.js
│   │   └── apps.min.js
│   └── plugins
├── template/
│   ├── app.html
│   ├── header.html
│   ├── sidebar.html
│   ├── sidebar-right.html
│   ├── top-menu.html
│   └── theme-panel.html
└── views/
    ├── all html view files

Page Options:

<!-- page sidebar minified -->
$rootScope.setting.layout.pageSidebarMinified = false;

<!-- page fixed footer -->
$rootScope.setting.layout.pageFixedFooter = false;

<!-- page with right sidebar -->
$rootScope.setting.layout.pageRightSidebar = false;

<!-- page with two sidebar -->
$rootScope.setting.layout.pageTwoSidebar = false;

<!-- page with top menu -->
$rootScope.setting.layout.pageTopMenu = false;

<!-- page boxed layout -->
$rootScope.setting.layout.pageBoxedLayout = false;

<!-- page without sidebar -->
$rootScope.setting.layout.pageWithoutSidebar = false;

<!-- page content full height -->
$rootScope.setting.layout.pageContentFullHeight = false;

<!-- page content full width -->
$rootScope.setting.layout.pageContentFullWidth = false;

<!-- pace loading bar stick to top -->
$rootScope.setting.layout.paceTop = false;

<!-- page header with language bar -->
$rootScope.setting.layout.pageLanguageBar = false;

<!-- page with transparent sidebar -->
$rootScope.setting.layout.pageSidebarTransparent = false;

<!-- page with wide sidebar -->
$rootScope.setting.layout.pageWideSidebar = false;

<!-- page with light sidebar -->
$rootScope.setting.layout.pageLightSidebar = false;

<!-- page with footer -->
$rootScope.setting.layout.pageFooter = false;

<!-- page with mega menu -->
$rootScope.setting.layout.pageMegaMenu = false;

<!-- page without header -->
$rootScope.setting.layout.pageWithoutHeader = false;

<!-- page body background white -->
$rootScope.setting.layout.pageBgWhite = false;

Angular JS 4 File Structure:

IMPORTANT In order to use Angular JS 4, you might need to install node JS in your localhost / server. You may refer to their official documentation for how to setup the development environment.
1. cd /your-path-url/template_content_angularjs4
2. npm install
3. npm start
Setup Guide 
template_content_angularjs4/
├── karma.conf.js
├── package.json
├── tslint.json
├── protractor.conf.js
├── tsconfig.json
├── webpack.config.js
├── config/
├── e2e/
├── src/
│   ├── index.html
│   ├── favicon.ico
│   ├── app/
│   │   ├── app.routing.module.ts
│   │   ├── app.module.ts
│   │   ├── app.component.ts
│   │   ├── main.ts
│   │   ├── app.html
│   │   ├── content/
│   │   ├── footer/
│   │   ├── header/
│   │   ├── pages/
│   │   ├── sidebar/
│   │   ├── sidebar-two/
│   │   ├── theme-panel/
│   │   └── top-menu/
│   ├── assets/ 
│   │   ├── css/
│   │   ├── img/
│   │   ├── js/
│   │   ├── less/
│   │   └── plugins/
│   └── environments/
└── node_modules/
IMPORTANT Remember to change the base url for your live server domain url. 
<!DOCTYPE html>
<html>
<head>
    <title>Color Admin | Angular 2</title>
    <!-- http://localhost:4200 for default localhost base url -->
    <base href="----your base url here ---" />
    ...
</head>

P) Using Material Design Version - top

Our brand new MATERIAL & APPLE design is designed based on the previous version of HTML structure. This is useful for our theme user to switch to another theme without changing much on their HTML code.

The only different is we are using the material design style of page loader:

<!-- begin #page-loader -->
<div id="page-loader">
    <div class="material-loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
        <div class="message">Loading...</div>
    </div>
</div>
<!-- end #page-loader -->
Material Design:
Apple Design:

Q) Plugins & Resources - top

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

Name CSS Files
jQuery v1.8.2

Required JS File

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

Official Link:
http://jquery.com/
jQuery v1.9.1

Required JS File

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

Official Link:
http://jquery.com/
jQuery UI v1.10.4

Required CSS File

<link rel="stylesheet" href="assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" />

Required JS File

<script src="assets/plugins/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>

Official Link:
http://jqueryui.com/
Bootstrap

Required CSS File

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

Required JS File

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

Official Link:
http://getbootstrap.com/
Font Awesome

Required CSS File

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

Official Link:
http://fortawesome.github.io/Font-Awesome/
jvectormap

Required CSS File

<link rel="stylesheet" href="assets/plugins/jquery-jvectormap/jquery-jvectormap.css" />

Required JS File

<script src="assets/plugins/jquery-jvectormap/jquery-jvectormap.min.js"></script>
<script src="assets/plugins/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script>

Official Link:
http://jvectormap.com/
jQuery slimScroll

Required JS File

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

Official Link:
http://rocha.la/jQuery-slimScroll
flot charts

Required JS File

<script src="assets/plugins/flot/jquery.flot.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.time.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.stack.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.crosshair.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.categories.js"></script>

Official Link:
http://www.flotcharts.org/
fullcalendar

Required CSS File

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

Required JS File

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

Official Link:
http://arshaw.com/fullcalendar/
Gritter

Required CSS File

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

Required JS File

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

Official Link:
http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/
Isotope

Required JS File

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

Official Link:
http://isotope.metafizzy.co/
Lightbox 2

Required CSS File

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

Required JS File

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

Official Link:
http://lokeshdhakar.com/projects/lightbox2/
Bootstrap Datepicker

Required CSS File

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

Required JS File

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

Official Link:
http://bootstrap-datepicker.readthedocs.org/en/release/
Bootstrap Timepicker

Required CSS File

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

Required JS File

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

Official Link:
http://jdewit.github.io/bootstrap-timepicker/
Bootstrap Colorpicker

Required CSS File

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

Required JS File

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

Official Link:
http://www.eyecon.ro/bootstrap-colorpicker
Bootstrap ComboBox

Required CSS File

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

Required JS File

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

Official Link:
https://github.com/danielfarrell/bootstrap-combobox
jQuery Tag It

Required CSS File

<link rel="stylesheet" href="assets/plugins/jquery-tag-it/css/jquery.tagit.css" />

Required JS File

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

Official Link:
http://aehlke.github.io/tag-it/
Bootstrap Select

Required CSS File

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

Required JS File

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

Official Link:
http://silviomoreto.github.io/bootstrap-select/
Masked Input

Required JS File

<script src="assets/plugins/masked-input/masked-input.min.js"></script>

Official Link:
http://digitalbush.com/projects/masked-input-plugin/
Password Strength Indicator and Generator

Required CSS File

<link rel="stylesheet" href="assets/plugins/password-indicator/css/password-indicator.css" />

Required JS File

<script src="assets/plugins/password-indicator/js/password-indicator.js"></script>

Official Link:
http://benjaminsterling.com/password-strength-indicator-and-generator/
Parsley Validation

Required CSS File

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

Required JS File

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

Official Link:
http://parsleyjs.org/index.html
bootstrap Wysihtml5

Required CSS File

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

Required JS File

<script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>

Official Link:
http://jhollingworth.github.io/bootstrap-wysihtml5/
CKEditor

Required JS File

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

Official Link:
http://ckeditor.com/
Bootstrap Wizard

Required CSS File

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

Required JS File

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

Official Link:
https://github.com/gilluminate/Bootstrap-Wizard
Sparkline

Required JS File

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

Official Link:
http://omnipotent.net/jquery.sparkline/
DataTables v1.10.9
(Updated in V1.9.0)

Required CSS File

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

Required JS File

<script src="assets/plugins/DataTables/media/js/jquery.dataTables.js"></script>
<script src="assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js"></script>

Official Link:
http://www.datatables.net/

Extension:

- AutoFill 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/AutoFill/css/autoFill.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/AutoFill/js/dataTables.autoFill.min.js"></script>
<script src="assets/plugins/DataTables/extensions/AutoFill/js/autoFill.bootstrap.min.js"></script>
- Buttons 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/Buttons/css/buttons.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/Buttons/js/buttons.bootstrap.min.js"></script>
<script src="assets/plugins/DataTables/extensions/Buttons/js/buttons.flash.min.js"></script>
<script src="assets/plugins/DataTables/extensions/Buttons/js/jszip.min.js"></script>
<script src="assets/plugins/DataTables/extensions/Buttons/js/pdfmake.min.js"></script>
<script src="assets/plugins/DataTables/extensions/Buttons/js/vfs_fonts.min.js"></script>
<script src="assets/plugins/DataTables/extensions/Buttons/js/buttons.html5.min.js"></script>
<script src="assets/plugins/DataTables/extensions/Buttons/js/buttons.print.min.js"></script>
- colReorder 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/ColReorder/css/colReorder.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
- fixedColumns 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/FixedColumns/css/fixedColumns.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/FixedColumns/js/dataTables.fixedColumns.min.js"></script>
- fixedHeader 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/FixedHeader/css/fixedHeader.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/FixedHeader/js/dataTables.fixedHeader.min.js"></script>
- keyTable 
<link rel="stylesheet" href="assets/plugins/DataTables/media/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/KeyTable/css/keyTable.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/KeyTable/js/dataTables.keyTable.min.js"></script>
- Responsive 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/Responsive/css/responsive.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
- rowReorder 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/RowReorder/css/rowReorder.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/RowReorder/js/dataTables.rowReorder.min.js"></script>
- scroller 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/Scroller/css/scroller.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/Scroller/js/dataTables.scroller.min.js"></script>
- select 
<link rel="stylesheet" href="assets/plugins/DataTables/extensions/Select/css/select.bootstrap.min.css" />
<script src="assets/plugins/DataTables/extensions/Select/js/dataTables.select.min.js"></script>
Ion Range Slider

Required CSS File

<link rel="stylesheet" href="assets/plugins/ionRangeSlider/css/ion.rangeSlider.css" />
<link rel="stylesheet" href="assets/plugins/ionRangeSlider/css/ion.rangeSlider.skinnice.css" />

Required JS File

<script src="assets/plugins/ionRangeSlider/js/ion-rangeSlider/ion.rangeSlider.min.js"></script>

Official Link:
http://ionden.com/a/plugins/ion.rangeSlider/en.html
Animate.css

Required CSS File

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

Official Link:
http://daneden.github.io/animate.css/
jQuery Countdown

Required CSS File

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

Required JS File

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

Official Link:
http://keith-wood.name/countdown.html
Zurb Email Template

Official Link:
http://zurb.com/ink/
jQuery Cookie
(Added in V1.2.0)

Required JS File

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

Official Link:
https://github.com/carhartl/jquery-cookie
Switchery
(Added in V1.2.0)

Required CSS File

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

Required JS File

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

Official Link:
http://abpetkov.github.io/switchery/
Powerange
(Added in V1.2.0)

Required CSS File

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

Required JS File

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

Official Link:
http://abpetkov.github.io/powerange/
X-Editable
(Added in V1.2.0)

Required CSS File

<link rel="stylesheet" href="assets/plugins/bootstrap3-editable/css/bootstrap-editable.css" />
<link rel="stylesheet" href="assets/plugins/bootstrap3-editable/inputs-ext/address/address.css" />
<link rel="stylesheet" href="assets/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/lib/typeahead.css" />
<link rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/datepicker.css" />
<link rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/datepicker3.css" />
<link rel="stylesheet" href="assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css" />
<link rel="stylesheet" href="assets/plugins/select2/select2.css" />
<link rel="stylesheet" href="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css" />

Required JS File

<script src="assets/plugins/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="assets/plugins/bootstrap3-editable/inputs-ext/address/address.js"></script>
<script src="assets/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/lib/typeahead.js"></script>
<script src="assets/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/typeaheadjs.js"></script>
<script src="assets/plugins/bootstrap3-editable/inputs-ext/wysihtml5/wysihtml5.js"></script>
<script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="assets/plugins/select2/select2.min.js"></script>
<script src="assets/plugins/mockjax/jquery.mockjax.js"></script>
<script src="assets/plugins/moment/moment.min.js"></script>

Official Link:
http://vitalets.github.io/x-editable/
jQuery File Upload
(Added in V1.2.0)

Required CSS File

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

Required JS File

<script src="assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="assets/plugins/jquery-file-upload/js/vendor/tmpl.min.js"></script>
<script src="assets/plugins/jquery-file-upload/js/vendor/load-image.min.js"></script>
<script src="assets/plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js"></script>
<script src="assets/plugins/jquery-file-upload/blueimp-gallery/jquery.blueimp-gallery.min.js"></script>
<script src="assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-process.js"></script>
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-image.js"></script>
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-audio.js"></script>
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-video.js"></script>
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
<!--[if (gte IE 8)&(lt IE 10)]>
    <script src="assets/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script>
<![endif]-->

Official Link:
http://blueimp.github.io/jQuery-File-Upload/
jQuery-Knob
(Added in V1.2.0)

Required JS File

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

Official Link:
http://anthonyterrien.com/knob/
Simple Line Icons
(Added in V1.3.0)

Required CSS File

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

Official Link:
http://graphicburger.com/simple-line-icons-webfont/
Morris Chart
(Added in V1.3.0)

Required CSS File

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

Required JS File

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

Official Link:
http://morrisjs.github.io/morris.js/index.html
Superbox
(Added in V1.3.0)

Required JS File

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

Official Link:
http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/
Chart JS
(Added in V1.6.0)

Required JS File

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

Official Link:
http://www.chartjs.org/
JS Tree
(Added in V1.7.0)

Required CSS File

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

Required JS File

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

Official Link:
http://www.jstree.com/
Bootstrap Date Range Picker
(Added in V1.7.0)

Required CSS File

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

Required JS File

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

Official Link:
https://github.com/dangrossman/bootstrap-daterangepicker
Select 2
(Added in V1.7.0)

Required CSS File

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

Required JS File

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

Official Link:
https://select2.github.io/
Flat Icon
(Added in V1.7.0)

Required CSS File

<link href="assets/plugins/flag-icon/css/flag-icon.css" rel="stylesheet" />

Official Link:
https://github.com/lipis/flag-icon-css
Bootstrap DateTime Picker
(Added in V1.8.0)

Required CSS File

<link href="assets/plugins/bootstrap-eonasdan-datetimepicker/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

Required JS File

<script src="assets/plugins/bootstrap-eonasdan-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

Official Link:
http://eonasdan.github.io/bootstrap-datetimepicker/
Chart d3
(Added in V1.9.0)

Required CSS File

<link href="assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />

Required JS File

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<script src="assets/plugins/nvd3/build/nv.d3.js"></script>

Official Link:
http://nvd3.org/
Boostrap Social
(Added in V2.1.0)

Required CSS File

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

Official Link:
https://lipis.github.io/bootstrap-social/
Intro JS
(Added in V2.1.0)

Required CSS File

<link href="assets/plugins/intro-js/introjs.css" rel="stylesheet" />

Required JS File

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

Official Link:
http://introjs.com/
Bootstrap Color Palette
(Added in V2.1.0)

Required CSS File

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

Required JS File

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

Official Link:
https://github.com/extremeFE/bootstrap-colorpalette
jQuery Simple Color Picker
(Added in V2.1.0)

Required CSS File

<link href="assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker.css" rel="stylesheet" />
<link href="assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker-fontawesome.css" rel="stylesheet" />
<link href="assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker-glyphicons.css" rel="stylesheet" />

Required JS File

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

Official Link:
https://github.com/tkrotoff/jquery-simplecolorpicker
Bootstrap Show Password
(Added in V2.1.0)

Required JS File

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

Official Link:
https://github.com/wenzhixin/bootstrap-show-password
Dropzone
(Added in V2.1.0)

Required CSS File

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

Required JS File

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

Official Link:
http://www.dropzonejs.com/
Summernote
(Added in V2.1.0)

Required CSS File

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

Required JS File

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

Official Link:
http://summernote.org/
Bootstrap 4 - Aplha 6
(Added in V3.0.0)

Required CSS File

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

Required JS File

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

Official Link:
https://v4-alpha.getbootstrap.com/
Bootstrap SweetAlert
(Added in V3.0.0)

Required CSS File

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

Required JS File

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

Official Link:
https://lipis.github.io/bootstrap-sweetalert/
clipboard.js
(Added in V3.0.0)

Required JS File

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

Official Link:
https://clipboardjs.com/

R) References - top

I've used the following images, icons or other files as listed.

jQuery Plugins

  1. jvectormap:http://jvectormap.com/
  2. jQuery slimScroll:http://rocha.la/jQuery-slimScroll
  3. flot charts:http://www.flotcharts.org/
  4. fullcalendar:http://arshaw.com/fullcalendar/
  5. Gritter:http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/
  6. Isotope:http://isotope.metafizzy.co/
  7. Lightbox 2:http://lokeshdhakar.com/projects/lightbox2/
  8. Bootstrap Datepicker:http://bootstrap-datepicker.readthedocs.org/en/release/
  9. Bootstrap Timepicker:http://jdewit.github.io/bootstrap-timepicker/
  10. Bootstrap Colorpicker:http://www.eyecon.ro/bootstrap-colorpicker
  11. Bootstrap ComboBox:https://github.com/danielfarrell/bootstrap-combobox
  12. Bootstrap Select:http://silviomoreto.github.io/bootstrap-select/
  13. Masked Input:http://digitalbush.com/projects/masked-input-plugin/
  14. Password Strength Indicator and Generator:http://benjaminsterling.com/password-strength-indicator-and-generator/
  15. Parsley:http://parsleyjs.org/index.html
  16. Bootstrap WYSIHTML5:http://jhollingworth.github.io/bootstrap-wysihtml5/
  17. CKEditor:http://ckeditor.com/
  18. Bootstrap Wizard:https://github.com/gilluminate/Bootstrap-Wizard
  19. Sparkline:http://omnipotent.net/jquery.sparkline/
  20. Table Data:http://datatables.net/blog/Twitter_Bootstrap_2
  21. Ion Range Slider:http://ionden.com/a/plugins/ion.rangeSlider/en.html
  22. jQuery Tag It:http://aehlke.github.io/tag-it/
  23. jQuery Countdown:http://keith-wood.name/countdown.html
  24. Zurb Email Template:http://zurb.com/ink/
  25. jQuery Cookie:https://github.com/carhartl/jquery-cookie
  26. Switchery:http://abpetkov.github.io/switchery/
  27. Powerange:http://abpetkov.github.io/powerange/
  28. X-Editable :http://vitalets.github.io/x-editable/
  29. jQuery File Upload :http://blueimp.github.io/jQuery-File-Upload/
  30. jQuery-Knob:http://anthonyterrien.com/knob/
  31. Simple Line Icons:http://graphicburger.com/simple-line-icons-webfont/
  32. Morris Chart:http://morrisjs.github.io/morris.js/index.html
  33. Superbox:http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/
  34. Chart JS:http://www.chartjs.org/
  35. JS Tree:http://www.jstree.com/
  36. Bootstrap Date Range Picker:https://github.com/dangrossman/bootstrap-daterangepicker
  37. Select2:https://select2.github.io/
  38. Flag Icon:https://github.com/lipis/flag-icon-css
  39. Bootstrap Date Time Picker:http://eonasdan.github.io/bootstrap-datetimepicker/
  40. NVD3:http://nvd3.org/
  41. Bootstrap Social:https://lipis.github.io/bootstrap-social/
  42. Intro JS:http://introjs.com/
  43. Bootstrap Color Palette:https://github.com/extremeFE/bootstrap-colorpalette
  44. jQuery Simple Color Picker:https://github.com/tkrotoff/jquery-simplecolorpicker
  45. Bootstrap Show Password:https://github.com/wenzhixin/bootstrap-show-password>
  46. Dropzone:http://www.dropzonejs.com/
  47. Summernote:http://summernote.org/
  48. Bootstrap SweetAlert:https://lipis.github.io/bootstrap-sweetalert/
  49. clipboard.js:https://clipboardjs.com/

S) Change Log - top

Version 3.0.0 - 23 July 2016
  • NEW: Apple Design
    • Added files: template_content_apple
  • NEW: Angular JS 4
    • Added files: template_content_angularjs4
  • NEW: Boostrap 4 Support
    • Added HTML files: bootstrap_4.html
    • Added CSS files: /assets/css/style-bs4.css
    • Added CSS files: /assets/css/style-bs4.min.css
    • Added PLUGINS files: /assets/plugins/bootstrap4/
  • NEW: CSS Checkbox & Radiobutton
    • Modified File: style.css
    • Modified File: style.min.css
  • NEW: clipboard.js
    • Updated HTML files: form_plugins.html
    • Added PLUGINS files: /assets/plugins/clipboard/
  • NEW: Bootstrap SweetAlert.js
    • Updated HTML files: ui_modal_notification.html
    • Added PLUGINS files: /assets/plugins/bootstrap-sweetalert/
  • ENHANCE: Angular JS Mobile Sidebar AutoClose
    • Modified File: apps.js
    • Modified File: apps.min.js
  • ENHANCE: Angular JS 4 Mobile Sidebar AutoClose
    • Modified File: apps.js
    • Modified File: apps.min.js
  • ENHANCE: Ajax Version Mobile Sidebar AutoClose
    • Modified File: apps.js
    • Modified File: apps.min.js
  • ENHANCE: Add listener after panel reposition
    • Modified File: apps.js
    • Modified File: apps.min.js
  • ENHANCE: Form Plugins UI Enhancement
    • Modified File: style.css
    • Modified File: style.min.css
  • FIX: Sidebar Transparent Overflow Issue
    • Modified File: style.css
    • Modified File: style.min.css
  • FIX: IE8 Datetimcpicker
    • Modified File: form-plugins.demo.js
    • Modified File: form-plugins.demo.min.js
  • FIX: Login v1 Overflow Issue
    • Modified File: style.css
    • Modified File: style.min.css
Version 2.2.0 - 04 January 2017
  • FIX: Downloaded File Unable to Extract
    • Removed File: template_content_angularjs2/node_modules
Version 2.1.0 - 30 November 2016
  • NEW: Angular JS 2
    • Added files: template_content_angularjs2
  • NEW: LESS File for Material Design
    • Added files: template_content_material/assets/less/
  • NEW: Bootstrap Color Palette
    • Updated HTML files: form_plugins.html
    • Added PLUGINS files: /assets/plugins/bootstrap-colorpalette/
  • NEW: Bootstrap Social
    • Added HTML files: ui_social_buttons.html
    • Added PLUGINS files: /assets/plugins/bootstrap-social/
  • NEW: Intro JS
    • Added HTML files: ui_tour.html
    • Added PLUGINS files: /assets/plugins/introjs/
  • NEW: jQuery Simple Color Picker
    • Updated HTML files: form_plugins.html
    • Added PLUGINS files: /assets/plugins/jquery-simplecolorpicker/
  • NEW: Bootstrap Show Password
    • Updated HTML files: form_plugins.html
    • Added PLUGINS files: /assets/plugins/bootstrap-show-password/
  • NEW: Dropzone
    • Added HTML files: form_dropzone.html
    • Added PLUGINS files: /assets/plugins/dropzone/
  • NEW: Summernote
    • Added HTML files: form_summernote.html
    • Added PLUGINS files: /assets/plugins/summernote/
  • UPDATE: Bootstrap 3.3.7
    • Updated Directory: /assets/plugins/bootstrap/
  • UPDATE: Font Awesome 4.7.0
    • Updated Directory: /assets/plugins/font-awesome/
  • UPDATE: Colorpicker 2.3.2
    • Updated Directory: /assets/plugins/bootstrap-colorpicker/
  • UPDATE: Bootstrap Combobox 1.1.7
    • Updated Directory: /assets/plugins/bootstrap-combobox/
  • UPDATE: Bootstrap Datepicker 1.6.1
    • Updated Directory: /assets/plugins/bootstrap-datepicker/
  • UPDATE: Bootstrap Daterangepicker 2.1.24
    • Updated Directory: /assets/plugins/bootstrap-daterangepicker/
  • UPDATE: Bootstrap Datetimepicker
    • Updated Directory: /assets/plugins/bootstrap-datetimepicker/
  • UPDATE: Bootstrap Eonasdan Datetimepicker 4.17.37
    • Updated Directory: /assets/plugins/bootstrap-eonasdan-datetimepicker/
  • UPDATE: Bootstrap Tags Input 0.8.0
    • Updated Directory: /assets/plugins/bootstrap-tagsinput/
  • UPDATE: Bootstrap XEditable 1.5.1
    • Updated Directory: /assets/plugins/bootstrap3-editable/
  • DROP: Bootstrap WYSIHTML5 and replaced with WYSIHTML5 Bootstrap3
    • New Directory: /assets/plugins/bootstrap-wysihtml5/
  • UPDATE: Chart JS 2.0.0
    • Updated Directory: /assets/plugins/chart-js/
  • UPDATE: Flag Icon 2.4.0
    • Updated Directory: /assets/plugins/flag-icon/
  • UPDATE: Flot Chart 0.8.3
    • Updated Directory: /assets/plugins/flot/
  • UPDATE: Fullcalendar 2.9.1
    • Updated Directory: /assets/plugins/fullcalendar/
  • UPDATE: Ionicon 2.0.1
    • Updated Directory: /assets/plugins/ionicon/
  • UPDATE: Ion Range Slider 2.1.4
    • Updated Directory: /assets/plugins/ionRangeSlider/
  • UPDATE: jQuery File Upload
    • Updated Directory: /assets/plugins/jquery-file-upload/
  • UPDATE: jVector Map 2.0.3
    • Updated Directory: /assets/plugins/jquery-jvectormap/
  • UPDATE: jQuery Countdown 2.0.2
    • Updated Directory: /assets/plugins/jquery.countdown/
  • UPDATE: jsTree 3.3.2
    • Updated Directory: /assets/plugins/jstree/
  • UPDATE: LESS 2.7.1
    • Updated Directory: /assets/plugins/less/
  • UPDATE: Lightbox 2.8.2
    • Updated Directory: /assets/plugins/lightbox/
  • UPDATE: Masked Input 1.4.1
    • Updated Directory: /assets/plugins/masked-input/
  • UPDATE: Morris Chart 0.5.1
    • Updated Directory: /assets/plugins/morris/
  • UPDATE: NVD3 1.8.4
    • Updated Directory: /assets/plugins/nvd3/
  • UPDATE: Parsley 2.4.4
    • Updated Directory: /assets/plugins/parsley/
  • UPDATE: Simple Line Icons 2.3.2
    • Updated Directory: /assets/plugins/simple-line-icons/
  • UPDATE: Slimscroll 1.3.8
    • Updated Directory: /assets/plugins/slimscroll/
  • FIX: Material Version Inverse Header
    • Modified File: style.css
    • Modified File: style.min.css
  • FIX: Table Manage Combination PDF button not working
    • Modified File: table_manage_combine.html
  • FIX: Material Version icons rendering problem in mobile device
    • Modified File: table_manage_combine.html
  • FIX: Missing Profile / Invoice / Calendar page styling for LESS
    • Modified File: /assets/less/
  • FIX: Login V1 / V2 styling overflow
    • Modified File: style.css
    • Modified File: style.min.css
  • ENHANCEMENT: Minor UI Enhancement
    • Modified File: style.css
    • Modified File: style.min.css
Version 2.0.0 - 30 April 2016
  • NEW: Material Design Version
    • Added files: template_content_material
  • UPDATE: Bootstrap 3.3.6
    • Updated Directory: /assets/plugins/bootstrap/
  • UPDATE: FontAwesome 4.6.1
    • Updated Directory: /assets/plugins/font-awesome/
  • UPDATE: Angular Js 1.5.5 (stable version)
    • Updated Directory: /assets/plugins/angularjs/
  • UPDATE: Fullcalendar 2.0
    • Updated Directory: /assets/plugins/fullcalendar/
  • UPDATE: DataTable 1.10.10
    • Updated Directory: /assets/plugins/fullcalendar/
  • FIX: Angular Version Panel Dragging Issue
    • Modified File: /assets/js/apps.js
  • FIX: Angular Version Page Height Issue
    • Modified File: /assets/css/style.css
    • Modified File: /assets/css/style.min.css
  • FIX: Select 2 Overflow Issue
    • Modified File: /assets/css/style.css
    • Modified File: /assets/css/style.min.css
  • FIX: DataTables Buttons Extension Issue
    • Modified File: /assets/plugins/DataTables/
  • FIX: Full Height Page Panel Expand Issue
    • Modified File: /assets/css/style.css
    • Modified File: /assets/css/style.min.css
  • FIX: Slider & Switchery Options
    • Modified File: /assets/js/form-slider-switcher.demo.js
    • Modified File: /assets/js/form-slider-switcher.demo.min.js
  • FIX: Page Loader z-index Issue
    • Modified File: /assets/js/form-slider-switcher.demo.js
    • Modified File: /assets/js/form-slider-switcher.demo.min.js
  • FIX: Spinner Margin Issue
    • Modified File: /assets/css/style.css
    • Modified File: /assets/css/style.min.css
Version 1.9.0 - 05 October 2015
  • NEW: Angular JS Version
    • Added files: template_content_angularjs
  • NEW: NVD3 Chart
    • Added HTML files: chart_d3.html
    • Added PLUGINS files: /assets/plugins/nvd3/
  • NEW: Page with Top Menu
    • Added HTML files: page_with_top_menu.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
    • Modified JS files: /assets/js/apps.js and /assets/js/apps.min.js
  • NEW: Boxed Layout
    • Added HTML files: page_with_boxed_layout.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
    • Modified JS files: /assets/js/apps.js and /assets/js/apps.min.js
  • NEW: Page with Mixed Menu
    • Added HTML files: page_with_mixed_menu.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
    • Modified JS files: /assets/js/apps.js and /assets/js/apps.min.js
  • NEW: Boxed Layout with Mixed Menu
    • Added HTML files: page_boxed_layout_with_mixed_menu.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
    • Modified JS files: /assets/js/apps.js and /assets/js/apps.min.js
  • NEW: Transparent Sidebar
    • Added HTML files: page_with_transparent_sidebar.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
    • Modified JS files: /assets/js/apps.js and /assets/js/apps.min.js
  • NEW: DataTables Extension - RowReorder
    • Added HTML files: table_manage_rowreorder.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
    • Modified JS files: /assets/js/apps.js and /assets/js/apps.min.js
  • NEW: DataTables Extension - Select
    • Added HTML files: table_manage_select.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
    • Modified JS files: /assets/js/apps.js and /assets/js/apps.min.js
  • UPDATE: DataTables Version - 1.10.9
    • Updated Plugins files: /assets/DataTables
  • ENHANCED: Color Admin Apps.js
    • Modified JS files: /assets/js/apps.js and /assets/js/apps.min.js
Version 1.8.0 - 30 June 2015
  • NEW: Bootstrap Date Time Picker
    • Modified HTML files: form_plugins.html
    • Added PLUGINS files: /assets/plugins/bootstrap-eonasdan-datetimepicker/
  • NEW: Full Color Panel
    • Modified HTML files: ui_widget_boxes.html
    • Modified CSS files: /assets/css/style.css
    • Modified CSS files: /assets/css/style.min.css
  • FIX: Login Page v2 Background in Large Screen (> 1920px)
    • Modified CSS files: /assets/css/style.css
    • Modified CSS files: /assets/css/style.min.css
  • FIX: Page Sidebar Expand / Collapse Height Rendering
    • Modified JS files: /assets/js/apps.js
    • Modified JS files: /assets/js/apps.min.js
  • FIX: Page Sidebar Scrollbar Touch Event in Tablet Device
    • Modified JS files: /assets/js/apps.js
    • Modified JS files: /assets/js/apps.min.js
  • FIX: Clearfix Mixin Crashed with Bootstrap Mixin
    • Updated File: /assets/less/_mixins.less
  • UPDATE: Include Bootstrap LESS
    • Updated Directory: /assets/less/bootstrap/
  • UPDATE: Bootstrap 3.3.4 to Bootstrap 3.3.5
    • Updated Directory: /assets/plugins/bootstrap/
  • UPDATE: Less 1.7.4 to Less 2.5.1
    • Updated Directory: /assets/plugins/less/
Version 1.7.0 - 1 May 2015
  • NEW: Tree View
    • Added HTML files: ui_tree.html
    • Added PLUGINS files: /assets/plugins/jstree/
  • NEW: Language Bar & Icon List
    • Added HTML files: ui_language_bar_icon.html
    • Added PLUGINS files: /assets/plugins/flag-icon/
  • NEW: Bootstrap Date Range Picker
    • Updated HTML files: form_plugins.html
    • Added PLUGINS files: /assets/plugins/bootstrap-daterangepicker/
  • NEW: Select2
    • Updated HTML files: form_plugins.html
    • Added PLUGINS files: /assets/plugins/select2/
  • NEW: Top Navbar Mega Menu
    • Added HTML files: page_with_mega_menu.html
  • NEW: Login & Register Page v3
    • Added HTML files: login_v3.html
    • Added HTML files: register_v3.html
  • NEW: Profile Page
    • Added HTML files: extra_profile.html
  • NEW: Light Sidebar
    • Added HTML files: page_with_light_sidebar.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
  • NEW: Wide Sidebar
    • Added HTML files: page_with_wide_sidebar.html
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
  • NEW: Mobile View Scrollbar
    • Modified JS files: /assets/js/apps.js and /assets/css/apps.min.js
  • NEW: Mobile View Minified Sidebar Scrollbar
    • Modified JS files: /assets/js/apps.js and /assets/css/apps.min.js
  • UPDATE: Bootstrap 3.3.3 to Bootstrap 3.3.4
    • Updated Directory: /assets/plugins/bootstrap/
  • FIX: Multi Level Menu Bugfix
    • Modified CSS files: /assets/css/style.css and /assets/css/style.min.css
  • FIX: Ajax Version Coming Soon Page
    • Modified HTML files: /assets/js/coming-soon.demo.js and /assets/js/coming-soon.demo.min.js
  • FIX: Ajax Version href="#" rendering error
    • Modified HTML files: /assets/js/apps.js and /assets/js/apps.min.js
Version 1.6.0 - 23 January 2015
  • NEW: Managed Table - Extension Combination
    • Added HTML: table_mange_combine.html
  • NEW: Chart JS
    • Added HTML: chart_js.html
    • Added PLUGINS: assets/plugins/assets/chart-js/
  • NEW: Ajax Documentation
    • Updated Directory: documentation/
  • UPDATE: Bootstrap 3.3.1 to Bootstrap 3.3.2
    • Updated Directory: /assets/plugins/bootstrap/
  • UPDATE: FontAwesome 4.2.0 to Bootstrap 4.3.0
    • Updated Directory: /assets/plugins/font-awesome/
  • FIX: IE 8 - IE 10 Full Height Page
    • Modified Directory files: /assets/js/apps.js
    • Modified Directory files: /assets/js/apps.min.js
  • FIX: Mobile Sidebar Toggle Button
    • Modified Directory files: /assets/js/apps.js
    • Modified Directory files: /assets/js/apps.min.js
  • FIX: Tab Inverse Hover
    • Modified Directory files: /assets/css/style.css
    • Modified Directory files: /assets/css/style.min.css
  • FIX: IE10 Sidebar Menu
    • Modified Directory files: /assets/css/style.css
    • Modified Directory files: /assets/css/style.min.css
  • FIX: Minified Sidebar Multiple Level Menu
    • Modified Directory files: /assets/css/style.css
    • Modified Directory files: /assets/css/style.min.css
Version 1.5.0 - 30 November 2014
  • NEW: AJAX Version
    • New Directory files: /template_content_ajax
    • New Directory files: /template_content_ajax
  • NEW: Color Scheme (Black)
    • Modified CSS files: /assets/css/style.css
    • Modified CSS files: /assets/css/style.min.css
  • NEW: Sidebar Color Scheme (Gradient)
    • Modified CSS files: /assets/css/theme/default.css
    • Modified CSS files: /assets/css/theme/blue.css
    • Modified CSS files: /assets/css/theme/red.css
    • Modified CSS files: /assets/css/theme/orange.css
    • Modified CSS files: /assets/css/theme/purple.css
    • Modified CSS files: /assets/css/theme/black.css
  • NEW: Local Storage Panel Position
    • Modified Directory files: /assets/js/apps.js
    • Modified Directory files: /assets/js/apps.min.js
  • NEW: Ionicons
    • Added HTML files: ui_ionicons.html
    • Added HTML files: page_with_ionicons.html
    • Added PLUGINS files: /assets/plugins/ionicons/
  • NEW: DataTables Plugins
    • Added HTML files: table_manage_autofill.html
    • Added HTML files: table_manage_colreorder.html
    • Added HTML files: table_manage_colvis.html
    • Added HTML files: table_manage_fixed_columns.html
    • Added HTML files: table_manage_fixed_header.html
    • Added HTML files: table_manage_keytable.html
    • Added HTML files: table_manage_responsive.html
    • Added HTML files: table_manage_scroller.html
    • Added HTML files: table_manage_tabletools.html
    • Updated PLUGINS files: /assets/plugins/DataTables/
  • NEW: Pace Loader Plugins
    • Modified HTML files: all html files
    • Added PLUGINS files: /assets/plugins/pace/
  • UPDATE: Bootstrap 3.2.0 to Bootstrap 3.3.1
    • Modified Directory files: /assets/plugins/bootstrap-3.2.0/ to /assets/plugins/bootstrap/
    • Modified CSS Files: /assets/plugins/bootstrap/css/bootstrap.min.js
    • Modified JS Files: /assets/plugins/bootstrap/js/bootstrap.min.js
  • UPDATE: jQuery 1.8.2 to jQuery 1.9.1
    • Modified Directory files: /assets/plugins/jquery-1.8.1/ to /assets/plugins/jquery
    • Added JS Files: /assets/plugins/jquery/jquery-1.9.1.js
    • Added JS Files: /assets/plugins/jquery/jquery-1.9.1.min.js
    • Added JS Files: /assets/plugins/jquery/jquery-migrate-1.1.0.js
    • Added JS Files: /assets/plugins/jquery/jquery-migrate-1.1.0.min.js
  • MODIFY: FontAwesome Directory
    • Modified Directory files: /assets/plugins/font-awesome-4.2.0/ to /assets/plugins/font-awesome/
  • FIX: IE8 Font Rendering Issue
    • Modified Directory files: /assets/css/style.css
    • Modified Directory files: /assets/css/style.min.css
  • FIX: Google Chrome Fixed Element Rendering Issue
    • Modified Directory files: /assets/css/style.css
    • Modified Directory files: /assets/css/style.min.css
Version 1.4.0 - 17 September 2014
  • NEW: Front end one page parallax page Added
    • Added HTML files: /frontend/one-page-parallax/index.html
    • Added HTML files: /frontend/one-page-parallax/index_inverse_header.html
    • Added HTML files: /frontend/one-page-parallax/index_default_header.html
    • Added HTML files: /frontend/one-page-parallax/extra-element.html
  • NEW: Email Inbox v2 page Added
    • Added HTML files: email_inbox_v2.html
  • NEW: Email Compose v2 page Added
    • Added HTML files: email_compose.html
  • NEW: Email Detail v2 page Added
    • Added HTML files: email_detail.html
  • NEW: LESS file Added
    • Added LESS files: assets/less
  • NEW: Added Meta Setting to Disable Mobile Zooming
    • Modified HTML files: ALL
  • FIX: Accordion Styling Overflow
    • Modified css files: assets/css/style.css
    • Modified css files: assets/css/style.min.css
  • FIX: Mobile Slimscroll Scrolling Speed
    • Modified js files: assets/js/apps.js
    • Modified js files: assets/js/apps.min.js
  • FIX: Mobile Sidebar Click Event
    • Modified js files: assets/js/apps.js
    • Modified js files: assets/js/apps.min.js
Version 1.3.0 - 30 August 2014
  • NEW: Dashboard v2 Page
    • Added new html files: dashboard_v2.html
    • Modified css files: assets/css/style.css
    • Modified css files: assets/css/style.min.css
  • NEW: Simple Line Icons Page
    • Added new html files: ui_simple_line_icons.html
    • Added new plugins files: assets/plugins/simple-line-icons
  • NEW: Morris Chart Page
    • Added new html files: chart_morris.html
    • Added new plugins files: assets/plugins/morris
  • NEW: Page with Line Icons
    • Added new html files: page_with_line_icons.html
  • NEW: Full Height Content Page
    • Added new html files: page_full_height.html
    • Modified css files: assets/css/style.css
    • Modified css files: assets/css/style.min.css
    • Modified css files: assets/css/style-responsive.css
    • Modified css files: assets/css/style-responsive.min.css
  • NEW: CSS Helper Page
    • Added new html files: helper_css.html
  • NEW: Gallery v2 Page
    • Added new html files: gallery_v2.html
    • Modified css files: assets/css/style.css
    • Modified css files: assets/css/style.min.css
    • Modified css files: assets/css/style-responsive.css
    • Modified css files: assets/css/style-responsive.min.css
    • Added new plugins files: assets/plugins/superbox
  • UPDATE: FontAwesome from 4.1.0 to 4.2.0
    • Modified css files: assets/css/style.css
    • Modified css files: assets/css/style.min.css
  • CHANGE: chart.html to flot-chart.html
  • CHANGE: .widget-states to .widget-stats
    • Modified css files: assets/css/style.css
    • Modified css files: assets/css/style.min.css
  • FIX: Typo on Sidebar Link Url
    • Modified html files: all html files
  • FIX: Minified Sidebar on Tablet
    • Modified js file: assets/js/apps.js
    • Modified js file: assets/js/apps.min.js
Version 1.2.0 - 15 June 2014
  • NEW: 5 Color Theme
    • Modified html files: all html files
    • Added new css file: assets/css/theme/default.html
    • Added new css file: assets/css/theme/blue.html
    • Added new css file: assets/css/theme/red.html
    • Added new css file: assets/css/theme/orange.html
    • Added new css file: assets/css/theme/purple.html
    • Added new css file: assets/css/theme/black.html
    • Added new css file: assets/css/style.css
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • NEW: Inverse & Default Top Navigation Theme
    • Modified html files: all html files
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • NEW: Sidebar Grid Layout Option
    • Modified html files: all html files
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • NEW: Theme Panel
    • Modified html files: all html files
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • NEW: Sidebar & Header Default & Fixed Option
    • Modified html files: all html files
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • NEW: Page With Two Sidebar
    • Added new html files: page_with_two_sidebar.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
    • Modified js file: assets/js/apps.js
    • Modified js file: assets/js/apps.min.js
  • NEW: Login V2
    • Added new html files: login_v2.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
    • Modified js file: assets/js/apps.js
    • Modified js file: assets/js/apps.min.js
  • NEW: X-Editable
    • Added new html files: form_editable.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • NEW: Multiple File Upload
    • Added new html files: form_multiple_upload.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • NEW: Form Slider + Switcher Page
    • Added new html files: form_slider_switcher.html
    • Added new plugins file: assets/plugins/switchery
  • NEW: Wizards + Validation Page
    • Added new html files: form_wizards_validation.html
    • Updated plugins file: assets/plugins/parsley
  • UPDATE: Plugins Parsley 2.0
    • Updated html files: form_wizards.html
    • Updated plugins file: assets/plugins/parsley
  • UI: Dashboard widget state & line chart improvement
    • Modified html files: index.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • FIX: Mobile Top Navigation Fixed Top
    • Modified html files: all html files
    • Modified css file: assets/css/style-responsive.css
    • Modified css file: assets/css/style-responsive.min.css
  • FIX: Mobile Sidebar Fixed Right Position
    • Modified html files: all html files
    • Modified css file: assets/css/style-responsive.css
    • Modified css file: assets/css/style-responsive.min.css
  • FIX: Panel Remove Action Tooltip
    • Modified js file: assets/js/apps.js
    • Modified js file: assets/js/apps.min.js
  • FIX: Mozilla Firefox Sidebar Minimized
    • Modified js file: assets/js/apps.js
    • Modified js file: assets/js/apps.min.js
  • FIX: Sidebar DOM Element Didn't Functioning
    • Modified js file: assets/js/apps.js
    • Modified js file: assets/js/apps.min.js
  • FIX: Sidebar Uncollapsed Sub Menu After Minify
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • FIX: Old Browser Transparent Background Styling Support
    • Added new folder: assets/img/transparent/
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css

 

Version 1.1.0 – 30 May 2014
  • NEW: Email Template
    • Added new html file: email_system.html
    • Added new html file: email_newsletter.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • NEW: Timeline Page
    • Added new html file: extra_timeline.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
    • Modified css file: assets/css/style-responsive.css
    • Modified css file: assets/css/style-responsive.min.css
  • NEW: Coming Soon Page
    • Added new html file: extra_coming_soon.html
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
    • Modified css file: assets/css/style-responsive.css
    • Modified css file: assets/css/style-responsive.min.css
  • FIX: Sidebar Sub Menu Caret Styling
    • Modified html files: all html files
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • FIX: Modal Backdrop Opacity
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • FIX: Login form in mobile landscape view
    • Modified css file: assets/css/style.css
    • Modified css file: assets/css/style.min.css
  • FIX: Mobile View Search Box in header
    • Modified html files: all html files
    • Modified css file: assets/css/style-responsive.css
    • Modified css file: assets/css/style-responsive.min.css
  • FIX: Icon page broken on mobile
    • Modified file: ui_icons.html
  • FIX: Dashboard Tab Panel on mobile
    • Modified html files: index.html
    • Modified css file: assets/css/style-responsive.css
    • Modified css file: assets/css/style-responsive.min.css