1. Introduction


Material Pro Admin is a popular open source WebApp template for admin dashboards and control panels. Material Pro Admin is fully responsive HTML template, which is based on the CSS framework Bootstrap 4. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Monter Admin is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.


We put a lot of love and effort to make Material Pro Admin a useful template for everyone and now It comes with 7 unique admin templates. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Material Pro Admin, you will be entitled to free download of all future updates for the same license.


Author: Wrappixel / Nirav Joshi
Contact: info@wrappixel.com / niravjoshi87@gmail.com
Follow: twitter.com/wrappixel
Like: facebook.com/wrappixel
website: https://wrappixel.com

NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.

1.2 Installation Guide

This is the simple static HTML template so no need any headech to install it.

Just simple steps to follow:

Main(demo folder) + assets (folder) = Enjoy your demo.

Note: we recomonded you to please make your one own css file & one js files and add that in your page, so whenever the update of Material Proadmin comes it does not affect your code.

2. Template Structure


All template files have fixed structure consisting of header, mega menu, top menu, user profile, sidebar menu, right sidebar, content and footer as shown below:

template

3. Beginning of Page

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

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
    <title>Material Pro Admin Template - Responsive web app kit dashboard</title>
    <!-- Bootstrap Core CSS -->
    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/plugins/prism/prism.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../main/css/style.css" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="../main/css/colors/blue.css" id="theme" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

4. Preloader (spinner)

This is for the loader when page load

                                        
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <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>
    <!-- ============================================================== -->
    <!-- Preloader end -->
    <!-- ============================================================== -->                                            
                                        
                                    

6. Left Sidebar

We have created leftsidebar with the following code.


sidebar
                                            
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss  -->
<!-- ============================================================== -->
<aside class="left-sidebar">
    <!-- Sidebar scroll-->
    <div class="scroll-sidebar">
        <!-- Sidebar navigation-->
        <nav class="sidebar-nav">
            <ul id="sidebarnav">
                <li class="nav-small-cap">DOCUMENTATION</li>
                <li><a href="#Intro" aria-expanded="false"><i class="mdi mdi-file"></i><span class="hide-menu">Introduction</span></a></li>
            </ul>
        </nav>
        <!-- End Sidebar navigation -->
    </div>
    <!-- End Sidebar scroll-->
    <!-- Bottom points-->
    <div class="sidebar-footer">
        <!-- item--><a href="" class="link" data-toggle="tooltip" title="Settings"><i class="ti-settings"></i></a>
        <!-- item--><a href="" class="link" data-toggle="tooltip" title="Email"><i class="mdi mdi-gmail"></i></a>
        <!-- item--><a href="" class="link" data-toggle="tooltip" title="Logout"><i class="mdi mdi-power"></i></a> </div>
    <!-- End Bottom points-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss  -->
<!-- ============================================================== -->
                                        
                                    

7. Page content, right sidebar and Footer

Below is the code for the page content wrapper, you can start your content here

                                        
        <!-- ============================================================== -->
        <!-- Page wrapper  -->
        <!-- ============================================================== -->
        <div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container-fluid">
                <!-- ============================================================== -->
                <!-- Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <div class="row page-titles">
                    <div class="col-md-6 col-8 align-self-center">
                        <h3 class="text-themecolor m-b-0 m-t-0">Dashboard</h3>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                            <li class="breadcrumb-item active">Dashboard</li>
                        </ol>
                    </div>
                    <div class="col-md-6 col-4 align-self-center">
                        <button class="right-side-toggle waves-effect waves-light btn-info btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
                        <button class="btn pull-right hidden-sm-down btn-success"><i class="mdi mdi-plus-circle"></i> Create</button>
                        <div class="dropdown pull-right m-r-10 hidden-sm-down">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                January 2017
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">February 2017</a>
                                <a class="dropdown-item" href="#">March 2017</a>
                                <a class="dropdown-item" href="#">April 2017</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card block.
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Right sidebar -->
                <!-- ============================================================== -->
                <!-- .right-sidebar -->
                <div class="right-sidebar">
                    <div class="slimscrollright">
                        <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
                        <div class="r-panel-body">
                            <ul id="themecolors" class="m-t-20">
                                <li><b>With Light sidebar</b></li>
                                <li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
                                <li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
                                <li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
                                <li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
                                <li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
                                <li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
                                <li class="d-block m-t-30"><b>With Dark sidebar</b></li>
                                <li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
                                <li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
                                <li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
                                <li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
                                <li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
                                <li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
                            </ul>
                            <ul class="m-t-20 chatonline">
                                <li><b>Chat option</b></li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End Right sidebar -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->
            <footer class="footer">
                © 2018 Material Pro Admin by wrappixel.com
            </footer>
            <!-- ============================================================== -->
            <!-- End footer -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page wrapper  -->
        <!-- ============================================================== -->                                        
                                        
                                    

