From 70e90329372c547379e0186713f4287c71960c4c Mon Sep 17 00:00:00 2001 From: Abdullah Almsaeed Date: Mon, 2 Mar 2015 18:39:46 -0500 Subject: [PATCH] Dynamically build documentation using Grunt includes --- Gruntfile.js | 16 + documentation/build/include/advice.html | 17 + documentation/build/include/browsers.html | 12 + documentation/build/include/components.html | 1365 +++++++++++++ documentation/build/include/dependencies.html | 10 + documentation/build/include/download.html | 51 + documentation/build/include/faq.html | 17 + documentation/build/include/introduction.html | 12 + documentation/build/include/layout.html | 432 ++++ documentation/build/include/license.html | 43 + documentation/build/include/plugins.html | 47 + documentation/build/include/upgrade.html | 26 + documentation/build/index.html | 167 ++ documentation/docs.js | 54 + documentation/index.html | 1819 ++++++++--------- documentation/style.css | 119 ++ 16 files changed, 3231 insertions(+), 976 deletions(-) mode change 100755 => 100644 Gruntfile.js create mode 100644 documentation/build/include/advice.html create mode 100644 documentation/build/include/browsers.html create mode 100644 documentation/build/include/components.html create mode 100644 documentation/build/include/dependencies.html create mode 100644 documentation/build/include/download.html create mode 100644 documentation/build/include/faq.html create mode 100644 documentation/build/include/introduction.html create mode 100644 documentation/build/include/layout.html create mode 100644 documentation/build/include/license.html create mode 100644 documentation/build/include/plugins.html create mode 100644 documentation/build/include/upgrade.html create mode 100644 documentation/build/index.html create mode 100644 documentation/docs.js mode change 100755 => 100644 documentation/index.html create mode 100644 documentation/style.css diff --git a/Gruntfile.js b/Gruntfile.js old mode 100755 new mode 100644 index 8e2b46f4..036a99bc --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,6 +4,8 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-includes'); + grunt.initConfig({ watch: { // if any .less file changes in directory "build/less/" run the "less"-task. @@ -61,6 +63,20 @@ module.exports = function (grunt) { 'dist/js/app.min.js': ['dist/js/app.js'] } } + }, + //Build the documentaion files + includes: { + build: { + src: ['*.html'], // Source files + dest: 'documentation/', // Destination directory + flatten: true, + cwd: 'documentation/build', + options: { + silent: true, + includePath: 'documentation/build/include' + //banner: '' + } + } } }); // the default task (running "grunt" in console) is "watch" diff --git a/documentation/build/include/advice.html b/documentation/build/include/advice.html new file mode 100644 index 00000000..7365ab21 --- /dev/null +++ b/documentation/build/include/advice.html @@ -0,0 +1,17 @@ +
+

A Word of Advice

+

+ Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it: +

+ + +

+ Note: LESS files are better commented than the compiled CSS file. +

+
\ No newline at end of file diff --git a/documentation/build/include/browsers.html b/documentation/build/include/browsers.html new file mode 100644 index 00000000..895a8818 --- /dev/null +++ b/documentation/build/include/browsers.html @@ -0,0 +1,12 @@ +
+

Browser Support

+

AdminLTE supports the following browsers:

+ +

Note: IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.

+
\ No newline at end of file diff --git a/documentation/build/include/components.html b/documentation/build/include/components.html new file mode 100644 index 00000000..2e7dbd38 --- /dev/null +++ b/documentation/build/include/components.html @@ -0,0 +1,1365 @@ +
+

Components

+
+

Reminder!

+

+ AdminLTE uses all of Bootstrap 3 components. It's a good start to review + the Bootstrap documentation to get an idea of the various components + that this documentation does not cover. +

+
+
+

Tip!

+

+ If you go through the example pages and would like to copy a component, right-click on + the component and choose "inspect element" to get to the HTML quicker than scanning + the HTML page. +

+
+

Main Header

+

The main header contains the logo and navbar. Construction of the + navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide. + The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for + the top nav layout.

+
+
+ Main Header Example +
+ + + + +
+
+
+ 
+<header class="main-header">
+  <a href="../../index2.html" class="logo">
+    <!-- LOGO -->
+    AdminLTE
+  </a>
+  <!-- Header Navbar: style can be found in header.less -->
+  <nav class="navbar navbar-static-top" role="navigation">
+    <!-- Navbar Right Menu -->
+    <div class="navbar-custom-menu">
+      <ul class="nav navbar-nav">
+        <!-- Messages: style can be found in dropdown.less-->
+        <li class="dropdown messages-menu">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-envelope-o"></i>
+            <span class="label label-success">4</span>
+          </a>
+          <ul class="dropdown-menu">
+            <li class="header">You have 4 messages</li>
+            <li>
+              <!-- inner menu: contains the actual data -->
+              <ul class="menu">
+                <li><!-- start message -->
+                  <a href="#">
+                    <div class="pull-left">
+                      <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+                    </div>
+                    <h4>
+                      Sender Name
+                      <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                    </h4>
+                    <p>Message Excerpt</p>
+                  </a>
+                </li><!-- end message -->
+                ...
+              </ul>
+            </li>
+            <li class="footer"><a href="#">See All Messages</a></li>
+          </ul>
+        </li>
+        <!-- Notifications: style can be found in dropdown.less -->
+        <li class="dropdown notifications-menu">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-bell-o"></i>
+            <span class="label label-warning">10</span>
+          </a>
+          <ul class="dropdown-menu">
+            <li class="header">You have 10 notifications</li>
+            <li>
+              <!-- inner menu: contains the actual data -->
+              <ul class="menu">
+                <li>
+                  <a href="#">
+                    <i class="ion ion-ios-people info"></i> Notification title
+                  </a>
+                </li>
+                ...
+              </ul>
+            </li>
+            <li class="footer"><a href="#">View all</a></li>
+          </ul>
+        </li>
+        <!-- Tasks: style can be found in dropdown.less -->
+        <li class="dropdown tasks-menu">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-flag-o"></i>
+            <span class="label label-danger">9</span>
+          </a>
+          <ul class="dropdown-menu">
+            <li class="header">You have 9 tasks</li>
+            <li>
+              <!-- inner menu: contains the actual data -->
+              <ul class="menu">
+                <li><!-- Task item -->
+                  <a href="#">
+                    <h3>
+                      Design some buttons
+                      <small class="pull-right">20%</small>
+                    </h3>
+                    <div class="progress xs">
+                      <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                        <span class="sr-only">20% Complete</span>
+                      </div>
+                    </div>
+                  </a>
+                </li><!-- end task item -->
+                ...
+              </ul>
+            </li>
+            <li class="footer">
+              <a href="#">View all tasks</a>
+            </li>
+          </ul>
+        </li>
+        <!-- User Account: style can be found in dropdown.less -->
+        <li class="dropdown user user-menu">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+            <span class="hidden-xs">Alexander Pierce</span>
+          </a>
+          <ul class="dropdown-menu">
+            <!-- User image -->
+            <li class="user-header">
+              <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+              <p>
+                Alexander Pierce - Web Developer
+                <small>Member since Nov. 2012</small>
+              </p>
+            </li>
+            <!-- Menu Body -->
+            <li class="user-body">
+              <div class="col-xs-4 text-center">
+                <a href="#">Followers</a>
+              </div>
+              <div class="col-xs-4 text-center">
+                <a href="#">Sales</a>
+              </div>
+              <div class="col-xs-4 text-center">
+                <a href="#">Friends</a>
+              </div>
+            </li>
+            <!-- Menu Footer-->
+            <li class="user-footer">
+              <div class="pull-left">
+                <a href="#" class="btn btn-default btn-flat">Profile</a>
+              </div>
+              <div class="pull-right">
+                <a href="#" class="btn btn-default btn-flat">Sign out</a>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</header>
+

Top Nav Layout. Main Header Example.

+
+

Reminder!

+

To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.

+
+
+
+ Top Nav Example +
+ +
+
+
+ 
+<header class="main-header">               
+  <nav class="navbar navbar-static-top">
+    <div class="container-fluid">
+    <div class="navbar-header">
+      <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+        <i class="fa fa-bars"></i>
+      </button>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="navbar-collapse">
+      <ul class="nav navbar-nav">
+        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
+        <li><a href="#">Link</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+            <li class="divider"></li>
+            <li><a href="#">One more separated link</a></li>
+          </ul>
+        </li>
+      </ul>
+      <form class="navbar-form navbar-left" role="search">
+        <div class="form-group">
+          <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
+        </div>
+      </form>
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="#">Link</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
+  </nav>
+</header>
+
+ + + +

Sidebar

+

+ The sidebar used in this page to the left provides an example of what your sidebar should like. + Construction of a sidebar: +

+ 
+<div class="main-sidebar">
+  <!-- Inner sidebar -->
+  <div class="sidebar">
+    <!-- user panel (Optional) -->
+    <div class="user-panel">
+      <div class="pull-left image">
+        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+      </div>
+      <div class="pull-left info">
+        <p>User Name</p>
+
+        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+      </div>
+    </div><!-- /.user-panel -->
+
+    <!-- Search Form (Optional) -->
+    <form action="#" method="get" class="sidebar-form">
+      <div class="input-group">
+        <input type="text" name="q" class="form-control" placeholder="Search..."/>
+        <span class="input-group-btn">
+          <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+        </span>
+      </div>
+    </form><!-- /.sidebar-form -->
+
+    <!-- Sidebar Menu -->
+    <ul class="sidebar-menu">
+      <li class="header">HEADER</li>
+      <!-- Optionally, you can add icons to the links -->
+      <li class="active"><a href="#"><span>Link</span></a><</li>
+      <li><a href="#"><span>Another Link</span></a></li>
+      <li class="treeview">
+        <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
+        <ul class="treeview-menu">
+          <li><a href="#">Link in level 2</a></li>
+          <li><a href="#">Link in level 2</a></li>
+        </ul>
+      </li>
+    </ul><!-- /.sidebar-menu -->
+
+  </div><!-- /.sidebar -->
+</div><!-- /.main-sidebar -->
+
+ + + +

Info Box

+

Info boxes are used to display statistical snippets. There are two types of info boxes. Example of the first type:

+ +
+
+
+ +
+ Messages + 1,410 +
+
+
+
+
+ +
+ Bookmarks + 410 +
+
+
+
+
+ +
+ Uploads + 13,648 +
+
+
+
+
+ +
+ Likes + 93,139 +
+
+
+
+

Markup

+ 

+<div class="info-box">
+  <-- Apply any bg-* class to to the icon to color it -->
+  <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
+  <div class="info-box-content">
+    <span class="info-box-text">Likes</span>
+    <span class="info-box-number">93,139</span>
+  </div><!-- /.info-box-content -->
+</div><!-- /.info-box -->
+
+ +

Second Type of Info Boxes

+
+
+
+ +
+ Bookmarks + 41,410 +
+
+
+ + 70% Increase in 30 Days + +
+
+
+
+
+ +
+ Likes + 41,410 +
+
+
+ + 70% Increase in 30 Days + +
+
+
+
+
+ +
+ Events + 41,410 +
+
+
+ + 70% Increase in 30 Days + +
+
+
+
+
+ +
+ Comments + 41,410 +
+
+
+ + 70% Increase in 30 Days + +
+
+
+
+

Markup

+ 

