Info Box
+Info boxes are used to display statistical snippets. There are two types of info boxes. Example of the first type:
+ +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
+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 @@ -1408,7 +1548,7 @@ AdminLTE/
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.
+ 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> @@ -1577,6 +1717,409 @@ AdminLTE/ </div><!-- /.box -->+ +
Loading States
+Loading state
+Loading state (.box-solid)
+
+ 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
+
+ 
+ Direct Chat
+
+
+ Direct Chat
+
+
+ Direct Chat
+
+
+ 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 -->
+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.
+ function properly. Most important files are AdminLTE.css, skins CSS files, and app.js.Layout Changes
- The .wrapper div must be placed immediately after the body tag rather than after the header @@ -1669,7 +2212,7 @@ AdminLTE/
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.
+ 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.
@@ -1772,7 +2315,6 @@ AdminLTE/ }, 500); } }); - });