8. Settings in custom js

Below js code is used for theme setting , fix header , toggle sidebar and right sidebar open close.

// topbar stickey on scroll for fix header
    $(".fix-header .topbar").stick_in_parent({ });
    
// ============================================================== 
// Theme options for sidebar toggler and logo text show hide
// ==============================================================     
$(".sidebartoggler").on('click', function () {
    if ($("body").hasClass("mini-sidebar")) {
        $("body").trigger("resize");
        $(".scroll-sidebar, .slimScrollDiv").css("overflow", "hidden").parent().css("overflow", "visible");
        $("body").removeClass("mini-sidebar");
        $('.navbar-brand span').show();
        $(".sidebartoggler i").addClass("ti-menu");
    }
    else {
        $("body").trigger("resize");
        $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
        $("body").addClass("mini-sidebar");
        $('.navbar-brand span').hide();
        $(".sidebartoggler i").removeClass("ti-menu");
    }
});

// ============================================================== 
// This is for Right sidebar options
// ============================================================== 
$(".right-side-toggle").click(function () {
    $(".right-sidebar").slideDown(50);
    $(".right-sidebar").toggleClass("shw-rside");

});
                                        
                                    

10. Font Family

We have used google fonts for the template you can change whatever font you wish

                                        
// Variables
@import 'https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900';

$bodyfont:'Rubik', sans-serif;
$headingfont:'Rubik', sans-serif;
                                        
                                    

11. scss & css

Our Template is based on scss and we import all the file into style.css you can simply edit any scss and compile it

                                        
@import 'variable'; (All the predefine varialbes colors and etc)
@import 'app'; ( All the Common scss contain here )
@import 'pages'; (All pages scss contain here )
@import 'sidebar'; ( Left sidebar scss contain here )
@import '../scss/icons/font-awesome/css/font-awesome.min.css'; ( This is for the icons )
@import '../scss/icons/simple-line-icons/css/simple-line-icons.css';( This is for the icons )
@import '../scss/icons/weather-icons/css/weather-icons.min.css';( This is for the icons )
@import '../scss/icons/linea-icons/linea.css';( This is for the icons )
@import '../scss/icons/themify-icons/themify-icons.css'; ( This is for the icons )
@import '../scss/icons/flag-icon-css/flag-icon.min.css';( This is for the icons )
@import "../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css";( This is for the icons )
@import 'widgets';( This is for the all widgets of the template )
@import 'grid'; ( This is for the extra grid of xlg )
@import 'responsive'; ( This is for the responsive scss )
@import '../css/spinners.css'; ( This is for the Loader )
@import '../css/animate.css';( This is for the Animation )
Note: we recomonded you to please make your one own css and one own js files and add that in your page, so whenever the update of Material Proadmin comes it does not affect your code.

12. Horizontal menu / Navigation

We have already Created Horizontal Demo for the template

Check the live Preview

12. Starter kit page ( Create new page )

You can start your project with starter-page.html , in that page all the unnecessary script and html code is removed, so you can start with the new page.

Check the live Preview

13. Helper Classes

we make classes to help you in your developement process, and make it fast. checkout the below link for the helper classes

Check the live Preview

14. Folder Structure