+<-- Apply any bg-* class to to the info-box to color it -->
+<div class="info-box bg-red">
+  <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
+  <div class="info-box-content">
+    <span class="info-box-text">Likes</span>
+    <span class="info-box-number">41,410</span>
+    <-- The progress section is optional -->
+    <div class="progress">
+      <div class="progress-bar" style="width: 70%"></div>
+    </div>
+    <span class="progress-description">
+      70% Increase in 30 Days
+    </span>
+  </div><!-- /.info-box-content -->
+</div><!-- /.info-box -->
+
+

The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the + first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.

+ + +

Box

+

The box component is the most widely used component through out this template. You can + use it for anything from displaying charts to just blocks of text. It comes in many different + styles that we will explore below.

+

Default Box Markup

+
+
+

Default Box Example

+
+ + + Label +
+
+
+ The body of the box +
+
+ The footer of the box +
+
+ 
+<div class="box">
+  <div class="box-header with-border">
+    <h3 class="box-title">Default Box Example</h3>
+    <div class="box-tools pull-right">
+      <!-- Buttons, labels, and many other things can be placed here! -->
+      <!-- Here is a label for example -->
+      <span class="label label-primary">Label</span>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+  <div class="box-footer">
+    The footer of the box
+  </div><!-- box-footer -->
+</div><!-- /.box -->
+

Box Variants

+

You can change the style of the box by adding any of the contextual classes.

+
+
+
+
+

Default Box Example

+
+
+ The body of the box +
+
+
+
+
+
+

Primary Box Example

+
+
+ The body of the box +
+
+
+
+
+
+

Info Box Example

+
+
+ The body of the box +
+
+
+
+
+
+
+

Warning Box Example

+
+
+ The body of the box +
+
+
+
+
+
+

Success Box Example

+
+
+ The body of the box +
+
+
+
+
+
+

Danger Box Example

+
+
+ The body of the box +
+
+
+
+ 
+<div class="box box-default">...</div>
+<div class="box box-primary">...</div>
+<div class="box box-info">...</div>
+<div class="box box-warning">...</div>
+<div class="box box-success">...</div>
+<div class="box box-danger">...</div>
+ +

Solid Box

+

Solid Boxes are alternative ways to display boxes. + They can be created by simply adding the box-solid class to the box component. + You may also use contextual classes with you solid boxes.

+
+
+
+
+

Default Solid Box Example

+
+
+ The body of the box +
+
+
+
+
+
+

Primary Solid Box Example

+
+
+ The body of the box +
+
+
+
+
+
+

Info Solid Box Example

+
+
+ The body of the box +
+
+
+
+
+
+
+

Warning Solid Box Example

+
+
+ The body of the box +
+
+
+
+
+
+

Success Solid Box Example

+
+
+ The body of the box +
+
+
+
+
+
+

Danger Solid Box Example

+
+
+ The body of the box +
+
+
+
+ 
+<div class="box box-solid box-default">...</div>
+<div class="box box-solid box-primary">...</div>
+<div class="box box-solid box-info">...</div>
+<div class="box box-solid box-warning">...</div>
+<div class="box box-solid box-success">...</div>
+<div class="box box-solid box-danger">...</div>
+

Box Tools

+

Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use + of multiple AdminLTE components within the header of the box.

+

AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons + are placed in the box-tools which is placed in the box-header.

+ 
+<-- This will cause the box to be removed when clicked -->
+<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
+<-- This will cause the box to collapse when clicked -->
+<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
+
+
+
+
+

Collapsable

+
+ +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Collapsable</h3>
+    <div class="box-tools pull-right">
+      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+
+
+

Removable

+
+ +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Removable</h3>
+    <div class="box-tools pull-right">
+      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+
+
+

Expandable

+
+ +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Expandable</h3>
+    <div class="box-tools pull-right">
+      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+

We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:

+
+
+
+
+

Labels

+
+ Some Label +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Labels</h3>
+    <div class="box-tools pull-right">
+      <span class="label label-default">8 New Messages</span>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+
+
+

Input

+
+
+ + +
+
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Input</h3>
+    <div class="box-tools pull-right">
+      <div class="has-feedback">
+        <input type="text" class="form-control input-sm" placeholder="Search..."/>
+        <span class="glyphicon glyphicon-search form-control-feedback"></span>
+      </div>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+
+
+

Tootips on buttons

+
+ + +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Tooltips on buttons</h3>
+    <div class="box-tools pull-right">      
+      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
+      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+ +

Loading States

+
+
+
+
+

Loading state

+
+
+ The body of the box +
+ +
+ +
+ +
+
+ +
+
+
+

Loading state (.box-solid)

+
+
+ The body of the box +
+ +
+ +
+ +
+
+
+

+ To simulate a loading state, simply place this code before the .box closing tag. +

+ 
<div class="overlay">
+  <i class="fa fa-refresh fa-spin"></i>
+</div>
+
+

Direct Chat

+

The direct chat widget extends the box component to create a beautiful chat interface. This widget + consists of a required messages pane and an optional contacts pane. Examples:

+ +
+
+ +
+
+

Direct Chat

+
+ 3 + + + +
+
+
+ +
+ +
+
+ Alexander Pierce + 23 Jan 2:00 pm +
+ message user image +
+ Is this template really for free? That's unbelievable! +
+
+ + +
+
+ Sarah Bullock + 23 Jan 2:05 pm +
+ message user image +
+ You better believe it! +
+
+
+ + +
+ +
+
+
+
+
+ + + + +
+
+
+
+
+ +
+ +
+
+

Direct Chat

+
+ 3 + + + +
+
+
+ +
+ +
+
+ Alexander Pierce + 23 Jan 2:00 pm +
+ message user image +
+ Is this template really for free? That's unbelievable! +
+
+ + +
+
+ Sarah Bullock + 23 Jan 2:05 pm +
+ message user image +
+ You better believe it! +
+
+
+ + +
+ +
+
+
+
+
+ + + + +
+
+
+
+
+ +
+ +
+
+

Direct Chat

+
+ 3 + + + +
+
+
+ +
+ +
+
+ Alexander Pierce + 23 Jan 2:00 pm +
+ message user image +
+ Is this template really for free? That's unbelievable! +
+
+ + +
+
+ Sarah Bullock + 23 Jan 2:05 pm +
+ message user image +
+ You better believe it! +
+
+
+ + +
+ +
+
+
+
+
+ + + + +
+
+
+
+
+ +
+ +
+
+

Direct Chat

+
+ 3 + + + +
+
+
+ +
+ +
+
+ Alexander Pierce + 23 Jan 2:00 pm +
+ message user image +
+ Is this template really for free? That's unbelievable! +
+
+ + +
+
+ Sarah Bullock + 23 Jan 2:05 pm +
+ message user image +
+ You better believe it! +
+
+
+ + +
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+

Direct Chat Markup

+ 

+<-- Construct the box with style you want. Here we are using box-danger -->
+<-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
+<-- The contextual class should match the box, so we are using direct-chat-danger -->
+<div class="box box-danger direct-chat direct-chat-danger">
+  <div class="box-header with-border">
+    <h3 class="box-title">Direct Chat</h3>
+    <div class="box-tools pull-right">
+      <span data-toggle="tooltip" title="3 New Messages" class='badge bg-red'>3</span>
+      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+      <-- In box-tools add this button if you intend to use the contacts pane -->
+      <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+    </div>
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    <!-- Conversations are loaded here -->
+    <div class="direct-chat-messages">
+      <!-- Message. Default to the left -->
+      <div class="direct-chat-msg">
+        <div class='direct-chat-info clearfix'>
+          <span class='direct-chat-name pull-left'>Alexander Pierce</span>
+          <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span>
+        </div><!-- /.direct-chat-info -->
+        <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
+        <div class="direct-chat-text">
+          Is this template really for free? That's unbelievable!
+        </div><!-- /.direct-chat-text -->
+      </div><!-- /.direct-chat-msg -->
+
+      <!-- Message to the right -->
+      <div class="direct-chat-msg right">
+        <div class='direct-chat-info clearfix'>
+          <span class='direct-chat-name pull-right'>Sarah Bullock</span>
+          <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span>
+        </div><!-- /.direct-chat-info -->
+        <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
+        <div class="direct-chat-text">
+          You better believe it!
+        </div><!-- /.direct-chat-text -->
+      </div><!-- /.direct-chat-msg -->                    
+    </div><!--/.direct-chat-messages-->
+
+    <!-- Contacts are loaded here -->
+    <div class="direct-chat-contacts">
+      <ul class='contacts-list'>
+        <li>
+          <a href='#'>
+            <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
+            <div class='contacts-list-info'>
+              <span class='contacts-list-name'>
+                Count Dracula
+                <small class='contacts-list-date pull-right'>2/28/2015</small>
+              </span>
+              <span class='contacts-list-msg'>How have you been? I was...</span>
+            </div><!-- /.contacts-list-info -->
+          </a>
+        </li><!-- End Contact Item -->                      
+      </ul><!-- /.contatcts-list -->
+    </div><!-- /.direct-chat-pane -->
+  </div><!-- /.box-body -->
+  <div class="box-footer">
+    <div class="input-group">
+      <input type="text" name="message" placeholder="Type Message ..." class="form-control"/>
+      <span class="input-group-btn">
+        <button type="button" class="btn btn-danger btn-flat">Send</button>
+      </span>
+    </div>
+  </div><!-- /.box-footer-->
+</div><!--/.direct-chat -->
+
+
\ No newline at end of file diff --git a/documentation/build/include/dependencies.html b/documentation/build/include/dependencies.html new file mode 100644 index 00000000..f7644cbd --- /dev/null +++ b/documentation/build/include/dependencies.html @@ -0,0 +1,10 @@ +
+

Dependencies

+

AdminLTE depends on two main frameworks. + The downloadable package contains both of these libraries, so you don't have to manually download them.

+ +
\ No newline at end of file diff --git a/documentation/build/include/download.html b/documentation/build/include/download.html new file mode 100644 index 00000000..ead92493 --- /dev/null +++ b/documentation/build/include/download.html @@ -0,0 +1,51 @@ +
+

Download

+

+ AdminLTE can be downloaded in two different versions, each appealing to different + skill levels and use case. +

+
+
+
+
+

Ready

+ +
+
+

Compiled and ready to use in production. Download this version + if you don't want to customize AdminLTE's LESS files.

+ Download +
+
+
+
+
+
+

Source Code

+ +
+
+

All files including the compiled CSS. Download this version + if you plan on customizing the template. Requires a LESS compiler.

+ Download +
+
+
+
+ 
File Hierarchy of the Source Code Package
+
+AdminLTE/
+├── dist/
+│   ├── CSS/
+│   ├── JS
+│   ├── img
+├── build/
+│   ├── less/
+│   │   ├── AdminLTE's Less files
+│   └── Bootstrap-less/ (Only for reference. No modifications have been made)
+│       ├── mixins/
+│       ├── variables.less
+│       ├── mixins.less
+└── plugins/
+    ├── All the customized plugins CSS and JS files
+
\ No newline at end of file diff --git a/documentation/build/include/faq.html b/documentation/build/include/faq.html new file mode 100644 index 00000000..8a3b7201 --- /dev/null +++ b/documentation/build/include/faq.html @@ -0,0 +1,17 @@ +
+

FAQ

+

Can AdminLTE be used with Wordpress?

+

AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.

+ +

Is there an integration guide for PHP frameworks such as Yii or Symphony?

+

Short answer, no. However, there are forks and tutorials around the web that + provide info on how to integrate with many different frameworks. There are even versions of + AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET. +

+ +

How do I get notified of new AdminLTE versions?

+

The best option is to subscribe to our mailing list using the + subscription form on Almsaeed Studio. + If that's not appealing to you, you may watch the repository on Github + or visit Almsaeed Studio every now and then for updates and announcements.

