Documentation | μAdmin - Responsive Multi-Style Admin Template

# μAdmin - Responsive Multi-Style Admin Template

#### Version 1.2 Documentation

### 1. Overview

μAdmin is The Ultimate Responsive Admin Template.

μAdmin built on Bootstrap 3.1 Framework with full responsive technique. It's a multiform template with two style and more than 20 color themes, so you can use μAdmin for many types of web applications like custom admin panel, admin dashboard, application backend, etc.

μAdmin have many kind of Transition effects, UI Element and components to make your application excited and professional. Beside it, Charts option included will provide many ideas for you to update status of business continuously.

Enjoy using μAdmin and stay tuned information. If you have any suggestion, contact with us admin@swlabs.co

New features will be coming soon in future.

Author: | Swlabs
Contact: | admin@swlabs.co
Create on: | 12/06/2014

Live Preview Purchase

### 2. Template Structure

Template Structure includes `Top Bar`, `Top Menu`, `Sidebar Menu`, `Content`, `Footer`

#### Page Head

Page head contains title, metadata, css.

    <head><title>Dashboard | Dashboard</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="images/icons/favicon.ico">
        <link rel="apple-touch-icon" href="images/icons/favicon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png">
        <!--Loading bootstrap css-->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
        <link type="text/css" rel="stylesheet" href="vendors/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css">
        <link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
        <link type="text/css" rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css">
        <!--LOADING SCRIPTS FOR PAGE-->
        <link type="text/css" rel="stylesheet" href="vendors/jquery-news-ticker/jquery.news-ticker.css">
        <link type="text/css" rel="stylesheet" href="vendors/calendar/zabuto_calendar.min.css">
        <!--Loading style vendors-->
        <link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css">
        <link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">
        <link type="text/css" rel="stylesheet" href="vendors/iCheck/skins/all.css">
        <link type="text/css" rel="stylesheet" href="vendors/jquery-news-ticker/jquery.news-ticker.css">
        <!--Loading style-->
        <link type="text/css" rel="stylesheet" href="css/themes/style1/green-dark.css" id="theme-change" class="style-change color-change">
        <link type="text/css" rel="stylesheet" href="css/style-responsive.css">
    </head>

#### Top Bar