we follow simple structure for the template

                                        
                                            HTML
                                              ├── 
                                              │   └── Material Pro Admin HTML/
                                              │       └── Css
                                              │            └── All Css files
                                              │       └── Js
                                              │            └── All Js files
                                              │       └── scss
                                              │            └── All scss files
                                              │       └── All Html Pages
                                              │
                                              │   └── Assets/
                                              │       └── Plugins
                                              │            └── All Required plugins files
                                              │       └── Images
                                              │             └── All Theme Images
                                              └── 
                                        
                                    

15. Color Variations

We have made Total 6 Color variation with light and dark sidebar

colors
                                        
<!-- You can change the theme colors, just put this css to head --> 
<link href="css/colors/default.css" id="theme" rel="stylesheet"> 

<link href="css/colors/green.css" id="theme" rel="stylesheet"> 

<link href="css/colors/red.css" id="theme" rel="stylesheet"> 

<link href="css/colors/blue.css" id="theme" rel="stylesheet"> 

<link href="css/colors/purple.css" id="theme" rel="stylesheet"> 

<link href="css/colors/megna.css" id="theme" rel="stylesheet">

<!-- For the dark sidebar --> 
<link href="css/colors/default-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/green-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/red-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/blue-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/purple-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/megna-dark.css" id="theme" rel="stylesheet">
                                        
                                    

16. Layout options

We have provided many layout options you can choose whatever you like

For Example
Fix header Simply Put class .fix-header to body tag
Fix Sidebar Simply Put class .fix-sidebar to body tag
Logo in Center Simply Put class .logo-center to body tag

17. Content

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.


Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offsetting columns

Move columns to the right using .offset-md--* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

18. Card

Below is the basic card structure.

                                 
<div class="card">
    <div class="card-header">
        Title
        <div class="card-actions">
            <a class="" data-action="collapse"><i class="ti-minus"></i></a>
            <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
            <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
        </div>
    </div>
    <div class="card-body collapse show">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
</div>
                                 
                                 

19. Icons

Below is the table of icon fonts used in this template.

Icon Name Example
Font-awesome <i class="fa fa-icon-name"></i>
Material Icons <i class="mdi mdi-icon-name"></i>
Linea Icons <div data-icon="a" class="linea-icon linea-basic"><div>
Simple Line Icons <i class="icon-name_of_icon"></i>
Themify Icons <i class="ti-icon-name"></i>
Weather Icons <i class="wi wi-icon-name"></i>
Flag Icons <i class="flag-icon flsg-icon-country-name"></i>

20. Button

Below is the general buttons.

                                 
<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>
</div>
                                 
                                 

21. Charts

Below is the table of pages which includes charts and where you can find the script related to it.

Page Where to find it's JS
index.html (dashboard1) js/dashboard1.js
index2.html (dashboard2) js/dashboard2.js
index3.html (dashboard3) js/dashboard3.js
index4.html (dashboard4) js/dashboard4.js
index5.html (dashboard5) js/dashboard5.js
index6.html (dashboard6) js/dashboard6.js

22. Form

Below is the basic form structure.

                                 
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">User Name</label>
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
    </div>
    <div class="form-group">
        <div class="checkbox checkbox-success">
            <input id="checkbox1" type="checkbox">
            <label for="checkbox1"> Remember me </label>
        </div>
    </div>
    <button type="submit" class="btn btn-success waves-effect waves-light m-r-10">Submit</button>
    <button type="submit" class="btn btn-inverse waves-effect waves-light">Cancel</button>
</form>
                                 
                                 

23. Table

