Button Constructor:

<button class="btn btn-primary" type="button"> Button Text </button>

Alert Constructor:

<div class="alert alert-primary">
	Alert Text 
</div>

Color Shades:

Note: the above shade ".pastel" is used ONLY on alerts and is not used anywhere else in the theme.

Size Options:

Gradient Option:

Border Options:

Progress Bar Constructor:

<div class="progress">
	<div class="progress-bar progress-bar-primary" role="progressbar" style="width: 50%;"></div>
</div>

Color Shades:

Progress Bars do not use light or dark contextual shades. Only base colors available.

Striped Option:

Progress Bars do not use light or dark contextual shades. Only base colors available.

Size Options:

Note: progress bar sizes should be applied to the wrapper .progress, not .progress-bar

Paragraph Dropcap Constructor:

<p class="dropcap dropcap-primary dropcap-fill">
	Lorem Ipsum
</p>

Dropcap Color Shades:

All base contextual colors available. Does not use light or dark contextual shades.

Quoteblock Constructor:

<blockquote class="blockquote-primary">
	Lorem Ipsum
</blockquote>

Note: All base contextual colors available. Does not use light or dark contextual shades.

Contextual Text Constructor: (any text element)

<p class="text-primary"> Lorem Ipsum</p>
<span class="text-primary"> Lorem Ipsum</span>

Contextual Text Color Shades:

Tabs and Accordions

Tabs and accordions are animated widgets built with Bootstrap Panels and are great for organizing large amounts of content. You can learn about their various styles, structures, and options below!

Tabs - Basic Structure

<div class="tab-block">
	<!-- Tabs Navigation -->
	<ul class="nav nav-tabs">
		<li><a href="#tab1">Tab1</a></li>
		<li><a href="#tab2">Tab2</a></li>
	</ul>

	<!-- Tab Content -->
	<div class="tab-content">
		<div id="tab1" class="tab-pane">..</div>
		<div id="tab2" class="tab-pane">..</div>
	</div>

</div>

Tabs - Navigation Positions

Accordion - Basic Structure

<div class="panel-group accordion" id="example1">
	<!-- Panel Item 1 - With Example Contents -->
	<div class="panel">
		<div class="panel-heading">
		<a class="accordion-toggle accordion-icon" data-toggle="collapse" data-parent="#example1" href="#panel-item1">Title</a>
		</div>
		<div id="panel-item1" class="panel-collapse collapse">
			<div class="panel-body">Content Here</div>
		</div>
	</div>

	<!-- Panel Item 2 - With Example Contents -->
	<div class="panel">
		<div class="panel-heading">
		<a class="accordion-toggle" data-toggle="collapse" data-parent="#example1" href="#panel-item2">Title</a>
		</div>
		<div id="panel-item2" class="panel-collapse collapse">
			<div class="panel-body">Content Here</div>
		</div>
	</div>

</div>

Results In:

Header - Fixed

Header - Static

The navbar accepts all of the same contextual classes that any other element does. Which makes switching colors simple and easy.

Refer to color system or header templates for an example of available colors

Topbar - Hidden

Note: To hide this element you can also remove all of its HTML, or grant it the style "display: none" in custom.css

Topbar - Fixed

Topbar - Static

SideBar - Static

SideBar - Fixed

The sidebar currently accepts 3 seperate color layouts, they are listed below

Note: The two light styles may appear the same on poorly calibrated/quality monitors

A Vital Theme Element

Panels are one of AdminDesigns most important theme elements. They have been created using Bootstraps native "panel" system. However, AdminDesigns adds a great deal of extra functionality to the Bootstrap panel system, especially if the "AdminPanels" plugin is used. As a result panels are used on virtually every page and are the ideal element to create widgets and present data. It's recommended that you become very familiar with their structure and functionality.

Understanding Each Addon

<div class="panel">
   <div class="panel-heading">...</div>
   <div class="panel-body">...</div>
   <div class="panel-footer">...</div>
</div>

<div class="panel-heading">
   <!-- Panel Icon -->
   <span class="panel-icon">
   <span class="fa fa-wrench"></span>
   </span>
   <!-- Panel Title -->
   <span class="panel-title">Example Title</span>
</div>

<div class="panel-body">
   <p> Put all the content you can dream of here...</p>
</div>

<div class="panel-footer">
   <button class="btn btn-primary text-right"> Submit Btn </button>
</div>

<!-- Panel Wrapper -->
<div class="panel">

   <!-- Panel Heading -->
   <div class="panel-heading">

      <!-- Panel Icon -->
      <span class="panel-icon">
      <span class="fa fa-wrench"></span>
      </span>
      <!-- Panel Title -->
      <span class="panel-title">Example Title</span>

   </div>

   <!-- Panel Body -->
   <div class="panel-body">
      <p> Put all of your content here...</p>
   </div>

   <!-- Panel Footer -->
   <div class="panel-footer">
      <button class="btn btn-primary text-right"> Submit Btn </button>
   </div>

</div>

Extending advanced options to basic panels.

Admin Panels is a theme exclusive jQuery plugin which adds additional settings to basic panel elements. It allows the user to customize the widget to their specifications, and saves these changes to localstorage. This is a great way to give the user control over the look and feel of the site.

Features Include:

Extends Drag and Drop functionality to panels placed inside of an .admin-grid

Extends the ability to edit a panels title.

Adds the ability to change a panels heading background.

Allows the user to minimize the panel, effectively reducing its size.

Allows the user to remove the widget from view.

Allows the user to fullscreen a panel for larger viewing.

Saves all of the users panel changes to localstorage and restores them on page refresh.

Additional Resources Required:

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

Required Stylesheet

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

Required Scripts

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

Creating an AdminPanels Grid:

AdminPanels functionality requires each panel to be placed in a specialized grid. The grid helps determine the order in which panels are displayed. Almost all errors that might be encountered will be because of an improperly constructed grid. Template pages have been included in the documentation which provide great starting points for constructing your ideal grid layout.

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

An Example Admin Grid

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

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

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

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

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

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

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

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

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

Initializing AdminPanels

// 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');
    }
});

Provided Grid Templates:

We have provided several premade templates to aid you in the creation of AdminPanel grids. Links to these templates can be found below:

Helper classes can assist you in changing the appearance of an element quickly and easily directly through its HTML, rather than CSS. This prevents having to create endless custom classes when making routine changes such as Padding, Margin, or Borders.

Understanding Font Based Icons

All of the icons used in AdminDesigns were created using font based icon libraries. The icons are created with small html snippets rather than with the use of an <img> tag. This allows you to select from hundreds of icons by simply changing a class name. Another great feature of font icons is that you can style the icons using common text based styling. Such as color, font-size, etc. AdminDesigns includes Six separate font-icon libraries.

Available Icon Libraries

Everything you need to get things moving.

AdminDesigns includes a CSS based animation library which allows a developer to easily add transitions and effects to virtually any html element. Simply include the required CSS stylesheet on the page you desire animations and then follow some incredibly simple and frustration-free syntax.

Developers Website

A Full List of Theme Plugins!

With how many great plugins there are avaliable to developers it can become difficult to keep track of them all. Use this list to sort, find, and better your understanding of each plugin. You can never have enough good reference sheets.