Top Bar contains logo, dashboard style, form search, top menu.

    <nav id="topbar" role="navigation" style="margin-bottom: 0;" class="navbar navbar-default navbar-static-top">
       <div class="navbar-header">
          <button type="button" data-toggle="collapse" data-target=".sidebar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
          <a id="logo" href="index.html" class="navbar-brand"><span class="fa fa-rocket"></span><span class="logo-text">µAdmin</span></a>
       </div>
       <div class="topbar-main">
          <a id="menu-toggle" href="#" class="hidden-xs"><i class="fa fa-bars"></i></a>
          <ul class="nav navbar-nav    ">
             <li class="active"><a href="index.html">Dashboard</a></li>
             <li>
                <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">Layouts
                &nbsp;<i class="fa fa-angle-down"></i></a>
                <ul class="dropdown-menu">
                   <li><a href="layout-left-sidebar.html">Left Sidebar</a></li>
                   <li><a href="layout-right-sidebar.html">Right Sidebar</a></li>
                   <li><a href="layout-left-sidebar-collasped.html">Left Sidebar Collasped</a></li>
                   <li><a href="layout-right-sidebar-collasped.html">Right Sidebar Collasped</a></li>
                   <li class="dropdown-submenu">
                      <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">More Options</a>
                      <ul class="dropdown-menu">
                         <li><a href="#">Second level link</a></li>
                         <li class="dropdown-submenu">
                            <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">More Options</a>
                            <ul class="dropdown-menu">
                               <li><a href="#">Third level link</a></li>
                               <li><a href="#">Third level link</a></li>
                               <li><a href="#">Third level link</a></li>
                               <li><a href="#">Third level link</a></li>
                               <li><a href="#">Third level link</a></li>
                            </ul>
                         </li>
                         <li><a href="#">Second level link</a></li>
                      </ul>
                   </li>
                </ul>
             </li>
             <li class="mega-menu-dropdown">
                <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">UI Elements
                &nbsp;<i class="fa fa-angle-down"></i></a>
                <ul class="dropdown-menu">
                   <li>
                      <div class="mega-menu-content">
                         <div class="row">
                            <ul class="col-md-4 mega-menu-submenu">
                               <li>
                                  <h3>Neque porro quisquam</h3>
                               </li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a></li>
                            </ul>
                            <ul class="col-md-4 mega-menu-submenu">
                               <li>
                                  <h3>Neque porro quisquam</h3>
                               </li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a></li>
                            </ul>
                            <ul class="col-md-4 mega-menu-submenu">
                               <li>
                                  <h3>Neque porro quisquam</h3>
                               </li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a></li>
                               <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a></li>
                            </ul>
                         </div>
                      </div>
                   </li>
                </ul>
             </li>
             <li class="mega-menu-dropdown mega-menu-full">
                <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">Extras
                &nbsp;<i class="fa fa-angle-down"></i></a>
                <ul class="dropdown-menu">
                   <li>
                      <div class="mega-menu-content">
                         <div class="row">
                            <div class="col-md-7">
                               <ul class="col-md-4 mega-menu-submenu">
                                  <li>
                                     <h3>Neque porro quisquam</h3>
                                  </li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a></li>
                               </ul>
                               <ul class="col-md-4 mega-menu-submenu">
                                  <li>
                                     <h3>Neque porro quisquam</h3>
                                  </li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a></li>
                               </ul>
                               <ul class="col-md-4 mega-menu-submenu">
                                  <li>
                                     <h3>Neque porro quisquam</h3>
                                  </li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a></li>
                                  <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a></li>
                               </ul>
                            </div>
                            <div class="col-md-5 document-demo">
                               <ul class="col-md-4 mega-menu-submenu">
                                  <li><a href="#"><i class="fa fa-info-circle"></i><span>Introduction</span></a></li>
                                  <li><a href="#"><i class="fa fa-download"></i><span>Installation</span></a></li>
                               </ul>
                               <ul class="col-md-4 mega-menu-submenu">
                                  <li><a href="#"><i class="fa fa-cog"></i><span>T3 Settings</span></a></li>
                                  <li><a href="#"><i class="fa fa-desktop"></i><span>Layout System</span></a></li>
                               </ul>
                               <ul class="col-md-4 mega-menu-submenu">
                                  <li><a href="#"><i class="fa fa-magic"></i><span>Customization</span></a></li>
                                  <li><a href="#"><i class="fa fa-question-circle"></i><span>FAQs</span></a></li>
                               </ul>
                            </div>
                         </div>
                      </div>
                   </li>
                </ul>
             </li>
          </ul>
          <form id="topbar-search" action="" method="" class="hidden-sm hidden-xs">
             <div class="input-icon right"><a href="#"><i class="fa fa-search"></i></a><input type="text" placeholder="Search here..." class="form-control"/></div>
          </form>
          <div class="news-update-box hidden-xs">
             <span class="text-uppercase mrm pull-left">News:</span>
             <ul id="news-update" class="ticker list-unstyled">
                <li>Welcome to μAdmin - Responsive Multi-Style Admin Template</li>
                <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.</li>
             </ul>
          </div>
          <ul class="nav navbar-top-links navbar-right">
             <li class="dropdown">
                <a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-bell fa-fw"></i><span class="badge badge-green">3</span></a>
                <ul class="dropdown-menu dropdown-alerts">
                   <li>
                      <p>You have 14 new notifications</p>
                   </li>
                   <li>
                      <div class="dropdown-slimscroll">
                         <ul>
                            <li><a href="#"><span class="label label-blue"><i class="fa fa-comment"></i></span>New Comment<span class="pull-right text-muted small">4 mins ago</span></a></li>
                            <li><a href="#"><span class="label label-violet"><i class="fa fa-twitter"></i></span>3 New Followers<span class="pull-right text-muted small">12 mins ago</span></a></li>
                            <li><a href="#"><span class="label label-pink"><i class="fa fa-envelope"></i></span>Message Sent<span class="pull-right text-muted small">15 mins ago</span></a></li>
                            <li><a href="#"><span class="label label-green"><i class="fa fa-tasks"></i></span>New Task<span class="pull-right text-muted small">18 mins ago</span></a></li>
                            <li><a href="#"><span class="label label-yellow"><i class="fa fa-upload"></i></span>Server Rebooted<span class="pull-right text-muted small">19 mins ago</span></a></li>
                            <li><a href="#"><span class="label label-green"><i class="fa fa-tasks"></i></span>New Task<span class="pull-right text-muted small">2 days ago</span></a></li>
                            <li><a href="#"><span class="label label-pink"><i class="fa fa-envelope"></i></span>Message Sent<span class="pull-right text-muted small">5 days ago</span></a></li>
                         </ul>
                      </div>
                   </li>
                   <li class="last"><a href="#" class="text-right">See all alerts</a></li>
                </ul>
             </li>
             <li class="dropdown">
                <a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-envelope fa-fw"></i><span class="badge badge-orange">7</span></a>
                <ul class="dropdown-menu dropdown-messages">
                   <li>
                      <p>You have 14 new messages</p>
                   </li>
                   <li>
                      <div class="dropdown-slimscroll">
                         <ul>
                            <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">Jessica Spencer</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                            <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith<span class="label label-blue pull-right">New</span></span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                            <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Doe<span class="label label-orange pull-right">10 min</span></span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                            <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                            <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                         </ul>
                      </div>
                   </li>
                   <li class="last"><a href="#">Read all messages</a></li>
                </ul>
             </li>
             <li class="dropdown">
                <a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-tasks fa-fw"></i><span class="badge badge-yellow">8</span></a>
                <ul class="dropdown-menu dropdown-tasks">
                   <li>
                      <p>You have 14 pending tasks</p>
                   </li>
                   <li>
                      <div class="dropdown-slimscroll">
                         <ul>
                            <li>
                               <a href="#">
                                  <span class="task-item">Fix the HTML code<small class="pull-right text-muted">40%</small></span>
                                  <div class="progress progress-sm">
                                     <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;" class="progress-bar progress-bar-orange"><span class="sr-only">40% Complete (success)</span></div>
                                  </div>
                               </a>
                            </li>
                            <li>
                               <a href="#">
                                  <span class="task-item">Make a wordpress theme<small class="pull-right text-muted">60%</small></span>
                                  <div class="progress progress-sm">
                                     <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" class="progress-bar progress-bar-blue"><span class="sr-only">60% Complete (success)</span></div>
                                  </div>
                               </a>
                            </li>
                            <li>
                               <a href="#">
                                  <span class="task-item">Convert PSD to HTML<small class="pull-right text-muted">55%</small></span>
                                  <div class="progress progress-sm">
                                     <div role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;" class="progress-bar progress-bar-green"><span class="sr-only">55% Complete (success)</span></div>
                                  </div>
                               </a>
                            </li>
                            <li>
                               <a href="#">
                                  <span class="task-item">Convert HTML to Wordpress<small class="pull-right text-muted">78%</small></span>
                                  <div class="progress progress-sm">
                                     <div role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%;" class="progress-bar progress-bar-yellow"><span class="sr-only">78% Complete (success)</span></div>
                                  </div>
                               </a>
                            </li>
                         </ul>
                      </div>
                   </li>
                   <li class="last"><a href="#">See all tasks</a></li>
                </ul>
             </li>
             <li class="dropdown topbar-user">
                <a data-hover="dropdown" href="#" class="dropdown-toggle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/>&nbsp;<span>John Doe</span>&nbsp;<span class="caret"></span></a>
                <ul class="dropdown-menu dropdown-user pull-right">
                   <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="email-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="extra-lock-screen.html"><i class="fa fa-lock"></i>Lock Screen</a></li>
                   <li><a href="extra-signin.html"><i class="fa fa-key"></i>Log Out</a></li>
                </ul>
             </li>
             <li id="topbar-chat" class="hidden-xs"><a href="javascript:void(0)" class="btn-chat"><i class="fa fa-comments"></i><span class="badge badge-info">3</span></a></li>
          </ul>
       </div>
    </nav>

#### Sidebar Menu

