X-Git-Url: https://gerrit.opnfv.org/gerrit/gitweb?a=blobdiff_plain;f=src%2Fceph%2Fsrc%2Fpybind%2Fmgr%2Fdashboard%2Fstatic%2FAdminLTE-2.3.7%2Fdocumentation%2Fbuild%2Finclude%2Fcomponents.html;fp=src%2Fceph%2Fsrc%2Fpybind%2Fmgr%2Fdashboard%2Fstatic%2FAdminLTE-2.3.7%2Fdocumentation%2Fbuild%2Finclude%2Fcomponents.html;h=0000000000000000000000000000000000000000;hb=7da45d65be36d36b880cc55c5036e96c24b53f00;hp=5606575e69a6edd1092fa40c6b92d058bccd5b6b;hpb=691462d09d0987b47e112d6ee8740375df3c51b2;p=stor4nfv.git diff --git a/src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/documentation/build/include/components.html b/src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/documentation/build/include/components.html deleted file mode 100644 index 5606575..0000000 --- a/src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/documentation/build/include/components.html +++ /dev/null @@ -1,1545 +0,0 @@ -
-

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

Control Sidebar

-

Control sidebar is the right side bar. It can be used for many purposes and is extremely easy - to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to - slide over the content. The second pushes the content to make space for the sidebar. Either of - these methods can be set through the Javascript options.

-

The following code should be placed within the .wrapper div. I prefer - to place it right after the footer.

-

Dark Sidebar Markup

-
<!-- The Right Sidebar -->
-<aside class="control-sidebar control-sidebar-dark">
-  <!-- Content of the sidebar goes here -->
-</aside>
-<!-- The sidebar's background -->
-<!-- This div must placed right after the sidebar for it to work-->
-<div class="control-sidebar-bg"></div>
- -

Light Sidebar Markup

-
<!-- The Right Sidebar -->
-<aside class="control-sidebar control-sidebar-light">
-  <!-- Content of the sidebar goes here -->
-</aside>
-<!-- The sidebar's background -->
-<!-- This div must placed right after the sidebar for it to work-->
-<div class="control-sidebar-bg"></div>
- -

Once you create the sidebar, you will need a toggle button to open/close it. - By adding the attribute data-toggle="control-sidebar" to any button, it will - automatically act as the toggle button.

- -

Toggle Button Example

-

- -

Sidebar Toggle Markup

- 
<button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button>
- - -

Info Box

-

Info boxes are used to display statistical snippets. There are two types of info boxes.

-

First Type of Info Boxes

- -
-
-
- -
- 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 collapsed-box">
-  <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 -->
-
-
-

- If you inserted a box into the document after app.js was loaded, you have to activate - the collapse/remove buttons explicitly by calling .activateBox(): -

- 
<script>
-    $("#box-widget").activateBox();
-</script>
- -

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" alt="Contact Avatar">
-            <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 -->
-
- -

Of course you can use direct chat with a solid box by adding the class solid-box to the box. Here are a couple of examples:

- - -
-
- -
-
-

Direct Chat in a Solid Box

-
- 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 in a Solid Box

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