Below is the basic table structure.

                                 
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Deshmukh</td>
            <td>Prohaska</td>
            <td>@Genelia</td>
            <td><span class="label label-danger">admin</span> </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Deshmukh</td>
            <td>Gaylord</td>
            <td>@Ritesh</td>
            <td><span class="label label-info">member</span> </td>
        </tr>
        <tr>
            <td>3</td>
            <td>Sanghani</td>
            <td>Gusikowski</td>
            <td>@Govinda</td>
            <td><span class="label label-warning">developer</span> </td>
        </tr>
        <tr>
            <td>4</td>
            <td>Roshan</td>
            <td>Rogahn</td>
            <td>@Hritik</td>
            <td><span class="label label-success">supporter</span> </td>
        </tr>
        <tr>
            <td>5</td>
            <td>Joshi</td>
            <td>Hickle</td>
            <td>@Maruti</td>
            <td><span class="label label-info">member</span> </td>
        </tr>
        <tr>
            <td>6</td>
            <td>Nigam</td>
            <td>Eichmann</td>
            <td>@Sonu</td>
            <td><span class="label label-success">supporter</span> </td>
        </tr>
    </tbody>
</table>
                                 
                                 

23.1 Other Table Plugins & Documentation

24. Js

We diffentiate scss file for the pages and widgets and compile it with style.css

Scss files
File Description
jquery.js, tether.js, bootstrap.js, jquery.slimscroll These files are used at main files of the theme. and nicescroll is for sidebarscroll
custom.js This is a main function js file. it contain sidebar and other basic js
sidebar.js This file contains sidebarnavigation js
wave.js This is for wave effects on buttons and other elements

25. Plugins

Select Plugin

jQuery Block-UI

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/blockUI/jquery.blockUI.js" type="text/javascript"></script>

Bootstrap Datepicker

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" />
JavaScript Files
<script src="../assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js" type="text/javascript"></script>

bootstrap-daterangepicker

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-daterangepicker/daterangepicker.css" />
JavaScript Files
<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>

bootstrap-rtl-master

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-rtl-master/dist/css/bootstrap-rtl.min.css" />
JavaScript Files
<script src="../assets/plugins/bootstrap-rtl-master/dist/js/bootstrap-rtl.min.js" type="text/javascript"></script>

bootstrap-select

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-select/bootstrap-select.min.css" />
JavaScript Files
<script src="../assets/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>

bootstrap-social

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-social/bootstrap-social.css" />
JavaScript Files
No JS available

bootstrap-table

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-table/dist/bootstrap-table.min.css" />
JavaScript Files
<script src="../assets/plugins/bootstrap-table/dist/bootstrap-table.min.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-table/dist/bootstrap-table.ints.js" type="text/javascript"></script>

bootstrap-tagsinput

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />
JavaScript Files
<script src="../assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js" type="text/javascript"></script>

bootstrap-touchspin

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
JavaScript Files
<script src="../assets/plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>

bootstrap-treeview

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview.min.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview-init.js" type="text/javascript"></script>

Calendar

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/calendar/dist/fullcalendar.css" />
JavaScript Files
<script src="../assets/plugins/calendar/jquery-ui.min.js" type="text/javascript"></script>
<script src="../assets/plugins/calendar/dist/fullcalendar.min.js" type="text/javascript"></script>
<script src="../assets/plugins/calendar/dist/jquery.fullcalendar.js" type="text/javascript"></script>

Chart.js

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/Chart.js/chartjs.init.js" type="text/javascript"></script>
<script src="../assets/plugins/Chart.js/Chart.min.js" type="text/javascript"></script>

clockpicker

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/clockpicker/dist/jquery-clockpicker.min.css" />
JavaScript Files
<script src="../assets/plugins/clockpicker/dist/jquery-clockpicker.min.js" type="text/javascript"></script>

counterup

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>

cropper

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/cropper/cropper.min.css" />
JavaScript Files
<script src="../assets/plugins/cropper/cropper.min.js" type="text/javascript"></script>
<script src="../assets/plugins/cropper/cropper-init.js" type="text/javascript"></script>

css-chart

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/css-chart/css-chart.css" />
JavaScript Files
No JS available

custom-select

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/custom-select/custom-select.css" />
JavaScript Files
<script src="../assets/plugins/custom-select/custom-select.min.js" type="text/javascript"></script>

dropify

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/dropify/dist/css/dropify.min.css" />
JavaScript Files
<script src="../assets/plugins/dropify/dist/js/dropify.min.js" type="text/javascript"></script>