Sidebar Menu contains main navigation menu.

    <nav id="sidebar" role="navigation" class="navbar-default navbar-static-side">
                <div class="sidebar-collapse menu-scroll">
                    <ul id="side-menu" class="nav">
                        <li class="user-panel">
                            <div class="thumb"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" alt="" class="img-circle"/></div>
                            <div class="info"><p>John Doe</p>
                                <ul class="list-inline list-unstyled">
                                    <li><a href="extra-profile.html" data-hover="tooltip" title="Profile"><i class="fa fa-user"></i></a></li>
                                    <li><a href="email-inbox.html" data-hover="tooltip" title="Mail"><i class="fa fa-envelope"></i></a></li>
                                    <li><a href="#" data-hover="tooltip" title="Setting" data-toggle="modal" data-target="#modal-config"><i class="fa fa-cog"></i></a></li>
                                    <li><a href="extra-signin.html" data-hover="tooltip" title="Logout"><i class="fa fa-sign-out"></i></a></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li class="active"><a href="index.html"><i class="fa fa-tachometer fa-fw"></i><span class="menu-title">Dashboard</span><span class="badge badge-yellow">3</span></a></li>
                        <li><a href="#"><i class="fa fa-desktop fa-fw"></i><span class="menu-title">Layouts</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="layout-left-sidebar.html"><i class="fa fa-align-left"></i><span class="submenu-title">Left Sidebar</span></a></li>
                                <li><a href="layout-left-sidebar-collapsed.html"><i class="fa fa-angle-double-left"></i><span class="submenu-title">Left Sidebar Collapsed</span></a></li>
                                <li><a href="layout-right-sidebar.html"><i class="fa fa-align-right"></i><span class="submenu-title">Right Sidebar</span></a></li>
                                <li><a href="layout-right-sidebar-collapsed.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Right Sidebar Collapsed</span></a></li>
                                <li><a href="layout-horizontal-menu.html"><i class="fa fa-header"></i><span class="submenu-title">Horizontal Menu</span></a></li>
                                <li><a href="layout-horizontal-menu-sidebar.html"><i class="fa fa-h-square"></i><span class="submenu-title">Horizontal Menu & Sidebar</span></a></li>
                                <li><a href="layout-fixed-topbar.html"><i class="fa fa-magnet"></i><span class="submenu-title">Fixed Topbar</span></a></li>
                                <li><a href="layout-boxed.html"><i class="fa fa-columns"></i><span class="submenu-title">Boxed Layout</span></a></li>
                                <li><a href="layout-hidden-footer.html"><i class="fa fa-eye-slash"></i><span class="submenu-title">Hidden Footer</span></a></li>
                                <li><a href="layout-header-topbar.html"><i class="fa fa-paperclip"></i><span class="submenu-title">Header & Topbar</span></a></li>
                                <li><a href="layout-title-breadcrumb.html"><i class="fa fa-link"></i><span class="submenu-title">Title & Breadcrumb</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-send-o fa-fw"></i><span class="menu-title">UI Elements</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="ui-generals.html"><i class="fa fa-briefcase"></i><span class="submenu-title">Generals</span></a></li>
                                <li><a href="ui-panels.html"><i class="fa fa-th-large"></i><span class="submenu-title">Panels</span></a></li>
                                <li><a href="ui-buttons.html"><i class="fa fa-hand-o-up"></i><span class="submenu-title">Buttons</span></a></li>
                                <li><a href="ui-tabs.html"><i class="fa fa-trello"></i><span class="submenu-title">Tabs</span></a></li>
                                <li><a href="ui-progressbars.html"><i class="fa fa-ellipsis-h"></i><span class="submenu-title">Progress Bars</span></a></li>
                                <li><a href="ui-editors.html"><i class="fa fa-edit"></i><span class="submenu-title">Editors</span></a></li>
                                <li><a href="ui-typography.html"><i class="fa fa-font"></i><span class="submenu-title">Typography</span></a></li>
                                <li><a href="ui-modals.html"><i class="fa fa-list-alt"></i><span class="submenu-title">Modals</span></a></li>
                                <li><a href="ui-sliders.html"><i class="fa fa-arrows-h"></i><span class="submenu-title">Sliders</span></a></li>
                                <li><a href="ui-nestable-list.html"><i class="fa fa-list-ol"></i><span class="submenu-title">Nestable List</span></a></li>
                                <li><a href="ui-icons.html"><i class="fa fa-tint"></i><span class="submenu-title">Icons</span></a></li>
                                <li><a href="ui-notific8-notifications.html"><i class="fa fa-exclamation-circle"></i><span class="submenu-title">Notific8 Notifications</span></a></li>
                                <li><a href="ui-toastr-notifications.html"><i class="fa fa-exclamation-triangle"></i><span class="submenu-title">Toastr Notifications</span></a></li>
                                <li><a href="ui-checkbox-radio.html"><i class="fa fa-dot-circle-o"></i><span class="submenu-title">Checkbox & Radio</span></a></li>
                                <li><a href="ui-treeview.html"><i class="fa fa-tasks"></i><span class="submenu-title">Tree View</span></a></li>
                                <li><a href="ui-portlets.html"><i class="fa fa-instagram"></i><span class="submenu-title">Portlets</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-edit fa-fw"></i><span class="menu-title">Forms</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="form-layouts.html"><i class="fa fa-columns"></i><span class="submenu-title">Form Layouts</span></a></li>
                                <li><a href="form-basic.html"><i class="fa fa-file-text-o"></i><span class="submenu-title">Form Basics</span></a></li>
                                <li><a href="form-components.html"><i class="fa fa-cubes"></i><span class="submenu-title">Form Components</span></a></li>
                                <li><a href="form-wizard.html"><i class="fa fa-magic"></i><span class="submenu-title">From Wizard</span></a></li>
                                <li><a href="form-validation.html"><i class="fa fa-exclamation"></i><span class="submenu-title">Form Validation</span></a></li>
                                <li><a href="form-multiple-file-upload.html"><i class="fa fa-upload"></i><span class="submenu-title">Multiple File Upload</span></a></li>
                                <li><a href="form-dropzone-file-upload.html"><i class="fa fa-cloud-upload"></i><span class="submenu-title">Dropzone File Upload</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-th-list fa-fw"></i><span class="menu-title">Tables</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="table-basic.html"><i class="fa fa-th-large"></i><span class="submenu-title">Basic Tables</span></a></li>
                                <li><a href="table-responsive.html"><i class="fa fa-tablet"></i><span class="submenu-title">Responsive Tables</span></a></li>
                                <li><a href="table-action.html"><i class="fa fa-tencent-weibo"></i><span class="submenu-title">Action Tables</span></a></li>
                                <li><a href="table-filter.html"><i class="fa fa-filter"></i><span class="submenu-title">Filter Tables</span></a></li>
                                <li><a href="table-advanced.html"><i class="fa fa-indent"></i><span class="submenu-title">Advanced Tables</span></a></li>
                                <li><a href="table-sample.html"><i class="fa fa-table"></i><span class="submenu-title">Sample Tables</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-file-o fa-fw"></i><span class="menu-title">Pages</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="page-gallery.html"><i class="fa fa-suitcase"></i><span class="submenu-title">Gallery</span></a></li>
                                <li><a href="page-timeline.html"><i class="fa fa-steam"></i><span class="submenu-title">Timeline</span></a></li>
                                <li><a href="page-blog.html"><i class="fa fa-puzzle-piece"></i><span class="submenu-title">Blog</span></a></li>
                                <li><a href="page-blog-item.html"><i class="fa fa-chain"></i><span class="submenu-title">Blog Item</span></a></li>
                                <li><a href="page-about.html"><i class="fa fa-group"></i><span class="submenu-title">About Us</span></a></li>
                                <li><a href="page-contact.html"><i class="fa fa-send-o"></i><span class="submenu-title">Contact Us</span></a></li>
                                <li><a href="page-calendar.html"><i class="fa fa-calendar"></i><span class="submenu-title">Full Calendar</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-gift fa-fw"></i><span class="menu-title">Extras</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="extra-profile.html"><i class="fa fa-user"></i><span class="submenu-title">User Profile</span></a></li>
                                <li><a href="extra-signin.html"><i class="fa fa-sign-in"></i><span class="submenu-title">Sign In</span></a></li>
                                <li><a href="extra-signup.html"><i class="fa fa-sign-out"></i><span class="submenu-title">Sign Up</span></a></li>
                                <li><a href="extra-lock-screen.html"><i class="fa fa-lock"></i><span class="submenu-title">Lock Screen</span></a></li>
                                <li><a href="extra-invoice.html"><i class="fa fa-print"></i><span class="submenu-title">Invoice</span></a></li>
                                <li><a href="extra-faq.html"><i class="fa fa-graduation-cap"></i><span class="submenu-title">FAQ</span></a></li>
                                <li><a href="extra-pricing-table.html"><i class="fa fa-money"></i><span class="submenu-title">Pricing Tables</span></a></li>
                                <li><a href="extra-blank.html"><i class="fa fa-file-o"></i><span class="submenu-title">Blank</span></a></li>
                                <li><a href="extra-404.html"><i class="fa fa-exclamation-circle"></i><span class="submenu-title">404 Page</span></a></li>
                                <li><a href="extra-500.html"><i class="fa fa-exclamation-circle"></i><span class="submenu-title">500 Page</span></a></li>
                                <li><a href="javascript:void(0)" title="FullScreen" class="btn-fullscreen"><i class="fa fa-arrows"></i><span class="submenu-title">Full Screen</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-sitemap fa-fw"></i><span class="menu-title">Multi-Level Dropdown</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="#"><i class="fa fa-angle-right"></i><span class="submenu-title">Second Level Item</span></a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i><span class="submenu-title">Second Level Item</span></a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i><span class="submenu-title">Third Level</span><span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li><a href="#"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Third Level Item</span></a></li>
                                        <li><a href="#"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Third Level Item</span></a></li>
                                        <li><a href="#"><i class="fa fa-angle-double-right"></i><span class="submenu-title"> Third Level Item</span></a></li>
                                        <li><a href="#"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Third Level Item</span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-envelope-o"></i><span class="menu-title">Email</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="email-inbox.html"><i class="fa fa-inbox"></i><span class="submenu-title">Inbox</span></a></li>
                                <li><a href="email-compose-mail.html"><i class="fa fa-pencil"></i><span class="submenu-title">Compose Mail</span></a></li>
                                <li><a href="email-view-mail.html"><i class="fa fa-eye"></i><span class="submenu-title">View Mail</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-bar-chart-o fa-fw"></i><span class="menu-title">Charts</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="charts-flotchart.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Flot Charts</span></a></li>
                                <li><a href="charts-chartjs.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Chartjs</span></a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i><span class="submenu-title">HighCharts</span><span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li><a href="charts-highchart-line.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Line Charts</span></a></li>
                                        <li><a href="charts-highchart-area.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Area Charts</span></a></li>
                                        <li><a href="charts-highchart-column-bar.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Column & Bar Charts</span></a></li>
                                        <li><a href="charts-highchart-pie.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Pie Charts</span></a></li>
                                        <li><a href="charts-highchart-scatter-bubble.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Scatter & Bubble Charts</span></a></li>
                                        <li><a href="charts-highchart-dynamic.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Dynamic Charts</span></a></li>
                                        <li><a href="charts-highchart-combinations.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Combinations</span></a></li>
                                        <li><a href="charts-highchart-more.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">More Chart Types</span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="animations.html"><i class="fa fa-slack fa-fw"></i><span class="menu-title">Animations</span></a></li>
                    </ul>
                </div>
            </nav>