+
\ No newline at end of file diff --git a/documentation/build/include/introduction.html b/documentation/build/include/introduction.html new file mode 100644 index 00000000..5ea9ec6d --- /dev/null +++ b/documentation/build/include/introduction.html @@ -0,0 +1,12 @@ +
+

Introduction

+

+ AdminLTE is a popular open source WebApp template for admin dashboards and control panels. + It is a responsive HTML template that is based on the CSS framework Bootstrap 3. + 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. AdminLTE 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. +

+
\ No newline at end of file diff --git a/documentation/build/include/layout.html b/documentation/build/include/layout.html new file mode 100644 index 00000000..2404ba51 --- /dev/null +++ b/documentation/build/include/layout.html @@ -0,0 +1,432 @@ +
+

Layout

+

The layout consists of four major parts:

+ +
+

Tip!

+

The starter page is a good place to start building your app if you'd like to start from scratch.

+
+

A full layout example for a quick start

+ 
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>AdminLTE 2 | Dashboard</title>
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+    <!-- Bootstrap 3.3.2 -->
+    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+    <!-- Font Awesome Icons -->
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+    <!-- Ionicons -->
+    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <!-- Theme style -->
+    <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
+    <!-- AdminLTE Skins. Choose a skin from the css/skins 
+         folder instead of downloading all of them to reduce the load. -->
+    <link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
+
+    <!-- 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.3.0/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body class="skin-blue">
+    <!-- Site wrapper -->
+    <div class="wrapper">
+      
+      <header class="main-header">
+        <a href="index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Header Navbar: style can be found in header.less -->
+        <nav class="navbar navbar-static-top" role="navigation">
+          <!-- Sidebar toggle button-->
+          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <div class="navbar-custom-menu">
+            <ul class="nav navbar-nav">
+              <!-- Messages: style can be found in dropdown.less-->
+              <li class="dropdown messages-menu">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  <i class="fa fa-envelope-o"></i>
+                  <span class="label label-success">4</span>
+                </a>
+                <ul class="dropdown-menu">
+                  <li class="header">You have 4 messages</li>
+                  <li>
+                    <!-- inner menu: contains the actual data -->
+                    <ul class="menu">
+                      <li><!-- start message -->
+                        <a href="#">
+                          <div class="pull-left">
+                            <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+                          </div>
+                          <h4>
+                            Support Team
+                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                          </h4>
+                          <p>Why not buy a new awesome theme?</p>
+                        </a>
+                      </li><!-- end message -->
+                    </ul>
+                  </li>
+                  <li class="footer"><a href="#">See All Messages</a></li>
+                </ul>
+              </li>
+              <!-- Notifications: style can be found in dropdown.less -->
+              <li class="dropdown notifications-menu">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  <i class="fa fa-bell-o"></i>
+                  <span class="label label-warning">10</span>
+                </a>
+                <ul class="dropdown-menu">
+                  <li class="header">You have 10 notifications</li>
+                  <li>
+                    <!-- inner menu: contains the actual data -->
+                    <ul class="menu">
+                      <li>
+                        <a href="#">
+                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="footer"><a href="#">View all</a></li>
+                </ul>
+              </li>
+              <!-- Tasks: style can be found in dropdown.less -->
+              <li class="dropdown tasks-menu">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  <i class="fa fa-flag-o"></i>
+                  <span class="label label-danger">9</span>
+                </a>
+                <ul class="dropdown-menu">
+                  <li class="header">You have 9 tasks</li>
+                  <li>
+                    <!-- inner menu: contains the actual data -->
+                    <ul class="menu">
+                      <li><!-- Task item -->
+                        <a href="#">
+                          <h3>
+                            Design some buttons
+                            <small class="pull-right">20%</small>
+                          </h3>
+                          <div class="progress xs">
+                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">20% Complete</span>
+                            </div>
+                          </div>
+                        </a>
+                      </li><!-- end task item -->
+                    </ul>
+                  </li>
+                  <li class="footer">
+                    <a href="#">View all tasks</a>
+                  </li>
+                </ul>
+              </li>
+              <!-- User Account: style can be found in dropdown.less -->
+              <li class="dropdown user user-menu">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+                  <span class="hidden-xs">Alexander Pierce</span>
+                </a>
+                <ul class="dropdown-menu">
+                  <!-- User image -->
+                  <li class="user-header">
+                    <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+                    <p>
+                      Alexander Pierce - Web Developer
+                      <small>Member since Nov. 2012</small>
+                    </p>
+                  </li>
+                  <!-- Menu Body -->
+                  <li class="user-body">
+                    <div class="col-xs-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-xs-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-xs-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
+                  </li>
+                  <!-- Menu Footer-->
+                  <li class="user-footer">
+                    <div class="pull-left">
+                      <a href="#" class="btn btn-default btn-flat">Profile</a>
+                    </div>
+                    <div class="pull-right">
+                      <a href="#" class="btn btn-default btn-flat">Sign out</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </header>
+
+      <!-- =============================================== -->
+
+      <!-- Left side column. contains the sidebar -->
+      <aside class="main-sidebar">
+        <!-- sidebar: style can be found in sidebar.less -->
+        <section class="sidebar">
+          <!-- Sidebar user panel -->
+          <div class="user-panel">
+            <div class="pull-left image">
+              <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+            </div>
+            <div class="pull-left info">
+              <p>Alexander Pierce</p>
+
+              <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+            </div>
+          </div>
+          <!-- search form -->
+          <form action="#" method="get" class="sidebar-form">
+            <div class="input-group">
+              <input type="text" name="q" class="form-control" placeholder="Search..."/>
+              <span class="input-group-btn">
+                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+              </span>
+            </div>
+          </form>
+          <!-- /.search form -->
+          <!-- sidebar menu: : style can be found in sidebar.less -->
+          <ul class="sidebar-menu">
+            <li class="header">MAIN NAVIGATION</li>
+            <li class="treeview">
+              <a href="#">
+                <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
+                <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
+              </ul>
+            </li>
+            <li class="treeview">
+              <a href="#">
+                <i class="fa fa-files-o"></i>
+                <span>Layout Options</span>
+                <span class="label label-primary pull-right">4</span>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
+                <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
+                <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
+                <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
+              </ul>
+            </li>
+            <li>
+              <a href="../widgets.html">
+                <i class="fa fa-th"></i> <span>Widgets</span> <small class="label pull-right bg-green">Hot</small>
+              </a>
+            </li>            
+            <li class="treeview">
+              <a href="#">
+                <i class="fa fa-pie-chart"></i>
+                <span>Charts</span>
+                <i class="fa fa-angle-left pull-right"></i>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
+                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
+                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
+              </ul>
+            </li>            
+            <li class="treeview">
+              <a href="#">
+                <i class="fa fa-laptop"></i>
+                <span>UI Elements</span>
+                <i class="fa fa-angle-left pull-right"></i>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
+                <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
+                <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
+                <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
+                <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
+                <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
+              </ul>
+            </li>
+            <li class="treeview">
+              <a href="#">
+                <i class="fa fa-edit"></i> <span>Forms</span>
+                <i class="fa fa-angle-left pull-right"></i>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
+                <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
+                <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
+              </ul>
+            </li>
+            <li class="treeview">
+              <a href="#">
+                <i class="fa fa-table"></i> <span>Tables</span>
+                <i class="fa fa-angle-left pull-right"></i>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
+                <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
+              </ul>
+            </li>
+            <li>
+              <a href="../calendar.html">
+                <i class="fa fa-calendar"></i> <span>Calendar</span>
+                <small class="label pull-right bg-red">3</small>
+              </a>
+            </li>
+            <li>
+              <a href="../mailbox/mailbox.html">
+                <i class="fa fa-envelope"></i> <span>Mailbox</span>
+                <small class="label pull-right bg-yellow">12</small>
+              </a>
+            </li>
+            <li class="treeview active">
+              <a href="#">
+                <i class="fa fa-folder"></i> <span>Examples</span>
+                <i class="fa fa-angle-left pull-right"></i>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
+                <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
+                <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li>
+                <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
+                <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
+                <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
+                <li class="active"><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
+              </ul>
+            </li>
+            <li class="treeview">
+              <a href="#">
+                <i class="fa fa-share"></i> <span>Multilevel</span>
+                <i class="fa fa-angle-left pull-right"></i>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
+                <li>
+                  <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
+                  <ul class="treeview-menu">
+                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
+                    <li>
+                      <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
+                      <ul class="treeview-menu">
+                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
+                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
+              </ul>
+            </li>
+            <li><a href="documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li class="header">LABELS</li>
+            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+          </ul>
+        </section>
+        <!-- /.sidebar -->
+      </aside>
+
+      <!-- =============================================== -->
+
+      <!-- Right side column. Contains the navbar and content of the page -->
+      <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+          <h1>
+            Blank page
+            <small>it all starts here</small>
+          </h1>
+          <ol class="breadcrumb">
+            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+            <li><a href="#">Examples</a></li>
+            <li class="active">Blank page</li>
+          </ol>
+        </section>
+
+        <!-- Main content -->
+        <section class="content">
+
+          <!-- Default box -->
+          <div class="box">
+            <div class="box-header with-border">
+              <h3 class="box-title">Title</h3>
+              <div class="box-tools pull-right">
+                <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
+                <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
+              </div>
+            </div>
+            <div class="box-body">
+              Start creating your amazing application!
+            </div><!-- /.box-body -->
+            <div class="box-footer">
+              Footer
+            </div><!-- /.box-footer-->
+          </div><!-- /.box -->
+
+        </section><!-- /.content -->
+      </div><!-- /.content-wrapper -->
+
+      <footer class="main-footer">
+        <div class="pull-right hidden-xs">
+          <b>Version</b> 2.0
+        </div>
+        <strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
+      </footer>
+    </div><!-- ./wrapper -->
+
+    <!-- jQuery 2.1.3 -->
+    <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- Bootstrap 3.3.2 JS -->
+    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+    <!-- SlimScroll -->
+    <script src="plugins/slimScroll/jquery.slimScroll.min.js" type="text/javascript"></script>
+    <!-- FastClick -->
+    <script src='plugins/fastclick/fastclick.min.js'></script>
+    <!-- AdminLTE App -->
+    <script src="dist/js/app.min.js" type="text/javascript"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="dist/js/demo.js" type="text/javascript"></script>
+  </body>
+</html>
+ +

Layout Options

+

AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added + to the body tag to get the desired goal.

+ +

Note: you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.

+ +

Skins

+

Skins can be found in the dist/css/skins folder. + Choose and the skin file that you want then add the appropriate + class to the body tag to change the template's appearance. Here is the list of available skins:

+ +
\ No newline at end of file diff --git a/documentation/build/include/license.html b/documentation/build/include/license.html new file mode 100644 index 00000000..ba2d1370 --- /dev/null +++ b/documentation/build/include/license.html @@ -0,0 +1,43 @@ +
+

License

+

AdminLTE

+

AdminLTE is an open source project that is licensed under the MIT license. + This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software." + Attribution is not required (though very much appreciated).

+

AdminLTE Premium Collection (Coming Soon)

+

AdminLTE's premium collection provides a set of non-open source components, plugins and widgets. To use + the premium collection, you must buy a license that fits your use case. The following is the set of available licenses:

+

Single Application License

+ +

Multiple Applications License

+ + +

Extended License

+

This license must be purchased if you intend to license, sublicense, redistribute, or resell the final product.

+ +

For further question about which license you should get, please email us at support@almsaeedstudio.com.