dropzone master

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/dropzone-master/dist/dropzone.css" />
JavaScript Files
<script src="../assets/plugins/dropzone-master/dist/dropzone.js" type="text/javascript"></script>

fancybox

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/fancybox/ekko-lightbox.min.css" />
JavaScript Files
<script src="../assets/plugins/fancybox/ekko-lightbox.min.js" type="text/javascript"></script>

flot

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/flot/excanvas.min.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.pie.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.resize.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.time.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.stack.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.crosshair.js" type="text/javascript"></script>

flot-tooltip

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/flot.tooltip/js/jquery.flot.tooltip.min.js" type="text/javascript"></script>

footable

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/footable/css/footable.core.css" />
JavaScript Files
<script src="../assets/plugins/footable/js/footable.all.min.js" type="text/javascript"></script>

gmaps

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/gmaps/gmaps.min.js" type="text/javascript"></script>
<script src="../assets/plugins/gmaps/jquery.gmaps.js" type="text/javascript"></script>

horizontal-timeline

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/horizontal-timeline/css/horizontal-timeline.css" />
JavaScript Files
<script src="../assets/plugins/horizontal-timeline/js/horizontal-timeline.js" type="text/javascript"></script>

html5-editor

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/html5-editor/bootstrap-wysihtml5.css" />
JavaScript Files
<script src="../assets/plugins/html5-editor/wysihtml5-0.3.0.js" type="text/javascript"></script>
<script src="../assets/plugins/html5-editor/bootstrap-wysihtml5.js" type="text/javascript"></script>

ion-rangeslider

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.css" />
<link rel="stylesheet" type="text/css" href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.skinModern.css" />
JavaScript Files
<script src="../assets/plugins/ion-rangeslider/js/ion-rangeSlider/ion.rangeSlider.min.js" type="text/javascript"></script>
<script src="../assets/plugins/ion-rangeslider/js/ion-rangeSlider/ion.rangeSlider-init.js" type="text/javascript"></script>

jquery-easy-pie-chart

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery.easy-pie-chart/easy-pie-chart.init.js" type="text/javascript"></script>

jquery-asColorPicker

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-asColorPicker-master/css/asColorPicker.css" />
JavaScript Files
<script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asColor.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asGradient.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asColorPicker.min.js" type="text/javascript"></script>

jquery-sparkline

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/jquery-sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-sparkline/jquery.charts-sparkline.js" type="text/javascript"></script>

jquery-wizard-master

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-wizard-master/css/wizard.css" />
<link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-wizard-master/libs/formvalidation/formValidation.min.css" />
JavaScript Files
<script src="../assets/plugins/jquery-wizard-master/dist/jquery-wizard.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-wizard-master/libs/formvalidation/formValidation.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-wizard-master/libs/formvalidation/bootstrap.min.js" type="text/javascript"></script>

jsgrid

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/jsgrid/dist/jsgrid.min.css" />
<link rel="stylesheet" type="text/css" href="../assets/plugins/jsgrid/dist/jsgrid-theme.min.css" />
JavaScript Files
<script src="../assets/plugins/jsgrid/db.js" type="text/javascript"></script>
<script src="../assets/plugins/jsgrid/dist/jsgrid.min.js" type="text/javascript"></script>
<script src="js/jsgrid-init.js" type="text/javascript"></script>

knob chart

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/knob/jquery.knob.js" type="text/javascript"></script>

magnific-popup

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/Magnific-Popup-master/dist/magnific-popup.css" />
JavaScript Files
<script src="../assets/plugins/Magnific-Popup-master/dist/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="../assets/plugins/Magnific-Popup-master/dist/jquery.magnific-popup-init.js" type="text/javascript"></script>

moment

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/moment/moment.js" type="text/javascript"></script>

morrisjs

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/morrisjs/morris.css" />
JavaScript Files
<script src="../assets/plugins/raphael/raphael-min.js" type="text/javascript"></script>
<script src="../assets/plugins/morrisjs/morris.js" type="text/javascript"></script>
<script src="js/morris-data.js" type="text/javascript"></script>

