1. Introduction


Monster Admin is a popular open source WebApp template for admin dashboards and control panels. Monster 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 Monster 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 Monster 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 monsteradmin 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>Monster 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">
                © 2017 Monster 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 monsteradmin 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
                                              ├── 
                                              │   └── Monster 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. scss / css

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

Scss files
variable.scss All the predefine varialbes colors and etc
app.scss All the Common scss contain here
pages.scss All the Pages scss contain here
sidebar.scss Left sidebar scss contain here
widgets.scss This is for the all widgets of the template
responsive.scss This is for the responsive template

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

19. Free support

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.

21. 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
© 2017 Monster Admin by wrappixel.com