#### Content

Content includes page title, breadcrumbs, page's main body and footer.

    <div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
        <div class="page-header pull-left">
            <div class="page-title">Dashboard</div>
        </div>
        <ol class="breadcrumb page-breadcrumb pull-right">
            <li><i class="fa fa-home"></i>&nbsp;<a href="index.html">Home</a>&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;&nbsp;</li>
            <li class="hidden"><a href="#">Dashboard</a>&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;&nbsp;</li>
            <li class="active">Dashboard</li>
        </ol>
        <div class="clearfix"></div>
    </div>
    <div class="page-content"></div>
    <div id="footer">
        <div class="copyright">2014 © &mu;Admin - Responsive Multi-Style Admin Template</div>
    </div>

#### End Body - Javascript

Javascript files loaded in the end of page.

    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <!--loading bootstrap js-->
    <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="vendors/metisMenu/jquery.metisMenu.js"></script>
    <script src="vendors/slimScroll/jquery.slimscroll.js"></script>
    <script src="vendors/jquery-cookie/jquery.cookie.js"></script>
    <script src="vendors/iCheck/icheck.min.js"></script>
    <script src="vendors/iCheck/custom.min.js"></script>
    <script src="vendors/jquery-news-ticker/jquery.news-ticker.js"></script>
    <script src="js/jquery.menu.js"></script>
    <script src="vendors/jquery-pace/pace.min.js"></script>
    <script src="vendors/holder/holder.js"></script>
    <!--LOADING SCRIPTS FOR PAGE-->
    <script src="vendors/flot-chart/jquery.flot.js"></script>
    <script src="vendors/flot-chart/jquery.flot.categories.js"></script>
    <script src="vendors/flot-chart/jquery.flot.pie.js"></script>
    <script src="vendors/flot-chart/jquery.flot.tooltip.js"></script>
    <script src="vendors/flot-chart/jquery.flot.resize.js"></script>
    <script src="vendors/flot-chart/jquery.flot.fillbetween.js"></script>
    <script src="vendors/flot-chart/jquery.flot.stack.js"></script>
    <script src="vendors/flot-chart/jquery.flot.spline.js"></script>
    <script src="vendors/jquery-news-ticker/jquery.news-ticker.js"></script>
    <script src="vendors/calendar/zabuto_calendar.min.js"></script>
    <script src="js/index.js"></script>
    <!--CORE JAVASCRIPT-->
    <script src="js/main.js"></script>

