Theme Options

#### Header Skins

Light
Primary
Info
Warning
Danger
Alert
System
Success
Dark

#### Layout Options

Fixed Header
Fixed Sidebar
Fixed Breadcrumbs
Hide Breadcrumbs

#### Layout Options

Fullwidth Layout
Boxed Layout (Coming Soon)
Clear LocalStorage
Reporting Period
3

#### AdminPanel Template - Multi Row Grid

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

#### Grid Template HTML

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

        <!-- Row 1. Note how even though we are adding just 1 fullwidth panel
        We still wrap it in a column(.col-md-12). This is required -->
        <div class="row">

            <!-- Column with required .admin-grid -->
            <div class="col-md-12 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>

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

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

        <!-- Row 2 -->
        <div class="row">

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

                <!-- 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-6 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>

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

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

        <!-- Row 3 -->
        <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="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>

            </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="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

#### AdminDesigns - UI Documentation

- Author: Admin Designs
- License: CC - Commercial 3.0
- Website: www.admindesigns.com