+
\ No newline at end of file diff --git a/documentation/build/include/plugins.html b/documentation/build/include/plugins.html new file mode 100644 index 00000000..5edd05bc --- /dev/null +++ b/documentation/build/include/plugins.html @@ -0,0 +1,47 @@ +
+

Plugins

+

AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/documentation/build/include/upgrade.html b/documentation/build/include/upgrade.html new file mode 100644 index 00000000..25f6fe95 --- /dev/null +++ b/documentation/build/include/upgrade.html @@ -0,0 +1,26 @@ +
+

Upgrade Guide

+

To upgrade from version 1.x to the lateset version, follow this guide.

+

New Files

+

Make sure you update all CSS and JS files that are related to AdminLTE. Otherwise, the layout will not + function properly. Most important files are AdminLTE.css, skins CSS files, and app.js.

+

Layout Changes

+
    +
  1. The .wrapper div must be placed immediately after the body tag rather than after the header
    2. +
  2. Change the .header div to .main-header <div class="main-header">
    3. +
  3. Change the .right-side class to .content-wrapper <div class="content-wrapper">
    4. +
  4. Change the .left-side class to .main-sidebar <div class="main-sidebar">
    5. +
  5. In the navbar, change .navbar-right to .navbar-custom-menu <div class="navbar-custom-menu">
    6. +
+

Navbar Custom Dropdown Menus

+
    +
  1. The icons in the notification menu do not need bg-* classes. They should be replaced with contextual text color class such as text-aqua or text-red.
    2. +
+

Login, Registration and Lockscreen Pages

+

There are major changes to the HTML markup and style to these pages. The best way is to copy the page's code and customize it.

+

And you should be set to go!

+

Mailbox

+

Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views, + you should use the provided HTML files in the pages/mailbox folder.

+

Note: the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.

+
\ No newline at end of file diff --git a/documentation/build/index.html b/documentation/build/index.html new file mode 100644 index 00000000..517d943c --- /dev/null +++ b/documentation/build/index.html @@ -0,0 +1,167 @@ + + + + + + AdminLTE 2 | Documentation + + + + + + + + + + + + + + + + + +
+ +
+ + + + +
+ + + + +
+ +
+

+ AdminLTE Documentation + Current version 2.0 +

+
    +
  1. Home
    2. +
  2. Documentation
    3. +
+
+ + +
+
+

Warning!