#### HTML Code Comment Sample

    <!--BEGIN PAGE WRAPPER-->
    <div id="page-wrapper"><!--BEGIN TITLE & BREADCRUMB PAGE-->
    <div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
        <div class="page-header pull-left">
            <div class="page-title">Dashboard</div>
        </div>
        <ol class="breadcrumb page-breadcrumb pull-right">
            <li><i class="fa fa-home"></i>&nbsp;<a href="index.html">Home</a>&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;&nbsp;</li>
            <li class="hidden"><a href="#">Dashboard</a>&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;&nbsp;</li>
            <li class="active">Dashboard</li>
        </ol>
        <div class="clearfix"></div>
    </div>
    <!--END TITLE & BREADCRUMB PAGE--><!--BEGIN CONTENT-->
    <div class="page-content">
    </div>
    <div id="footer">
            <div class="copyright">2014 © &mu;Admin - Responsive Multi-Style Admin Template</div>
        </div>
        <!--END FOOTER--></div>
    <!--END PAGE WRAPPER--></div>

#### CSS Code Comment Sample

    /**************************/
    /******* Wrapper *********/
    #wrapper {
        width: 100%;
        background: #141d25;
    }
    #page-wrapper {
        padding: 0 !important;
        background-color: #f0f2f5;
        transition: 0.3s all linear;
    }
    @media (min-width: 768px) {
        #page-wrapper {
            position: relative;
            margin: 0 0 0 250px;
            padding: 0;
        }
    }
    /******* Wrapper *********/
    /**************************/

#### Javascript Code Comment Sample

    /***********************************/
    /******* Carousel Customize *******/
    $('ul.list-indicators li').click(function(event) {
        event.preventDefault();
        $('ul.list-indicators li').removeClass('active');
        $(this).addClass('active');
    });
    $('.carousel-left').click(function(event) {
        event.preventDefault();
        var active = $('ul.list-indicators li.active');
        $('ul.list-indicators li').removeClass('active');
        active.prev().addClass('active');
    });
    $('.carousel-right').click(function(event) {
        event.preventDefault();
        var active = $('ul.list-indicators li.active');
        $('ul.list-indicators li').removeClass('active');
        active.next().addClass('active');
    });
    /******* Carousel Customize *******/
    /*********************************/

### 3. Fonts

μAdmin Admin Template uses Open Sans Font and Oswald Font from Google Fonts.

    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">

### 4. Theme Colors

μAdmin Admin Template has variable choice for your theme such as `red`,`orange`, `green`, `yellow`, `blue`, `violet`, `pink`, `grey`, `default`, `white`.

    <div id="theme-setting"><a href="#" data-toggle="dropdown" class="btn-theme-setting"><i class="fa fa-cog"></i></a>
            <div class="content-theme-setting"><h4 class="mtn">Theme Styles</h4><select id="list-style" class="form-control">
                <option value="style1">Flat Squared style</option>
                <option value="style2">Flat Rounded style</option>
            </select><br/><h4 class="mtn">Theme Colors</h4>
                <ul id="list-color" class="list-unstyled list-inline">
                    <li data-color="green-dark" data-hover="tooltip" title="Green - Dark" class="green-dark active"></li>
                    <li data-color="red-dark" data-hover="tooltip" title="Red - Dark" class="red-dark"></li>
                    <li data-color="pink-dark" data-hover="tooltip" title="Pink - Dark" class="pink-dark"></li>
                    <li data-color="blue-dark" data-hover="tooltip" title="Blue - Dark" class="blue-dark"></li>
                    <li data-color="yellow-dark" data-hover="tooltip" title="Yellow - Dark" class="yellow-dark"></li>
                    <li data-color="green-grey" data-hover="tooltip" title="Green - Grey" class="green-grey"></li>
                    <li data-color="red-grey" data-hover="tooltip" title="Red - Grey" class="red-grey"></li>
                    <li data-color="pink-grey" data-hover="tooltip" title="Pink - Grey" class="pink-grey"></li>
                    <li data-color="blue-grey" data-hover="tooltip" title="Blue - Grey" class="blue-grey"></li>
                    <li data-color="yellow-grey" data-hover="tooltip" title="Yellow - Grey" class="yellow-grey"></li>
                    <li data-color="yellow-green" data-hover="tooltip" title="Yellow - Green" class="yellow-green"></li>
                    <li data-color="orange-grey" data-hover="tooltip" title="Orange - Grey" class="orange-grey"></li>
                    <li data-color="pink-blue" data-hover="tooltip" title="Pink - Blue" class="pink-blue"></li>
                    <li data-color="pink-violet" data-hover="tooltip" title="Pink - Violet" class="pink-violet"></li>
                    <li data-color="orange-violet" data-hover="tooltip" title="Orange - Violet" class="orange-violet"></li>
                    <li data-color="pink-green" data-hover="tooltip" title="Pink - Green" class="pink-green"></li>
                    <li data-color="pink-brown" data-hover="tooltip" title="Pink - Brown" class="pink-brown"></li>
                    <li data-color="orange-blue" data-hover="tooltip" title="Orange - Blue" class="orange-blue"></li>
                    <li data-color="yellow-blue" data-hover="tooltip" title="Yellow - Blue" class="yellow-blue"></li>
                    <li data-color="green-blue" data-hover="tooltip" title="Green - Blue" class="green-blue"></li>
                </ul>
            </div>
        </div>

You can easily install theme with this code:

    <link type="text/css" rel="stylesheet" href="css/themes/default.css" id="color-style">

Example: Change Default Theme Color to Blue: `css/themes/default.css` to `css/themes/blue.css`

### 5. Top Bar

