Theme Options

Header Skins

Sidebar Skins

Layout Options

Layout Options

Clear LocalStorage
Perfect Admin
  1. Dashboard
  3. Home
  4. Dashboard

AdminPanel Grid Template - 3 Column

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6

Grid Template HTML 

<!-- AdminPanels Wrapper -->
<div class="admin-panels">

    <!-- Row, Must contain only columns -->
    <div class="row">

        <!-- Column with required .admin-grid -->
        <div class="col-md-4 admin-grid">

            <!-- Panel with required Unique ID and panel heading -->
            <div class="panel" id="p1">
                 <div class="panel-heading">Panel 1</div>	
                 <div class="panel-body">Panel Content...</div> 
            </div>

            <!-- Panel with required Unique ID and panel heading -->
            <div class="panel" id="p2">
                 <div class="panel-heading">Panel 2</div>	
                 <div class="panel-body">Panel Content...</div> 
            </div>

        </div><!-- End Column -->

        <!-- Column with required .admin-grid -->
        <div class="col-md-4 admin-grid">

            <!-- Panel with required Unique ID and panel heading -->
            <div class="panel" id="p3">
                 <div class="panel-heading">Panel 3</div> 
                 <div class="panel-body">Panel Content...</div> 
            </div>

            <!-- Panel with required Unique ID and panel heading -->
            <div class="panel" id="p4">
                 <div class="panel-heading">Panel 4</div>	
                 <div class="panel-body">Panel Content...</div> 
            </div>

        </div><!-- End Column -->

        <!-- Column with required .admin-grid -->
        <div class="col-md-4 admin-grid">

            <!-- Panel with required Unique ID and panel heading -->
            <div class="panel" id="p5">
                 <div class="panel-heading">Panel 5</div> 
                 <div class="panel-body">Panel Content...</div> 
            </div>

            <!-- Panel with required Unique ID and panel heading -->
            <div class="panel" id="p6">
                 <div class="panel-heading">Panel 6</div>   
                 <div class="panel-body">Panel Content...</div> 
            </div>

        </div><!-- End Column -->


    </div><!-- End Row -->
</div><!-- End Panel Wrapper -->

Grid Template Javascript 

// Init AdminPanels Plugin on ".admin-panels" container
$('.admin-panels').adminpanel({
    grid: '.admin-grid',
    draggable: true,
    // On AdminPanel Init complete we fade in the content. Optional
    onFinish: function() {
        $('.admin-panels').addClass('animated fadeIn').removeClass('fade-onLoad');
    },
    // We trigger a window resize after a panel has been modified. This helps catch
    // any plugins which may need to update after the panel was changed. Optional
    onSave: function() {
        $(window).trigger('resize');
    }
});
HTML and Panel Requirements

HTML and Panel Requirements

Additional Resources Required:

AdminPanels requires several additional resources to be included on the page.

Required Stylesheet
<link href="assets/admin-tools/admin-plugins/admin-panels/adminpanels.css" type="text/css">

Note: Stylesheet should be included after core theme.css stylesheet.

Required Scripts
<link href="assets/admin-tools/admin-plugins/admin-panels/adminpanels.js"> - Core plugin script
<link href="assets/admin-tools/admin-plugins/admin-panels/json2.js.js"> - Extends JSON functionality
<link href="assets/admin-tools/admin-plugins/admin-panels/jquery.ui.touch-punch.min.js.js" > - Improves touch support

Note: Scripts should be included after core libraries. jQuery, Bootstrap, Admin Theme Scripts, etc.

Grid Requirements:

The grid must be wrapped in a container with the class .admin-panels

The grid must always begin with a .row

Rows must only contain columns .col-md-4 .col-md-6 etc. If fullwidth content is desired use .col-md-12

ALL columns must contain the class .admin-grid

Panels should only be placed inside of Columns

ALL Panels must contain a unique, unchanging ID class="panel" id="p1"

ALL Panels must contain a panel-heading. .hidden can be used if you wish to hide the heading