+ This documentation is under development. Some information may change as the progress of creating the documentation continues. +
+ include "introduction.html" + + + + include "download.html" + + + + include "dependencies.html" + + + + include "advice.html" + + + + include "layout.html" + + + + include "components.html" + + + + include "plugins.html" + + + + include "browsers.html" + + + + include "upgrade.html" + + + + include "faq.html" + + + + include "license.html" + +
+
+ +
+ + Copyright © 2014-2015 Almsaeed Studio. All rights reserved. +
+ +
+ + + + + + + + + + + + + + + diff --git a/documentation/docs.js b/documentation/docs.js new file mode 100644 index 00000000..94a10123 --- /dev/null +++ b/documentation/docs.js @@ -0,0 +1,54 @@ +/* + * Documentation specific JS script + */ +$(function () { + var slideToTop = $("
"); + slideToTop.html(''); + slideToTop.css({ + position: 'fixed', + bottom: '20px', + right: '25px', + width: '40px', + height: '40px', + color: '#eee', + 'font-size': '', + 'line-height': '40px', + 'text-align': 'center', + 'background-color': '#222d32', + cursor: 'pointer', + 'border-radius': '5px', + 'z-index': '99999', + opacity: '.7', + 'display': 'none' + }); + slideToTop.on('mouseenter', function () { + $(this).css('opacity', '1'); + }); + slideToTop.on('mouseout', function () { + $(this).css('opacity', '.7'); + }); + $('.wrapper').append(slideToTop); + $(window).scroll(function () { + if ($(window).scrollTop() >= 150) { + if (!$(slideToTop).is(':visible')) { + $(slideToTop).fadeIn(500); + } + } else { + $(slideToTop).fadeOut(500); + } + }); + $(slideToTop).click(function () { + $("body").animate({ + scrollTop: 0 + }, 500); + }); + $(".sidebar-menu li a").click(function () { + var $this = $(this); + var target = $this.attr("href"); + if (typeof target === 'string') { + $("body").animate({ + scrollTop: ($(target).offset().top) + "px" + }, 500); + } + }); +}); \ No newline at end of file diff --git a/documentation/index.html b/documentation/index.html old mode 100755 new mode 100644 index 980e9220..e64c9f77 --- a/documentation/index.html +++ b/documentation/index.html @@ -14,6 +14,7 @@ + @@ -21,132 +22,6 @@ -
@@ -164,6 +39,7 @@
@@ -217,7 +93,7 @@
-
+

Warning!

This documentation is under development. Some information may change as the progress of creating the documentation continues.
@@ -272,20 +148,20 @@ 
File Hierarchy of the Source Code Package
 
-AdminLTE/
-├── dist/
-│   ├── CSS/
-│   ├── JS
-│   ├── img
-├── build/
-│   ├── less/
-│   │   ├── AdminLTE's Less files
-│   └── Bootstrap-less/ (Only for reference. No modifications have been made)
-│       ├── mixins/
-│       ├── variables.less
-│       ├── mixins.less
-└── plugins/
-    ├── All the customized plugins CSS and JS files
+ AdminLTE/ + ├── dist/ + │ ├── CSS/ + │ ├── JS + │ ├── img + ├── build/ + │ ├── less/ + │ │ ├── AdminLTE's Less files + │ └── Bootstrap-less/ (Only for reference. No modifications have been made) + │ ├── mixins/ + │ ├── variables.less + │ ├── mixins.less + └── plugins/ + ├── All the customized plugins CSS and JS files @@ -294,7 +170,7 @@ AdminLTE/

Dependencies

AdminLTE depends on two main frameworks. The downloadable package contains both of these libraries, so you don't have to manually download them.

-

A full layout example for a quick start

-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>AdminLTE 2 | Dashboard</title>
-    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
-    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-    <!-- Font Awesome Icons -->
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
-    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
-    <!-- Theme style -->
-    <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    <!-- AdminLTE Skins. Choose a skin from the css/skins 
-         folder instead of downloading all of them to reduce the load. -->
-    <link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
-
-    <!-- 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.3.0/respond.min.js"></script>
-    <![endif]-->
-  </head>
-  <body class="skin-blue">
-    <!-- Site wrapper -->
-    <div class="wrapper">
-      
-      <header class="main-header">
-        <a href="index2.html" class="logo"><b>Admin</b>LTE</a>
-        <!-- Header Navbar: style can be found in header.less -->
-        <nav class="navbar navbar-static-top" role="navigation">
-          <!-- Sidebar toggle button-->
-          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </a>
-          <div class="navbar-custom-menu">
-            <ul class="nav navbar-nav">
-              <!-- Messages: style can be found in dropdown.less-->
-              <li class="dropdown messages-menu">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  <i class="fa fa-envelope-o"></i>
-                  <span class="label label-success">4</span>
-                </a>
-                <ul class="dropdown-menu">
-                  <li class="header">You have 4 messages</li>
-                  <li>
-                    <!-- inner menu: contains the actual data -->
-                    <ul class="menu">
-                      <li><!-- start message -->
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <meta charset="UTF-8">
+              <title>AdminLTE 2 | Dashboard</title>
+              <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+              <!-- Bootstrap 3.3.2 -->
+              <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+              <!-- Font Awesome Icons -->
+              <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+              <!-- Ionicons -->
+              <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+              <!-- Theme style -->
+              <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
+              <!-- AdminLTE Skins. Choose a skin from the css/skins 
+                   folder instead of downloading all of them to reduce the load. -->
+              <link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
+
+              <!-- 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.3.0/respond.min.js"></script>
+              <![endif]-->
+            </head>
+            <body class="skin-blue">
+              <!-- Site wrapper -->
+              <div class="wrapper">
+                
+                <header class="main-header">
+                  <a href="index2.html" class="logo"><b>Admin</b>LTE</a>
+                  <!-- Header Navbar: style can be found in header.less -->
+                  <nav class="navbar navbar-static-top" role="navigation">
+                    <!-- Sidebar toggle button-->
+                    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+                      <span class="sr-only">Toggle navigation</span>
+                      <span class="icon-bar"></span>
+                      <span class="icon-bar"></span>
+                      <span class="icon-bar"></span>
+                    </a>
+                    <div class="navbar-custom-menu">
+                      <ul class="nav navbar-nav">
+                        <!-- Messages: style can be found in dropdown.less-->
+                        <li class="dropdown messages-menu">
+                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <i class="fa fa-envelope-o"></i>
+                            <span class="label label-success">4</span>
+                          </a>
+                          <ul class="dropdown-menu">
+                            <li class="header">You have 4 messages</li>
+                            <li>
+                              <!-- inner menu: contains the actual data -->
+                              <ul class="menu">
+                                <li><!-- start message -->
+                                  <a href="#">
+                                    <div class="pull-left">
+                                      <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+                                    </div>
+                                    <h4>
+                                      Support Team
+                                      <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                                    </h4>
+                                    <p>Why not buy a new awesome theme?</p>
+                                  </a>
+                                </li><!-- end message -->
+                              </ul>
+                            </li>
+                            <li class="footer"><a href="#">See All Messages</a></li>
+                          </ul>
+                        </li>
+                        <!-- Notifications: style can be found in dropdown.less -->
+                        <li class="dropdown notifications-menu">
+                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <i class="fa fa-bell-o"></i>
+                            <span class="label label-warning">10</span>
+                          </a>
+                          <ul class="dropdown-menu">
+                            <li class="header">You have 10 notifications</li>
+                            <li>
+                              <!-- inner menu: contains the actual data -->
+                              <ul class="menu">
+                                <li>
+                                  <a href="#">
+                                    <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                                  </a>
+                                </li>
+                              </ul>
+                            </li>
+                            <li class="footer"><a href="#">View all</a></li>
+                          </ul>
+                        </li>
+                        <!-- Tasks: style can be found in dropdown.less -->
+                        <li class="dropdown tasks-menu">
+                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <i class="fa fa-flag-o"></i>
+                            <span class="label label-danger">9</span>
+                          </a>
+                          <ul class="dropdown-menu">
+                            <li class="header">You have 9 tasks</li>
+                            <li>
+                              <!-- inner menu: contains the actual data -->
+                              <ul class="menu">
+                                <li><!-- Task item -->
+                                  <a href="#">
+                                    <h3>
+                                      Design some buttons
+                                      <small class="pull-right">20%</small>
+                                    </h3>
+                                    <div class="progress xs">
+                                      <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                                        <span class="sr-only">20% Complete</span>
+                                      </div>
+                                    </div>
+                                  </a>
+                                </li><!-- end task item -->
+                              </ul>
+                            </li>
+                            <li class="footer">
+                              <a href="#">View all tasks</a>
+                            </li>
+                          </ul>
+                        </li>
+                        <!-- User Account: style can be found in dropdown.less -->
+                        <li class="dropdown user user-menu">
+                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+                            <span class="hidden-xs">Alexander Pierce</span>
+                          </a>
+                          <ul class="dropdown-menu">
+                            <!-- User image -->
+                            <li class="user-header">
+                              <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+                              <p>
+                                Alexander Pierce - Web Developer
+                                <small>Member since Nov. 2012</small>
+                              </p>
+                            </li>
+                            <!-- Menu Body -->
+                            <li class="user-body">
+                              <div class="col-xs-4 text-center">
+                                <a href="#">Followers</a>
+                              </div>
+                              <div class="col-xs-4 text-center">
+                                <a href="#">Sales</a>
+                              </div>
+                              <div class="col-xs-4 text-center">
+                                <a href="#">Friends</a>
+                              </div>
+                            </li>
+                            <!-- Menu Footer-->
+                            <li class="user-footer">
+                              <div class="pull-left">
+                                <a href="#" class="btn btn-default btn-flat">Profile</a>
+                              </div>
+                              <div class="pull-right">
+                                <a href="#" class="btn btn-default btn-flat">Sign out</a>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </nav>
+                </header>
+
+                <!-- =============================================== -->
+
+                <!-- Left side column. contains the sidebar -->
+                <aside class="main-sidebar">
+                  <!-- sidebar: style can be found in sidebar.less -->
+                  <section class="sidebar">
+                    <!-- Sidebar user panel -->
+                    <div class="user-panel">
+                      <div class="pull-left image">
+                        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+                      </div>
+                      <div class="pull-left info">
+                        <p>Alexander Pierce</p>
+
+                        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+                      </div>
+                    </div>
+                    <!-- search form -->
+                    <form action="#" method="get" class="sidebar-form">
+                      <div class="input-group">
+                        <input type="text" name="q" class="form-control" placeholder="Search..."/>
+                        <span class="input-group-btn">
+                          <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                        </span>
+                      </div>
+                    </form>
+                    <!-- /.search form -->
+                    <!-- sidebar menu: : style can be found in sidebar.less -->
+                    <ul class="sidebar-menu">
+                      <li class="header">MAIN NAVIGATION</li>
+                      <li class="treeview">
                         <a href="#">
-                          <div class="pull-left">
-                            <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
-                          </div>
-                          <h4>
-                            Support Team
-                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
-                          </h4>
-                          <p>Why not buy a new awesome theme?</p>
+                          <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
                         </a>
-                      </li><!-- end message -->
-                    </ul>
-                  </li>
-                  <li class="footer"><a href="#">See All Messages</a></li>
-                </ul>
-              </li>
-              <!-- Notifications: style can be found in dropdown.less -->
-              <li class="dropdown notifications-menu">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  <i class="fa fa-bell-o"></i>
-                  <span class="label label-warning">10</span>
-                </a>
-                <ul class="dropdown-menu">
-                  <li class="header">You have 10 notifications</li>
-                  <li>
-                    <!-- inner menu: contains the actual data -->
-                    <ul class="menu">
+                        <ul class="treeview-menu">
+                          <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
+                          <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
+                        </ul>
+                      </li>
+                      <li class="treeview">
+                        <a href="#">
+                          <i class="fa fa-files-o"></i>
+                          <span>Layout Options</span>
+                          <span class="label label-primary pull-right">4</span>
+                        </a>
+                        <ul class="treeview-menu">
+                          <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
+                          <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
+                          <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
+                          <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
+                        </ul>
+                      </li>
                       <li>
+                        <a href="../widgets.html">
+                          <i class="fa fa-th"></i> <span>Widgets</span> <small class="label pull-right bg-green">Hot</small>
+                        </a>
+                      </li>            
+                      <li class="treeview">
                         <a href="#">
-                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                          <i class="fa fa-pie-chart"></i>
+                          <span>Charts</span>
+                          <i class="fa fa-angle-left pull-right"></i>
                         </a>
+                        <ul class="treeview-menu">
+                          <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
+                          <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
+                          <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
+                        </ul>
+                      </li>            
+                      <li class="treeview">
+                        <a href="#">
+                          <i class="fa fa-laptop"></i>
+                          <span>UI Elements</span>
+                          <i class="fa fa-angle-left pull-right"></i>
+                        </a>
+                        <ul class="treeview-menu">
+                          <li><a href="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
+                          <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
+                          <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
+                          <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
+                          <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
+                          <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
+                        </ul>
                       </li>
-                    </ul>
-                  </li>
-                  <li class="footer"><a href="#">View all</a></li>
-                </ul>
-              </li>
-              <!-- Tasks: style can be found in dropdown.less -->
-              <li class="dropdown tasks-menu">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  <i class="fa fa-flag-o"></i>
-                  <span class="label label-danger">9</span>
-                </a>
-                <ul class="dropdown-menu">
-                  <li class="header">You have 9 tasks</li>
-                  <li>
-                    <!-- inner menu: contains the actual data -->
-                    <ul class="menu">
-                      <li><!-- Task item -->
+                      <li class="treeview">
+                        <a href="#">
+                          <i class="fa fa-edit"></i> <span>Forms</span>
+                          <i class="fa fa-angle-left pull-right"></i>
+                        </a>
+                        <ul class="treeview-menu">
+                          <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
+                          <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
+                          <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
+                        </ul>
+                      </li>
+                      <li class="treeview">
+                        <a href="#">
+                          <i class="fa fa-table"></i> <span>Tables</span>
+                          <i class="fa fa-angle-left pull-right"></i>
+                        </a>
+                        <ul class="treeview-menu">
+                          <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
+                          <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
+                        </ul>
+                      </li>
+                      <li>
+                        <a href="../calendar.html">
+                          <i class="fa fa-calendar"></i> <span>Calendar</span>
+                          <small class="label pull-right bg-red">3</small>
+                        </a>
+                      </li>
+                      <li>
+                        <a href="../mailbox/mailbox.html">
+                          <i class="fa fa-envelope"></i> <span>Mailbox</span>
+                          <small class="label pull-right bg-yellow">12</small>
+                        </a>
+                      </li>
+                      <li class="treeview active">
                         <a href="#">
-                          <h3>
-                            Design some buttons
-                            <small class="pull-right">20%</small>
-                          </h3>
-                          <div class="progress xs">
-                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                              <span class="sr-only">20% Complete</span>
-                            </div>
-                          </div>
+                          <i class="fa fa-folder"></i> <span>Examples</span>
+                          <i class="fa fa-angle-left pull-right"></i>
                         </a>
-                      </li><!-- end task item -->
+                        <ul class="treeview-menu">
+                          <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
+                          <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
+                          <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li>
+                          <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
+                          <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
+                          <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
+                          <li class="active"><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
+                        </ul>
+                      </li>
+                      <li class="treeview">
+                        <a href="#">
+                          <i class="fa fa-share"></i> <span>Multilevel</span>
+                          <i class="fa fa-angle-left pull-right"></i>
+                        </a>
+                        <ul class="treeview-menu">
+                          <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
+                          <li>
+                            <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
+                            <ul class="treeview-menu">
+                              <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
+                              <li>
+                                <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
+                                <ul class="treeview-menu">
+                                  <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
+                                  <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
+                                </ul>
+                              </li>
+                            </ul>
+                          </li>
+                          <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
+                        </ul>
+                      </li>
+                      <li><a href="documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+                      <li class="header">LABELS</li>
+                      <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
+                      <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
+                      <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
                     </ul>
-                  </li>
-                  <li class="footer">
-                    <a href="#">View all tasks</a>
-                  </li>
-                </ul>
-              </li>
-              <!-- User Account: style can be found in dropdown.less -->
-              <li class="dropdown user user-menu">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
-                  <span class="hidden-xs">Alexander Pierce</span>
-                </a>
-                <ul class="dropdown-menu">
-                  <!-- User image -->
-                  <li class="user-header">
-                    <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
-                    <p>
-                      Alexander Pierce - Web Developer
-                      <small>Member since Nov. 2012</small>
-                    </p>
-                  </li>
-                  <!-- Menu Body -->
-                  <li class="user-body">
-                    <div class="col-xs-4 text-center">
-                      <a href="#">Followers</a>
-                    </div>
-                    <div class="col-xs-4 text-center">
-                      <a href="#">Sales</a>
-                    </div>
-                    <div class="col-xs-4 text-center">
-                      <a href="#">Friends</a>
-                    </div>
-                  </li>
-                  <!-- Menu Footer-->
-                  <li class="user-footer">
-                    <div class="pull-left">
-                      <a href="#" class="btn btn-default btn-flat">Profile</a>
-                    </div>
-                    <div class="pull-right">
-                      <a href="#" class="btn btn-default btn-flat">Sign out</a>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </div>
-        </nav>
-      </header>
-
-      <!-- =============================================== -->
-
-      <!-- Left side column. contains the sidebar -->
-      <aside class="main-sidebar">
-        <!-- sidebar: style can be found in sidebar.less -->
-        <section class="sidebar">
-          <!-- Sidebar user panel -->
-          <div class="user-panel">
-            <div class="pull-left image">
-              <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
-            </div>
-            <div class="pull-left info">
-              <p>Alexander Pierce</p>
-
-              <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
-            </div>
-          </div>
-          <!-- search form -->
-          <form action="#" method="get" class="sidebar-form">
-            <div class="input-group">
-              <input type="text" name="q" class="form-control" placeholder="Search..."/>
-              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
-              </span>
-            </div>
-          </form>
-          <!-- /.search form -->
-          <!-- sidebar menu: : style can be found in sidebar.less -->
-          <ul class="sidebar-menu">
-            <li class="header">MAIN NAVIGATION</li>
-            <li class="treeview">
-              <a href="#">
-                <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
-              </a>
-              <ul class="treeview-menu">
-                <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
-                <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
-              </ul>
-            </li>
-            <li class="treeview">
-              <a href="#">
-                <i class="fa fa-files-o"></i>
-                <span>Layout Options</span>
-                <span class="label label-primary pull-right">4</span>
-              </a>
-              <ul class="treeview-menu">
-                <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
-                <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
-                <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
-                <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
-              </ul>
-            </li>
-            <li>
-              <a href="../widgets.html">
-                <i class="fa fa-th"></i> <span>Widgets</span> <small class="label pull-right bg-green">Hot</small>
-              </a>
-            </li>            
-            <li class="treeview">
-              <a href="#">
-                <i class="fa fa-pie-chart"></i>
-                <span>Charts</span>
-                <i class="fa fa-angle-left pull-right"></i>
-              </a>
-              <ul class="treeview-menu">
-                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
-                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
-                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
-              </ul>
-            </li>            
-            <li class="treeview">
-              <a href="#">
-                <i class="fa fa-laptop"></i>
-                <span>UI Elements</span>
-                <i class="fa fa-angle-left pull-right"></i>
-              </a>
-              <ul class="treeview-menu">
-                <li><a href="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
-                <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
-                <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
-                <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
-                <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
-                <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
-              </ul>
-            </li>
-            <li class="treeview">
-              <a href="#">
-                <i class="fa fa-edit"></i> <span>Forms</span>
-                <i class="fa fa-angle-left pull-right"></i>
-              </a>
-              <ul class="treeview-menu">
-                <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
-                <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
-                <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
-              </ul>
-            </li>
-            <li class="treeview">
-              <a href="#">
-                <i class="fa fa-table"></i> <span>Tables</span>
-                <i class="fa fa-angle-left pull-right"></i>
-              </a>
-              <ul class="treeview-menu">
-                <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
-                <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
-              </ul>
-            </li>
-            <li>
-              <a href="../calendar.html">
-                <i class="fa fa-calendar"></i> <span>Calendar</span>
-                <small class="label pull-right bg-red">3</small>
-              </a>
-            </li>
-            <li>
-              <a href="../mailbox/mailbox.html">
-                <i class="fa fa-envelope"></i> <span>Mailbox</span>
-                <small class="label pull-right bg-yellow">12</small>
-              </a>
-            </li>
-            <li class="treeview active">
-              <a href="#">
-                <i class="fa fa-folder"></i> <span>Examples</span>
-                <i class="fa fa-angle-left pull-right"></i>
-              </a>
-              <ul class="treeview-menu">
-                <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
-                <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
-                <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li>
-                <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
-                <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
-                <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
-                <li class="active"><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
-              </ul>
-            </li>
-            <li class="treeview">
-              <a href="#">
-                <i class="fa fa-share"></i> <span>Multilevel</span>
-                <i class="fa fa-angle-left pull-right"></i>
-              </a>
-              <ul class="treeview-menu">
-                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
-                <li>
-                  <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
-                  <ul class="treeview-menu">
-                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
-                    <li>
-                      <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
-                      <ul class="treeview-menu">
-                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
-                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
-              </ul>
-            </li>
-            <li><a href="documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
-            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
-          </ul>
-        </section>
-        <!-- /.sidebar -->
-      </aside>
-
-      <!-- =============================================== -->
-
-      <!-- Right side column. Contains the navbar and content of the page -->
-      <div class="content-wrapper">
-        <!-- Content Header (Page header) -->
-        <section class="content-header">
-          <h1>
-            Blank page
-            <small>it all starts here</small>
-          </h1>
-          <ol class="breadcrumb">
-            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
-            <li><a href="#">Examples</a></li>
-            <li class="active">Blank page</li>
-          </ol>
-        </section>
-
-        <!-- Main content -->
-        <section class="content">
-
-          <!-- Default box -->
-          <div class="box">
-            <div class="box-header with-border">
-              <h3 class="box-title">Title</h3>
-              <div class="box-tools pull-right">
-                <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
-                <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
-              </div>
-            </div>
-            <div class="box-body">
-              Start creating your amazing application!
-            </div><!-- /.box-body -->
-            <div class="box-footer">
-              Footer
-            </div><!-- /.box-footer-->
-          </div><!-- /.box -->
-
-        </section><!-- /.content -->
-      </div><!-- /.content-wrapper -->
-
-      <footer class="main-footer">
-        <div class="pull-right hidden-xs">
-          <b>Version</b> 2.0
-        </div>
-        <strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
-      </footer>
-    </div><!-- ./wrapper -->
-
-    <!-- jQuery 2.1.3 -->
-    <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
-    <!-- Bootstrap 3.3.2 JS -->
-    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
-    <!-- SlimScroll -->
-    <script src="plugins/slimScroll/jquery.slimScroll.min.js" type="text/javascript"></script>
-    <!-- FastClick -->
-    <script src='plugins/fastclick/fastclick.min.js'></script>
-    <!-- AdminLTE App -->
-    <script src="dist/js/app.min.js" type="text/javascript"></script>
-    <!-- AdminLTE for demo purposes -->
-    <script src="dist/js/demo.js" type="text/javascript"></script>
-  </body>
-</html>
+ </section> + <!-- /.sidebar --> + </aside> + + <!-- =============================================== --> + + <!-- Right side column. Contains the navbar and content of the page --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <section class="content-header"> + <h1> + Blank page + <small>it all starts here</small> + </h1> + <ol class="breadcrumb"> + <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> + <li><a href="#">Examples</a></li> + <li class="active">Blank page</li> + </ol> + </section> + + <!-- Main content --> + <section class="content"> + + <!-- Default box --> + <div class="box"> + <div class="box-header with-border"> + <h3 class="box-title">Title</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + </div> + </div> + <div class="box-body"> + Start creating your amazing application! + </div><!-- /.box-body --> + <div class="box-footer"> + Footer + </div><!-- /.box-footer--> + </div><!-- /.box --> + + </section><!-- /.content --> + </div><!-- /.content-wrapper --> + + <footer class="main-footer"> + <div class="pull-right hidden-xs"> + <b>Version</b> 2.0 + </div> + <strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved. + </footer> + </div><!-- ./wrapper --> + + <!-- jQuery 2.1.3 --> + <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script> + <!-- Bootstrap 3.3.2 JS --> + <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> + <!-- SlimScroll --> + <script src="plugins/slimScroll/jquery.slimScroll.min.js" type="text/javascript"></script> + <!-- FastClick --> + <script src='plugins/fastclick/fastclick.min.js'></script> + <!-- AdminLTE App --> + <script src="dist/js/app.min.js" type="text/javascript"></script> + <!-- AdminLTE for demo purposes --> + <script src="dist/js/demo.js" type="text/javascript"></script> + </body> + </html>

Layout Options

AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added @@ -786,7 +662,7 @@ AdminLTE/ Main Header Example

- + 
-<header class="main-header">
-  <a href="../../index2.html" class="logo">
-    <!-- LOGO -->
-    AdminLTE
-  </a>
-  <!-- Header Navbar: style can be found in header.less -->
-  <nav class="navbar navbar-static-top" role="navigation">
-    <!-- Navbar Right Menu -->
-    <div class="navbar-custom-menu">
-      <ul class="nav navbar-nav">
-        <!-- Messages: style can be found in dropdown.less-->
-        <li class="dropdown messages-menu">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-            <i class="fa fa-envelope-o"></i>
-            <span class="label label-success">4</span>
-          </a>
-          <ul class="dropdown-menu">
-            <li class="header">You have 4 messages</li>
-            <li>
-              <!-- inner menu: contains the actual data -->
-              <ul class="menu">
-                <li><!-- start message -->
-                  <a href="#">
-                    <div class="pull-left">
-                      <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
-                    </div>
-                    <h4>
-                      Sender Name
-                      <small><i class="fa fa-clock-o"></i> 5 mins</small>
-                    </h4>
-                    <p>Message Excerpt</p>
-                  </a>
-                </li><!-- end message -->
-                ...
-              </ul>
-            </li>
-            <li class="footer"><a href="#">See All Messages</a></li>
-          </ul>
-        </li>
-        <!-- Notifications: style can be found in dropdown.less -->
-        <li class="dropdown notifications-menu">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-            <i class="fa fa-bell-o"></i>
-            <span class="label label-warning">10</span>
-          </a>
-          <ul class="dropdown-menu">
-            <li class="header">You have 10 notifications</li>
-            <li>
-              <!-- inner menu: contains the actual data -->
-              <ul class="menu">
-                <li>
-                  <a href="#">
-                    <i class="ion ion-ios-people info"></i> Notification title
-                  </a>
-                </li>
-                ...
-              </ul>
-            </li>
-            <li class="footer"><a href="#">View all</a></li>
-          </ul>
-        </li>
-        <!-- Tasks: style can be found in dropdown.less -->
-        <li class="dropdown tasks-menu">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-            <i class="fa fa-flag-o"></i>
-            <span class="label label-danger">9</span>
-          </a>
-          <ul class="dropdown-menu">
-            <li class="header">You have 9 tasks</li>
-            <li>
-              <!-- inner menu: contains the actual data -->
-              <ul class="menu">
-                <li><!-- Task item -->
-                  <a href="#">
-                    <h3>
-                      Design some buttons
-                      <small class="pull-right">20%</small>
-                    </h3>
-                    <div class="progress xs">
-                      <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                        <span class="sr-only">20% Complete</span>
-                      </div>
-                    </div>
-                  </a>
-                </li><!-- end task item -->
-                ...
-              </ul>
-            </li>
-            <li class="footer">
-              <a href="#">View all tasks</a>
-            </li>
-          </ul>
-        </li>
-        <!-- User Account: style can be found in dropdown.less -->
-        <li class="dropdown user user-menu">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-            <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
-            <span class="hidden-xs">Alexander Pierce</span>
-          </a>
-          <ul class="dropdown-menu">
-            <!-- User image -->
-            <li class="user-header">
-              <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
-              <p>
-                Alexander Pierce - Web Developer
-                <small>Member since Nov. 2012</small>
-              </p>
-            </li>
-            <!-- Menu Body -->
-            <li class="user-body">
-              <div class="col-xs-4 text-center">
-                <a href="#">Followers</a>
-              </div>
-              <div class="col-xs-4 text-center">
-                <a href="#">Sales</a>
-              </div>
-              <div class="col-xs-4 text-center">
-                <a href="#">Friends</a>
-              </div>
-            </li>
-            <!-- Menu Footer-->
-            <li class="user-footer">
-              <div class="pull-left">
-                <a href="#" class="btn btn-default btn-flat">Profile</a>
-              </div>
-              <div class="pull-right">
-                <a href="#" class="btn btn-default btn-flat">Sign out</a>
+          <header class="main-header">
+            <a href="../../index2.html" class="logo">
+              <!-- LOGO -->
+              AdminLTE
+            </a>
+            <!-- Header Navbar: style can be found in header.less -->
+            <nav class="navbar navbar-static-top" role="navigation">
+              <!-- Navbar Right Menu -->
+              <div class="navbar-custom-menu">
+                <ul class="nav navbar-nav">
+                  <!-- Messages: style can be found in dropdown.less-->
+                  <li class="dropdown messages-menu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      <i class="fa fa-envelope-o"></i>
+                      <span class="label label-success">4</span>
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li class="header">You have 4 messages</li>
+                      <li>
+                        <!-- inner menu: contains the actual data -->
+                        <ul class="menu">
+                          <li><!-- start message -->
+                            <a href="#">
+                              <div class="pull-left">
+                                <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+                              </div>
+                              <h4>
+                                Sender Name
+                                <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                              </h4>
+                              <p>Message Excerpt</p>
+                            </a>
+                          </li><!-- end message -->
+                          ...
+                        </ul>
+                      </li>
+                      <li class="footer"><a href="#">See All Messages</a></li>
+                    </ul>
+                  </li>
+                  <!-- Notifications: style can be found in dropdown.less -->
+                  <li class="dropdown notifications-menu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      <i class="fa fa-bell-o"></i>
+                      <span class="label label-warning">10</span>
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li class="header">You have 10 notifications</li>
+                      <li>
+                        <!-- inner menu: contains the actual data -->
+                        <ul class="menu">
+                          <li>
+                            <a href="#">
+                              <i class="ion ion-ios-people info"></i> Notification title
+                            </a>
+                          </li>
+                          ...
+                        </ul>
+                      </li>
+                      <li class="footer"><a href="#">View all</a></li>
+                    </ul>
+                  </li>
+                  <!-- Tasks: style can be found in dropdown.less -->
+                  <li class="dropdown tasks-menu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      <i class="fa fa-flag-o"></i>
+                      <span class="label label-danger">9</span>
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li class="header">You have 9 tasks</li>
+                      <li>
+                        <!-- inner menu: contains the actual data -->
+                        <ul class="menu">
+                          <li><!-- Task item -->
+                            <a href="#">
+                              <h3>
+                                Design some buttons
+                                <small class="pull-right">20%</small>
+                              </h3>
+                              <div class="progress xs">
+                                <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                                  <span class="sr-only">20% Complete</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li><!-- end task item -->
+                          ...
+                        </ul>
+                      </li>
+                      <li class="footer">
+                        <a href="#">View all tasks</a>
+                      </li>
+                    </ul>
+                  </li>
+                  <!-- User Account: style can be found in dropdown.less -->
+                  <li class="dropdown user user-menu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+                      <span class="hidden-xs">Alexander Pierce</span>
+                    </a>
+                    <ul class="dropdown-menu">
+                      <!-- User image -->
+                      <li class="user-header">
+                        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+                        <p>
+                          Alexander Pierce - Web Developer
+                          <small>Member since Nov. 2012</small>
+                        </p>
+                      </li>
+                      <!-- Menu Body -->
+                      <li class="user-body">
+                        <div class="col-xs-4 text-center">
+                          <a href="#">Followers</a>
+                        </div>
+                        <div class="col-xs-4 text-center">
+                          <a href="#">Sales</a>
+                        </div>
+                        <div class="col-xs-4 text-center">
+                          <a href="#">Friends</a>
+                        </div>
+                      </li>
+                      <!-- Menu Footer-->
+                      <li class="user-footer">
+                        <div class="pull-left">
+                          <a href="#" class="btn btn-default btn-flat">Profile</a>
+                        </div>
+                        <div class="pull-right">
+                          <a href="#" class="btn btn-default btn-flat">Sign out</a>
+                        </div>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
               </div>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </nav>
-</header>
+ </nav> + </header>

Top Nav Layout. Main Header Example.

Reminder!

@@ -1117,56 +993,56 @@ AdminLTE/ 
-<header class="main-header">               
-  <nav class="navbar navbar-static-top">
-    <div class="container-fluid">
-    <div class="navbar-header">
-      <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
-        <i class="fa fa-bars"></i>
-      </button>
-    </div>
-
-    <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="navbar-collapse">
-      <ul class="nav navbar-nav">
-        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
-        <li><a href="#">Link</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-            <li class="divider"></li>
-            <li><a href="#">One more separated link</a></li>
-          </ul>
-        </li>
-      </ul>
-      <form class="navbar-form navbar-left" role="search">
-        <div class="form-group">
-          <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
-        </div>
-      </form>
-      <ul class="nav navbar-nav navbar-right">
-        <li><a href="#">Link</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </div><!-- /.navbar-collapse -->
-    </div><!-- /.container-fluid -->
-  </nav>
-</header>
+          <header class="main-header">               
+            <nav class="navbar navbar-static-top">
+              <div class="container-fluid">
+              <div class="navbar-header">
+                <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+                  <i class="fa fa-bars"></i>
+                </button>
+              </div>
+
+              <!-- Collect the nav links, forms, and other content for toggling -->
+              <div class="collapse navbar-collapse" id="navbar-collapse">
+                <ul class="nav navbar-nav">
+                  <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
+                  <li><a href="#">Link</a></li>
+                  <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+                    <ul class="dropdown-menu" role="menu">
+                      <li><a href="#">Action</a></li>
+                      <li><a href="#">Another action</a></li>
+                      <li><a href="#">Something else here</a></li>
+                      <li class="divider"></li>
+                      <li><a href="#">Separated link</a></li>
+                      <li class="divider"></li>
+                      <li><a href="#">One more separated link</a></li>
+                    </ul>
+                  </li>
+                </ul>
+                <form class="navbar-form navbar-left" role="search">
+                  <div class="form-group">
+                    <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
+                  </div>
+                </form>
+                <ul class="nav navbar-nav navbar-right">
+                  <li><a href="#">Link</a></li>
+                  <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+                    <ul class="dropdown-menu" role="menu">
+                      <li><a href="#">Action</a></li>
+                      <li><a href="#">Another action</a></li>
+                      <li><a href="#">Something else here</a></li>
+                      <li class="divider"></li>
+                      <li><a href="#">Separated link</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </div><!-- /.navbar-collapse -->
+              </div><!-- /.container-fluid -->
+            </nav>
+          </header>
@@ -1177,46 +1053,48 @@ AdminLTE/ Construction of a sidebar: 

-<div class="main-sidebar">
-  <!-- Inner sidebar -->
-  <div class="sidebar">
-    <!-- user panel (Optional) -->
-    <div class="user-panel">
-      <div class="pull-left image">
-        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
-      </div>
-      <div class="pull-left info">
-        <p>User Name</p>
-
-        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
-      </div>
-    </div><!-- /.user-panel -->
-
-    <!-- Search Form (Optional) -->
-    <form action="#" method="get" class="sidebar-form">
-      <div class="input-group">
-        <input type="text" name="q" class="form-control" placeholder="Search..."/>
-        <span class="input-group-btn">
-          <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
-        </span>
-      </div>
-    </form><!-- /.sidebar-form -->
-
-    <!-- Sidebar Menu -->
-    <ul class="sidebar-menu">
-      <li class="active"><a href="#">Link</a></li>
-      <li><a href="#">Another Link</a></li>
-      <li class="treeview">
-        <a href="#">Second Level</a>
-        <ul class="treeview-menu">
-          <li><a href="#">Link in level 2</a></li>
-          <li><a href="#">Link in level 2</a></li>
-        </ul>
-      </li>
-    </ul><!-- /.sidebar-menu -->
-
-  </div><!-- /.sidebar -->
-</div><!-- /.main-sidebar -->
+          <div class="main-sidebar">
+            <!-- Inner sidebar -->
+            <div class="sidebar">
+              <!-- user panel (Optional) -->
+              <div class="user-panel">
+                <div class="pull-left image">
+                  <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+                </div>
+                <div class="pull-left info">
+                  <p>User Name</p>
+
+                  <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+                </div>
+              </div><!-- /.user-panel -->
+
+              <!-- Search Form (Optional) -->
+              <form action="#" method="get" class="sidebar-form">
+                <div class="input-group">
+                  <input type="text" name="q" class="form-control" placeholder="Search..."/>
+                  <span class="input-group-btn">
+                    <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                  </span>
+                </div>
+              </form><!-- /.sidebar-form -->
+
+              <!-- Sidebar Menu -->
+              <ul class="sidebar-menu">
+                <li class="header">HEADER</li>
+                <!-- Optionally, you can add icons to the links -->
+                <li class="active"><a href="#"><span>Link</span></a><</li>
+                <li><a href="#"><span>Another Link</span></a></li>
+                <li class="treeview">
+                  <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
+                  <ul class="treeview-menu">
+                    <li><a href="#">Link in level 2</a></li>
+                    <li><a href="#">Link in level 2</a></li>
+                  </ul>
+                </li>
+              </ul><!-- /.sidebar-menu -->
+
+            </div><!-- /.sidebar -->
+          </div><!-- /.main-sidebar -->
@@ -1264,15 +1142,15 @@ AdminLTE/

Markup


-<div class="info-box">
-  <-- Apply any bg-* class to to the icon to color it -->
-  <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
-  <div class="info-box-content">
-    <span class="info-box-text">Likes</span>
-    <span class="info-box-number">93,139</span>
-  </div><!-- /.info-box-content -->
-</div><!-- /.info-box -->
-
+ <div class="info-box"> + <-- Apply any bg-* class to to the icon to color it --> + <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Likes</span> + <span class="info-box-number">93,139</span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> +

Second Type of Info Boxes

@@ -1339,22 +1217,22 @@ AdminLTE/

Markup


-<-- Apply any bg-* class to to the info-box to color it -->
-<div class="info-box bg-red">
-  <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
-  <div class="info-box-content">
-    <span class="info-box-text">Likes</span>
-    <span class="info-box-number">41,410</span>
-    <-- The progress section is optional -->
-    <div class="progress">
-      <div class="progress-bar" style="width: 70%"></div>
-    </div>
-    <span class="progress-description">
-      70% Increase in 30 Days
-    </span>
-  </div><!-- /.info-box-content -->
-</div><!-- /.info-box -->
-
+ <-- Apply any bg-* class to to the info-box to color it --> + <div class="info-box bg-red"> + <span class="info-box-icon"><i class="fa fa-comments-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Likes</span> + <span class="info-box-number">41,410</span> + <-- The progress section is optional --> + <div class="progress"> + <div class="progress-bar" style="width: 70%"></div> + </div> + <span class="progress-description"> + 70% Increase in 30 Days + </span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> +

The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.

@@ -1381,22 +1259,22 @@ AdminLTE/ 
-<div class="box">
-  <div class="box-header with-border">
-    <h3 class="box-title">Default Box Example</h3>
-    <div class="box-tools pull-right">
-      <!-- Buttons, labels, and many other things can be placed here! -->
-      <!-- Here is a label for example -->
-      <span class="label label-primary">Label</span>
-    </div><!-- /.box-tools -->
-  </div><!-- /.box-header -->
-  <div class="box-body">
-    The body of the box
-  </div><!-- /.box-body -->
-  <div class="box-footer">
-    The footer of the box
-  </div><!-- box-footer -->
-</div><!-- /.box -->
+ <div class="box"> + <div class="box-header with-border"> + <h3 class="box-title">Default Box Example</h3> + <div class="box-tools pull-right"> + <!-- Buttons, labels, and many other things can be placed here! --> + <!-- Here is a label for example --> + <span class="label label-primary">Label</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + <div class="box-footer"> + The footer of the box + </div><!-- box-footer --> + </div><!-- /.box -->

Box Variants

You can change the style of the box by adding any of the contextual classes.

@@ -1463,12 +1341,12 @@ AdminLTE/ 
-<div class="box box-default">...</div>
-<div class="box box-primary">...</div>
-<div class="box box-info">...</div>
-<div class="box box-warning">...</div>
-<div class="box box-success">...</div>
-<div class="box box-danger">...</div>
+ <div class="box box-default">...</div> + <div class="box box-primary">...</div> + <div class="box box-info">...</div> + <div class="box box-warning">...</div> + <div class="box box-success">...</div> + <div class="box box-danger">...</div>

Solid Box

Solid Boxes are alternative ways to display boxes. @@ -1538,22 +1416,22 @@ AdminLTE/ 

-<div class="box box-solid">...</div>
-<div class="box box-solid box-primary">...</div>
-<div class="box box-solid box-info">...</div>
-<div class="box box-solid box-warning">...</div>
-<div class="box box-solid box-success">...</div>
-<div class="box box-solid box-danger">...</div>
+ <div class="box box-solid box-default">...</div> + <div class="box box-solid box-primary">...</div> + <div class="box box-solid box-info">...</div> + <div class="box box-solid box-warning">...</div> + <div class="box box-solid box-success">...</div> + <div class="box box-solid box-danger">...</div>

Box Tools

Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use of multiple AdminLTE components within the header of the box.

AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons are placed in the box-tools which is placed in the box-header.

-<-- This will cause the box to be removed when clicked -->
-<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
-<-- This will cause the box to collapse when clicked -->
-<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
+ <-- This will cause the box to be removed when clicked --> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + <-- This will cause the box to collapse when clicked --> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
@@ -1568,17 +1446,17 @@ AdminLTE/ 
-<div class="box box-default">
-  <div class="box-header with-border">
-    <h3 class="box-title">Collapsable</h3>
-    <div class="box-tools pull-right">
-      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-    </div><!-- /.box-tools -->
-  </div><!-- /.box-header -->
-  <div class="box-body">
-    The body of the box
-  </div><!-- /.box-body -->
-</div><!-- /.box -->
+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Collapsable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
@@ -1593,17 +1471,17 @@ AdminLTE/ 
-<div class="box box-default">
-  <div class="box-header with-border">
-    <h3 class="box-title">Removable</h3>
-    <div class="box-tools pull-right">
-      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-    </div><!-- /.box-tools -->
-  </div><!-- /.box-header -->
-  <div class="box-body">
-    The body of the box
-  </div><!-- /.box-body -->
-</div><!-- /.box -->
+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Removable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
@@ -1618,17 +1496,17 @@ AdminLTE/ 
-<div class="box box-default">
-  <div class="box-header with-border">
-    <h3 class="box-title">Expandable</h3>
-    <div class="box-tools pull-right">
-      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
-    </div><!-- /.box-tools -->
-  </div><!-- /.box-header -->
-  <div class="box-body">
-    The body of the box
-  </div><!-- /.box-body -->
-</div><!-- /.box -->
+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Expandable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->

We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:

@@ -1646,17 +1524,17 @@ AdminLTE/ 
-<div class="box box-default">
-  <div class="box-header with-border">
-    <h3 class="box-title">Labels</h3>
-    <div class="box-tools pull-right">
-      <span class="label label-default">8 New Messages</span>
-    </div><!-- /.box-tools -->
-  </div><!-- /.box-header -->
-  <div class="box-body">
-    The body of the box
-  </div><!-- /.box-body -->
-</div><!-- /.box -->
+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Labels</h3> + <div class="box-tools pull-right"> + <span class="label label-default">8 New Messages</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
@@ -1674,20 +1552,20 @@ AdminLTE/ 
-<div class="box box-default">
-  <div class="box-header with-border">
-    <h3 class="box-title">Input</h3>
-    <div class="box-tools pull-right">
-      <div class="has-feedback">
-        <input type="text" class="form-control input-sm" placeholder="Search..."/>
-        <span class="glyphicon glyphicon-search form-control-feedback"></span>
-      </div>
-    </div><!-- /.box-tools -->
-  </div><!-- /.box-header -->
-  <div class="box-body">
-    The body of the box
-  </div><!-- /.box-body -->
-</div><!-- /.box -->
+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Input</h3> + <div class="box-tools pull-right"> + <div class="has-feedback"> + <input type="text" class="form-control input-sm" placeholder="Search..."/> + <span class="glyphicon glyphicon-search form-control-feedback"></span> + </div> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
@@ -1703,18 +1581,18 @@ AdminLTE/ 
-<div class="box box-default">
-  <div class="box-header with-border">
-    <h3 class="box-title">Tooltips on buttons</h3>
-    <div class="box-tools pull-right">      
-      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
-      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
-    </div><!-- /.box-tools -->
-  </div><!-- /.box-header -->
-  <div class="box-body">
-    The body of the box
-  </div><!-- /.box-body -->
-</div><!-- /.box -->
+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Tooltips on buttons</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> @@ -1735,7 +1613,7 @@ AdminLTE/ - +
@@ -1756,9 +1634,9 @@ AdminLTE/ To simulate a loading state, simply place this code before the .box closing tag. 

<div class="overlay">
-  <i class="fa fa-refresh fa-spin"></i>
-</div>
-
+ <i class="fa fa-refresh fa-spin"></i> + </div> +

Direct Chat

The direct chat widget extends the box component to create a beautiful chat interface. This widget consists of a required messages pane and an optional contacts pane. Examples:

@@ -2050,76 +1928,76 @@ AdminLTE/

Direct Chat Markup


-<-- Construct the box with style you want. Here we are using box-danger -->
-<-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
-<-- The contextual class should match the box, so we are using direct-chat-danger -->
-<div class="box box-danger direct-chat direct-chat-danger">
-  <div class="box-header with-border">
-    <h3 class="box-title">Direct Chat</h3>
-    <div class="box-tools pull-right">
-      <span data-toggle="tooltip" title="3 New Messages" class='badge bg-red'>3</span>
-      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-      <-- In box-tools add this button if you intend to use the contacts pane -->
-      <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
-      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-    </div>
-  </div><!-- /.box-header -->
-  <div class="box-body">
-    <!-- Conversations are loaded here -->
-    <div class="direct-chat-messages">
-      <!-- Message. Default to the left -->
-      <div class="direct-chat-msg">
-        <div class='direct-chat-info clearfix'>
-          <span class='direct-chat-name pull-left'>Alexander Pierce</span>
-          <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span>
-        </div><!-- /.direct-chat-info -->
-        <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-        <div class="direct-chat-text">
-          Is this template really for free? That's unbelievable!
-        </div><!-- /.direct-chat-text -->
-      </div><!-- /.direct-chat-msg -->
-
-      <!-- Message to the right -->
-      <div class="direct-chat-msg right">
-        <div class='direct-chat-info clearfix'>
-          <span class='direct-chat-name pull-right'>Sarah Bullock</span>
-          <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span>
-        </div><!-- /.direct-chat-info -->
-        <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-        <div class="direct-chat-text">
-          You better believe it!
-        </div><!-- /.direct-chat-text -->
-      </div><!-- /.direct-chat-msg -->                    
-    </div><!--/.direct-chat-messages-->
-
-    <!-- Contacts are loaded here -->
-    <div class="direct-chat-contacts">
-      <ul class='contacts-list'>
-        <li>
-          <a href='#'>
-            <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
-            <div class='contacts-list-info'>
-              <span class='contacts-list-name'>
-                Count Dracula
-                <small class='contacts-list-date pull-right'>2/28/2015</small>
-              </span>
-              <span class='contacts-list-msg'>How have you been? I was...</span>
-            </div><!-- /.contacts-list-info -->
-          </a>
-        </li><!-- End Contact Item -->                      
-      </ul><!-- /.contatcts-list -->
-    </div><!-- /.direct-chat-pane -->
-  </div><!-- /.box-body -->
-  <div class="box-footer">
-    <div class="input-group">
-      <input type="text" name="message" placeholder="Type Message ..." class="form-control"/>
-      <span class="input-group-btn">
-        <button type="button" class="btn btn-danger btn-flat">Send</button>
-      </span>
-    </div>
-  </div><!-- /.box-footer-->
-</div><!--/.direct-chat -->
-
+ <-- Construct the box with style you want. Here we are using box-danger --> + <-- Then add the class direct-chat and choose the direct-chat-* contexual class --> + <-- The contextual class should match the box, so we are using direct-chat-danger --> + <div class="box box-danger direct-chat direct-chat-danger"> + <div class="box-header with-border"> + <h3 class="box-title">Direct Chat</h3> + <div class="box-tools pull-right"> + <span data-toggle="tooltip" title="3 New Messages" class='badge bg-red'>3</span> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + <-- In box-tools add this button if you intend to use the contacts pane --> + <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div> + </div><!-- /.box-header --> + <div class="box-body"> + <!-- Conversations are loaded here --> + <div class="direct-chat-messages"> + <!-- Message. Default to the left --> + <div class="direct-chat-msg"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-left'>Alexander Pierce</span> + <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + Is this template really for free? That's unbelievable! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + + <!-- Message to the right --> + <div class="direct-chat-msg right"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-right'>Sarah Bullock</span> + <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + You better believe it! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + </div><!--/.direct-chat-messages--> + + <!-- Contacts are loaded here --> + <div class="direct-chat-contacts"> + <ul class='contacts-list'> + <li> + <a href='#'> + <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/> + <div class='contacts-list-info'> + <span class='contacts-list-name'> + Count Dracula + <small class='contacts-list-date pull-right'>2/28/2015</small> + </span> + <span class='contacts-list-msg'>How have you been? I was...</span> + </div><!-- /.contacts-list-info --> + </a> + </li><!-- End Contact Item --> + </ul><!-- /.contatcts-list --> + </div><!-- /.direct-chat-pane --> + </div><!-- /.box-body --> + <div class="box-footer"> + <div class="input-group"> + <input type="text" name="message" placeholder="Type Message ..." class="form-control"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-danger btn-flat">Send</button> + </span> + </div> + </div><!-- /.box-footer--> + </div><!--/.direct-chat --> + @@ -2175,17 +2053,17 @@ AdminLTE/
-

Browser Support

-

AdminLTE supports the following browsers:

-
    -
  • IE9+
    • -
  • FireFox (latest)
    • -
  • Safari (latest)
    • -
  • Chrome (latest)
    • -
  • Opera (latest)
    • -
-

Note: IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.

-
+

Browser Support

+

AdminLTE supports the following browsers:

+
    +
  • IE9+
    • +
  • FireFox (latest)
    • +
  • Safari (latest)
    • +
  • Chrome (latest)
    • +
  • Opera (latest)
    • +
+

Note: IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.

+ @@ -2242,7 +2120,7 @@ AdminLTE/

License

AdminLTE

AdminLTE is an open source project that is licensed under the MIT license. - This allows you to do pretty much anything you want with it except selling it without any major modifications. + This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software." Attribution is not required (though very much appreciated).

AdminLTE Premium Collection (Coming Soon)

AdminLTE's premium collection provides a set of non-open source components, plugins and widgets. To use @@ -2281,6 +2159,7 @@ AdminLTE/

For further question about which license you should get, please email us at support@almsaeedstudio.com.

+
@@ -2304,18 +2183,6 @@ AdminLTE/ - + diff --git a/documentation/style.css b/documentation/style.css new file mode 100644 index 00000000..46ade6cb --- /dev/null +++ b/documentation/style.css @@ -0,0 +1,119 @@ +/* + * Documentation specific stylesheet + */ +.content-wrapper p { + padding: 0 10px; + font-size: 16px; +} + +#components > h3 { + font-size: 25px; + border-bottom: 1px solid #dedede; + color: #000; +} +#components > h4 { + font-size: 20px; + color: #000; +} +.page-header { + border-bottom: 1px solid #ddd; + margin: 20px 0 10px 0; + position: relative; + z-index: 1; + font-size: 30px; +} +.page-header span, +.page-header a { + z-index: 5; + display: block; + background-color: #ecf0f5; +} +.page-header span::before, +.page-header a::before { + content: '#'; + font-size: 25px; + margin-right: 10px; + color: #3c8dbc; +} +.lead { + font-size: 18px; + font-weight: 400; +} +.eg{ + position: absolute; + top: 0; + left: 0; + display: inline-block; + background: #d2d6de; + padding: 5px; + border-bottom-right-radius: 3px; + border-top-left-radius: 3px; + border-bottom: 1px solid #d2d6dc; + border-right: 1px solid #d2d6dc; +} +.eg + * { + margin-top: 30px; +} +.content { + padding: 10px 25px; +} +.hierarchy { + background: #333; + color: #fff; +} +.plugins-list li { + width: 50%; + float: left; +} +pre { + border: none; +} +/* desert scheme ported from vim to google prettify */ +pre.prettyprint {display: block; background-color: #333; max-height: 300px; border: none!important; margin-bottom: 20px;} +pre .nocode { background-color: none; color: #000 } +pre .str { color: #ffa0a0;} /* string - pink */ +pre .kwd { color: #f0e68c; font-weight: bold } +pre .com { color: #87ceeb } /* comment - skyblue */ +pre .typ { color: #98fb98 } /* type - lightgreen */ +pre .lit { color: #cd5c5c } /* literal - darkred */ +pre .pun { color: #fff } /* punctuation */ +pre .pln { color: #fff } /* plaintext */ +pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */ +pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */ +pre .atv { color: #ffa0a0 } /* attribute value - pink */ +pre .dec { color: #98fb98 } /* decimal - lightgreen */ + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */ +li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } +/* Alternate shading for lines */ +li.L1,li.L3,li.L5,li.L7,li.L9 { } + +@media print { + pre.prettyprint { background-color: none } + pre .str, code .str { color: #060 } + pre .kwd, code .kwd { color: #006; font-weight: bold } + pre .com, code .com { color: #600; font-style: italic } + pre .typ, code .typ { color: #404; font-weight: bold } + pre .lit, code .lit { color: #044 } + pre .pun, code .pun { color: #440 } + pre .pln, code .pln { color: #000 } + pre .tag, code .tag { color: #006; font-weight: bold } + pre .atn, code .atn { color: #404 } + pre .atv, code .atv { color: #060 } +} +.sidebar { + margin-top: 0; + padding-top: 0!important; +} +.box .main-header { + z-index: 1000; + position: relative; +} +.treeview .nav li a:hover, +.treeview .nav li a:active { + background: transparent; +} +p { + padding: 0!important; +} \ No newline at end of file -- GitLab