#### Top Menu

    <ul class="nav navbar-top-links navbar-right">
    <li class="dropdown"><a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-bell fa-fw"></i><span class="badge badge-green">3</span></a>
        <ul class="dropdown-menu dropdown-alerts">
            <li><p>You have 14 new notifications</p></li>
            <li>
                <div class="dropdown-slimscroll">
                    <ul>
                        <li><a href="#"><span class="label label-blue"><i class="fa fa-comment"></i></span>New Comment<span class="pull-right text-muted small">4 mins ago</span></a></li>
                        <li><a href="#"><span class="label label-violet"><i class="fa fa-twitter"></i></span>3 New Followers<span class="pull-right text-muted small">12 mins ago</span></a></li>
                        <li><a href="#"><span class="label label-pink"><i class="fa fa-envelope"></i></span>Message Sent<span class="pull-right text-muted small">15 mins ago</span></a></li>
                        <li><a href="#"><span class="label label-green"><i class="fa fa-tasks"></i></span>New Task<span class="pull-right text-muted small">18 mins ago</span></a></li>
                        <li><a href="#"><span class="label label-yellow"><i class="fa fa-upload"></i></span>Server Rebooted<span class="pull-right text-muted small">19 mins ago</span></a></li>
                        <li><a href="#"><span class="label label-green"><i class="fa fa-tasks"></i></span>New Task<span class="pull-right text-muted small">2 days ago</span></a></li>
                        <li><a href="#"><span class="label label-pink"><i class="fa fa-envelope"></i></span>Message Sent<span class="pull-right text-muted small">5 days ago</span></a></li>
                    </ul>
                </div>
            </li>
            <li class="last"><a href="#" class="text-right">See all alerts</a></li>
        </ul>
    </li>
    <li class="dropdown"><a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-envelope fa-fw"></i><span class="badge badge-orange">7</span></a>
        <ul class="dropdown-menu dropdown-messages">
            <li><p>You have 14 new messages</p></li>
            <li>
                <div class="dropdown-slimscroll">
                    <ul>
                        <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">Jessica Spencer</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                        <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith<span class="label label-blue pull-right">New</span></span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                        <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Doe<span class="label label-orange pull-right">10 min</span></span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                        <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                        <li><a href="#"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li>
                    </ul>
                </div>
            </li>
            <li class="last"><a href="#">Read all messages</a></li>
        </ul>
    </li>
    <li class="dropdown"><a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-tasks fa-fw"></i><span class="badge badge-yellow">8</span></a>
        <ul class="dropdown-menu dropdown-tasks">
            <li><p>You have 14 pending tasks</p></li>
            <li>
                <div class="dropdown-slimscroll">
                    <ul>
                        <li><a href="#"><span class="task-item">Fix the HTML code<small class="pull-right text-muted">40%</small></span>

                            <div class="progress progress-sm">
                                <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;" class="progress-bar progress-bar-orange"><span class="sr-only">40% Complete (success)</span></div>
                            </div>
                        </a></li>
                        <li><a href="#"><span class="task-item">Make a wordpress theme<small class="pull-right text-muted">60%</small></span>

                            <div class="progress progress-sm">
                                <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" class="progress-bar progress-bar-blue"><span class="sr-only">60% Complete (success)</span></div>
                            </div>
                        </a></li>
                        <li><a href="#"><span class="task-item">Convert PSD to HTML<small class="pull-right text-muted">55%</small></span>

                            <div class="progress progress-sm">
                                <div role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;" class="progress-bar progress-bar-green"><span class="sr-only">55% Complete (success)</span></div>
                            </div>
                        </a></li>
                        <li><a href="#"><span class="task-item">Convert HTML to Wordpress<small class="pull-right text-muted">78%</small></span>

                            <div class="progress progress-sm">
                                <div role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%;" class="progress-bar progress-bar-yellow"><span class="sr-only">78% Complete (success)</span></div>
                            </div>
                        </a></li>
                    </ul>
                </div>
            </li>
            <li class="last"><a href="#">See all tasks</a></li>
        </ul>
    </li>
    <li class="dropdown topbar-user"><a data-hover="dropdown" href="#" class="dropdown-toggle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/>&nbsp;<span>John Doe</span>&nbsp;<span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-user pull-right">
            <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="email-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="extra-lock-screen.html"><i class="fa fa-lock"></i>Lock Screen</a></li>
            <li><a href="extra-signin.html"><i class="fa fa-key"></i>Log Out</a></li>
        </ul>
    </li>
    <li id="topbar-chat" class="hidden-xs"><a href="javascript:void(0)" class="btn-chat"><i class="fa fa-comments"></i><span class="badge badge-info">3</span></a></li>
    </ul>

#### Search Form

    <form id="topbar-search" action="" method="" class="hidden-sm hidden-xs">
        <div class="input-icon right"><a href="#"><i class="fa fa-search"></i></a><input type="text" placeholder="Search here..." class="form-control"/></div>
    </form>

### 7. Core Stylesheet

`style-responsive.css` control layouts, components for mobile view (responsive).

    <link type="text/css" rel="stylesheet" href="css/style-responsive.css">

Two style and many color theme in each style. Example:

    <link type="text/css" rel="stylesheet" href="css/themes/style1/green-dark.css" id="theme-change" class="style-change color-change">

### 8. Javascript Plugins & Resources

Select Plugins or Resources:

#### Animate.css

`Animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css">

#### Javascript File

    ...

#### Demo

index.html

#### Home Page

http://daneden.github.io/animate.css

#### Bootstrap Clockface

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/bootstrap-clockface/css/clockface.css">

#### Javascript File

    <script src="vendors/bootstrap-clockface/js/clockface.js"></script>

#### Demo

form-components.html

#### Home Page

http://vitalets.github.io/clockface/

#### Bootstrap DatePicker

#### Css File

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

#### Javascript File

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

#### Demo

form-components.html

#### Home Page

http://www.eyecon.ro/bootstrap-datepicker/

#### Bootstrap DateRangePicker

#### Css File

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

#### Javascript File

    <script src="vendors/bootstrap-daterangepicker/daterangepicker.js"></script>

#### Demo

form-components.html

#### Home Page

https://github.com/dangrossman/bootstrap-daterangepicker

#### Bootstrap DateTimePicker

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">

#### Javascript File

    <script src="vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

#### Demo

form-components.html

#### Home Page

http://tarruda.github.io/bootstrap-datetimepicker/

#### Bootstrap-markdown

#### Css File

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

#### Javascript File

    <script src="vendors/bootstrap-markdown/js/bootstrap-markdown.js"></script>

#### Demo

ui-editors.html

#### Home Page

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

#### Bootstrap-progressbar

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.1.1.min.css">

#### Javascript File

    <script src="vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>

#### Demo

ui-progressbars.html

#### Home Page

http://www.minddust.com/bootstrap-progressbar/

#### Bootstrap-wysihtml5

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

#### Javascript File

    <script src="vendors/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>

#### Demo

ui-editors.html

#### Home Page

http://tarruda.github.io/bootstrap-datetimepicker/

#### Calendar

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/fullcalendar/fullcalendar.css">

#### Javascript File

    <script src="vendors/fullcalendar/fullcalendar.min.js"></script>

#### Demo

page-calendar.html

#### Chartjs

#### Javascript File

    <script src="vendors/chart.js/Chart.min.js"></script>

#### Demo

charts-chartjs.html

#### Home Page

http://www.chartjs.org/

#### Gmaps

ttyprint linenums"><link type="text/css" rel="stylesheet" href="vendors/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

#### Javascript File

    <script src="vendors/gmaps/gmaps.js"></script>

#### Demo

page-contact.html

#### Home Page

http://hpneo.github.io/gmaps/

#### iCheck

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/iCheck/skins/all.css">

#### Javascript File

    <script src="vendors/iCheck/icheck.min.js"></script>

#### Demo

ui-checkbox-radio.html

#### Home Page

http://tarruda.github.io/bootstrap-datetimepicker/

#### Bootstrap Hover Dropdown

#### Css File

    ...

#### Javascript File

    <script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>

#### Demo

index.html

#### Home Page

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

#### Bootstrap Switch

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/bootstrap-switch/css/bootstrap-switch.css">

#### Javascript File

    <script src="vendors/bootstrap-switch/js/bootstrap-switch.min.js"></script>

#### Demo

form-components.html

#### Home Page

http://www.bootstrap-switch.org/

#### Bootstrap TimePicker

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css">

#### Javascript File

    <script src="vendors/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>

#### Demo

form-components.html

#### Home Page

http://jdewit.github.io/bootstrap-timepicker/

#### rangeSlider

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/ion.rangeSlider/css/ion.rangeSlider.css">

#### Javascript File

    <script src="vendors/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>

#### Demo

ui-sliders.html

#### Home Page

http://andreruffert.github.io/rangeslider.js/

#### notific8

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/jquery-notific8/jquery.notific8.min.css">

#### Javascript File

    <script src="vendors/jquery-notific8/jquery.notific8.min.js"></script>

#### Demo

ui-notific8-notifications.html

#### Home Page

http://plugins.jquery.com/notific8/

#### steps

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/jquery-steps/css/jquery.steps.css">

#### Javascript File

    <script src="vendors/jquery-validate/jquery.validate.min.js"></script>

#### Demo

form-wizard.html

#### Home Page

http://www.jquery-steps.com/

#### tablesorter

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/jquery-tablesorter/themes/blue/style-custom.css">

#### Javascript File

    <script src="vendors/jquery-tablesorter/jquery.tablesorter.js"></script>

#### Demo

table-advanced.html

#### Home Page

http://tablesorter.com/

#### toastr

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/jquery-toastr/toastr.min.css">

#### Javascript File

    <script src="vendors/jquery-toastr/toastr.min.js"></script>

#### Demo

ui-toastr-notifications.html

#### Home Page

https://github.com/CodeSeven/toastr

#### treetable

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/jquery-treetable/stylesheets/jquery.treetable.css">

#### Javascript File

    <script src="vendors/jquery-treetable/javascripts/src/jquery.treetable.js"></script>

#### Demo

ui-treeview.html

#### Home Page

https://plugins.jquery.com/treetable//a>

#### lightbox

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/lightbox/css/lightbox.css">

#### Javascript File

    <script src="vendors/lightbox/js/lightbox.min.js"></script>

#### Demo

page-gallery.html

#### Home Page

https://www.lokeshdhakar.com/projects/lightbox2/?u=9

#### mixitup

#### Javascript File

    <script src="vendors/mixitup/src/jquery.mixitup.js"></script>

#### Demo

page-gallery.html

#### Home Page

https://mixitup.kunkalabs.com/

#### moment

#### Javascript File

    <script src="vendors/moment/moment.js"></script>

#### Demo

form-components.html

#### Home Page

https://momentjs.com/

#### nouislider

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/nouislider/jquery.nouislider.css">

#### Javascript File

    <script src="vendors/nouislider/jquery.nouislider.min.js"></script>

#### Demo

ui-sliders.html

#### Home Page

https://refreshless.com/nouislider/

#### summernote

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/summernote/summernote.css">

#### Javascript File

    <script src="vendors/summernote/summernote.js"></script>

#### Demo

ui-editors.html

#### Home Page

https://hackerwins.github.io/summernote/features.html

#### lightbox

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/lightbox/css/lightbox.css">

#### Javascript File

    <script src="vendors/lightbox/js/lightbox.min.js"></script>

#### Demo

page-gallery.html

#### Home Page

https://www.lokeshdhakar.com/projects/lightbox2/?u=9

#### Jquery Ckeditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.

#### Css File

    ...

#### Javascript File

    <script src="vendors/ckeditor/ckeditor.js"></script>

#### Demo

form-editors.html

#### Home Page

http://ckeditor.com/

#### Datatables

`Datatables` is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/datatables/css/dataTables.bootstrap.css">

#### Javascript File

    <script src="vendors/datatables/js/jquery.dataTables.js"></script>
    <script src="vendors/datatables/js/dataTables.bootstrap.js"></script>
    <script src="vendors/datatables/js/jquery.jeditable.js"></script>

#### Demo

table-editable.html

#### Home Page

https://datatables.net

#### Dropzone

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

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/dropzone/css/dropzone.css">

#### Javascript File

    <script src="vendors/dropzone/js/dropzone.js"></script>
    <script src="js/form-dropzone-file-upload.js"></script>

#### Demo

form-dropzone-file-upload.html

#### Home Page

http://www.dropzonejs.com

#### Flot Chart

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

#### Css File

    ...

#### Javascript File

    <script src="vendors/flot-chart/jquery.flot.js"></script>
    <script src="vendors/flot-chart/jquery.flot.categories.js"></script>
    <script src="vendors/flot-chart/jquery.flot.tooltip.js"></script>
    <script src="vendors/flot-chart/jquery.flot.resize.js"></script>
    <script src="vendors/flot-chart/jquery.flot.fillbetween.js"></script>
    <script src="vendors/flot-chart/jquery.flot.stack.js"></script>
    <script src="vendors/flot-chart/jquery.flot.spline.js"></script>

#### Demo

chart.html

#### Home Page

http://www.flotcharts.org

#### Font Awesome

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

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">

#### Javascript File

    ...

#### Demo

ui-icons.html

#### Home Page

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

#### FullCalendar

`Font Awesome` is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/fullcalendar/fullcalendar.css">
    <link type="text/css" rel="stylesheet" href="vendors/fullcalendar/fullcalendar.print.css">

#### Javascript File

    <script src="vendors/fullcalendar/fullcalendar.min.js"></script>

#### Demo

page-fullcalendar.html

#### Home Page

http://arshaw.com/fullcalendar

#### animateNumber

`animateNumber` is a jQuery numbers animation plugin, adds 'number' property and step function to jQuery's animate function properties.

#### Css File

    ...

#### Javascript File

    <script src="vendors/jquery-animateNumber/jquery.animateNumber.min.js"></script>

#### Demo

index.html

#### Home Page

http://aishek.github.io/jquery-animateNumber

#### Jquery Cookie

`Jquery Cookie` is a simple, lightweight jQuery plugin for reading, writing and deleting cookies.

#### Css File

    ...

#### Javascript File

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

#### Demo

index.html

#### Home Page

https://github.com/carhartl/jquery-cookie

#### Jquery File Upload

`Jquery File Upload` is File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

#### Css File

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

#### Javascript File

    <script src="vendors/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="vendors/jquery-file-upload/js/vendor/tmpl.min.js"></script>
    <script src="vendors/jquery-file-upload/js/vendor/load-image.min.js"></script>
    <script src="vendors/jquery-file-upload/js/vendor/canvas-to-blob.min.js"></script>
    <script src="vendors/jquery-file-upload/js/vendor/jquery.blueimp-gallery.min.js"></script>
    <script src="vendors/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="vendors/jquery-file-upload/js/jquery.fileupload.js"></script>
    <script src="vendors/jquery-file-upload/js/jquery.fileupload-process.js"></script>
    <script src="vendors/jquery-file-upload/js/jquery.fileupload-image.js"></script>
    <script src="vendors/jquery-file-upload/js/jquery.fileupload-audio.js"></script>
    <script src="vendors/jquery-file-upload/js/jquery.fileupload-video.js"></script>
    <script src="vendors/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
    <script src="vendors/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
    <script src="vendors/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script>

#### Demo

form-multiple-file-upload.html

#### Home Page

https://github.com/blueimp/jQuery-File-Upload

#### Jquery Knob

`Jquery Knob` is canvas based, no png or jpg sprites. Touch, mouse and mousewheel, keyboard events implemented. Downward compatible, overloads an input element.

#### Css File

    ...

#### Javascript File

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

#### Demo

ui-knob.html

#### Home Page

http://anthonyterrien.com/knob

#### Jquery Nestable

`Jquery Nestable` is drag & drop hierarchical list with mouse and touch compatibility.

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/jquery-nestable/nestable.css">

#### Javascript File

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

#### Demo

ui-nestable-list.html

#### Home Page

http://dbushell.github.io/Nestable

#### Jquery News Ticker

`Jquery News Ticker` brings a lightweight and easy to use news ticker to jQuery.

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/jquery-news-ticker/jquery.news-ticker.css">

#### Javascript File

    <script src="vendors/jquery-news-ticker/jquery.news-ticker.js"></script>

#### Demo

index.html

#### Home Page

http://jsfiddle.net/israelwebdev/YsSpY/8

#### Jquery Pace

`Jquery Pace` is automatic page load progress bar

#### Css File

    <link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">

#### Javascript File

    <script src="vendors/jquery-pace/pace.min.js"></script>

#### Demo

index.html

#### Home Page

http://github.hubspot.com/pace

#### Jquery Validation

`Jquery Validation` is a jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 locales.

#### Css File

    ...

#### Javascript File

    <script src="vendors/jquery-validation/dist/jquery.validate.js"></script>

#### Demo

form-validation.html

#### Home Page

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

#### Jquery metisMenu

`Jquery metisMenu` is a easy menu jQuery plugin for Twitter Bootstrap 3.

#### Css File

    ...

#### Javascript File

    <script src="vendors/metisMenu/jquery.metisMenu.js"></script>

#### Demo

index.html

#### Home Page

https://github.com/onokumus/metisMenu

#### Skycons

`Skycons` is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.

#### Css File

    ...

#### Javascript File

    <script src="vendors/skycons/skycons.js"></script>

#### Demo

index.html

#### Home Page

http://darkskyapp.github.io/skycons

#### Jquery slimScroll

`Jquery slimScroll` is a small (4.6KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

#### Css File

    ...

#### Javascript File

    <script src="vendors/slimScroll/jquery.slimscroll.js"></script>

#### Demo

index.html

#### Home Page

http://rocha.la/jQuery-slimScroll

#### Jquery Tinymce

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL.

#### Css File

    ...

#### Javascript File

    <script src="vendors/tinymce/js/tinymce/tinymce.min.js"></script>

#### Demo

form-editors.html

#### Home Page

http://www.tinymce.com/

#### Jquery HighCharts

Create interactive charts easily for your web projects.

#### Javascript File

    <script src="vendors/jquery-highcharts/highcharts.js"></script>

#### Demo

charts-area.html

#### Home Page

http://highcharts.com

#### jPList - jQuery Data Grid Controls

jPList - jQuery Data Grid Controls is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure .

#### Javascript File

    <script src="vendors/jplist/minified/jplist.min.js"></script>

#### Demo

grid-deep-linking.html

#### Home Page

http://jplist.com/

#### jQuery introjs - Introduction javascript library

Introjs - Better introductions for websites and features with a step-by-step guide for your projects.

#### Css File

    <script src="vendors/intro.js/introjs.css"></script>

#### Javascript File

    <script src="vendors/intro.js/intro.js"></script>

#### Demo

index.html

#### Home Page

http://usablica.github.io/intro.js/

### 9. Change Logs

#### Version 1.2 - 08 July 2014

- Add 2 new style navigation
  - Menu with big icon & flat design
  - Menu with color transition
- Add jQuery introjs
- Improve jquery cookie
  - User can make best theme by mix the style and color
  - Remember user's favourite theme and apply it to all pages
- Set up Animation page run on Firefox browser
- Set up responsive tabs for pages
  - Redisign for tab direction
  - Mobile&Tablet version for tabs accordion
- Apply styles(Squared, Rounded, Bordered) for all pages in Datagrid menu
- Reconstruct menu on layout-horozoltal-menu page
- Fix bug on layout-header-topbar page

#### Version 1.1 - 04 July 2014

- Add new style: Bordered
- Add Data Grids menu using jPList plugin
  - Layout Examples
    - DIVs Layout
    - Table Demo1
    - Table Demo2
    - 2 Tables on the Page
    - UL/LI
  - Actions Examples
    - Filters With UL/LI
    - Filters With SELECT
    - Double Sort
    - Deep Linking
    - Pagination Only
    - Without "Items per Page"
    - Hidden Sort
  - jPList with jQuery UI
    - Ranger Slider
    - Date Picker Filter
- Add 2 options in timeline page
  - Full responsive
  - One column
- Update chat form in sidebar and dashboard page
- Update checkall in datatable
- Minor bug

#### Version 1.0 - 15 June 2014

Initial Release.

### 10. Endding

### Thank you for your purchase

We hope you like our products and we look forward to work with you again in the future.