multiselect

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/multiselect/css/multi-select.css" />
JavaScript Files
<script src="../assets/plugins/multiselect/js/jquery.multi-select.js" type="text/javascript"></script>

nestable

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/nestable/nestable.css" />
JavaScript Files
<script src="../assets/plugins/nestable/jquery.nestable.js" type="text/javascript"></script>

peity charts

CSS Files
No CSS Available
JavaScript Files
<script src="../assets/plugins/peity/jquery.peity.min.js" type="text/javascript"></script>
<script src="../assets/plugins/peity/jquery.peity.init.js" type="text/javascript"></script>

skycons

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/skycons/skycons.js" type="text/javascript"></script>

summernote

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/summernote/dist/summernote.css" />
JavaScript Files
<script src="../assets/plugins/summernote/dist/summernote.min.js" type="text/javascript"></script>

sweetalert

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/sweetalert/sweetalert.css" />
JavaScript Files
<script src="../assets/plugins/sweetalert/sweetalert.min.js" type="text/javascript"></script>
<script src="../assets/plugins/sweetalert/jquery.sweet-alert.custom.js" type="text/javascript"></script>

switchery

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/switchery/dist/switchery.min.css" />
JavaScript Files
<script src="../assets/plugins/switchery/dist/switchery.min.js" type="text/javascript"></script>

tablesaw

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/tablesaw-master/dist/tablesaw.css" />
JavaScript Files
<script src="../assets/plugins/tablesaw-master/dist/tablesaw.js" type="text/javascript"></script>
<script src="../assets/plugins/tablesaw-master/dist/tablesaw-init.js" type="text/javascript"></script>

timepicker

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/timepicker/bootstrap-timepicker.min.css" />
JavaScript Files
<script src="../assets/plugins/timepicker/bootstrap-timepicker.min.js" type="text/javascript"></script>

tiny-editable

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/tiny-editable/mindmup-editabletable.js" type="text/javascript"></script>
<script src="../assets/plugins/tiny-editable/numeric-input-example.js" type="text/javascript"></script>

tinymce

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/tinymce/tinymce.min.js" type="text/javascript"></script>

toast

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/toast-master/css/jquery.toast.css" />
JavaScript Files
<script src="../assets/plugins/toast-master/js/jquery.toast.js" type="text/javascript"></script>
<script src="js/toastr.js" type="text/javascript"></script>

typeahead

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/typeahead.js-master/dist/typehead-min.css" />
JavaScript Files
<script src="../assets/plugins/typeahead.js-master/dist/typeahead.bundle.min.js" type="text/javascript"></script>
<script src="../assets/plugins/typeahead.js-master/dist/typeahead-init.js" type="text/javascript"></script>

vectormap

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" />
JavaScript Files
<script src="../assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-in-mill.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-us-aea-en.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-uk-mill-en.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-au-mill.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jvectormap.custom.js" type="text/javascript"></script>

waypoints

CSS Files
No CSS available
JavaScript Files
<script src="../assets/plugins/waypoints/lib/jquery.waypoints.js" type="text/javascript"></script>

x-editable

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" />
JavaScript Files
<script src="../assets/plugins/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js" type="text/javascript"></script>

datatables

CSS Files
<link rel="stylesheet" type="text/css" href="../assets/plugins/datatables/jquery.dataTables.min.css" />
JavaScript Files
<script src="../assets/plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>

27. Free support

If you have any type of query or support needed, feel free to contact us by mail or message to info@wrappixel.com or niravjoshi87@gmail.com

How to generate a support ticket:
  • Go to the wrappixel.com.
  • From the topbar menu, click on SUPPORT and login/signup popup will open. Remember, you have to login to your account on wrappixel.com website.
  • After successful login, you will be redirected to a page where you can open a support ticket for your query/issue.

28. Free PSD File

Mail us on info@wrappixel.com for get the psd file. we will send you all the psd for free.

Thank you
© 2018 Material Pro Admin by wrappixel.com