Updated docs

documentation/build/include/components.html

@@ -1363,4 +1363,151 @@
   </div><!-- /.box-footer-->
 </div><!--/.direct-chat -->
 </code></pre>
+  
+  <p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p>
+  
+  <!-- Direct Chat With Solid Boxes -->
+  <div class="row">        
+    <div class="col-md-6">
+      <!-- DIRECT CHAT WARNING -->
+      <div class="box box-primary box-solid direct-chat direct-chat-primary">
+        <div class="box-header">
+          <h3 class="box-title">Direct Chat in a Solid Box</h3>
+          <div class="box-tools pull-right">
+            <span data-toggle="tooltip" title="3 New Messages" class='badge bg-light-blue'>3</span>
+            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+            <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">
+          <form action="#" method="post">
+            <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-primary btn-flat">Send</button>
+              </span>
+            </div>
+          </form>
+        </div><!-- /.box-footer-->
+      </div><!--/.direct-chat -->
+    </div><!-- /.col -->
+
+    <div class="col-md-6">
+      <!-- DIRECT CHAT DANGER -->
+      <div class="box box-info box-solid direct-chat direct-chat-info">
+        <div class="box-header">
+          <h3 class="box-title">Direct Chat in a Solid Box</h3>
+          <div class="box-tools pull-right">
+            <span data-toggle="tooltip" title="3 New Messages" class='badge bg-aqua'>3</span>
+            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+            <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">
+          <form action="#" method="post">
+            <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-info btn-flat">Send</button>
+              </span>
+            </div>
+          </form>
+        </div><!-- /.box-footer-->
+      </div><!--/.direct-chat -->
+    </div><!-- /.col -->
+  </div><!-- /.row -->
 </section>

documentation/index.html

@@ -1999,6 +1999,153 @@
             </div><!-- /.box-footer-->
           </div><!--/.direct-chat -->
           </code></pre>
+            
+            <p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p>
+            
+            <!-- Direct Chat With Solid Boxes -->
+            <div class="row">        
+              <div class="col-md-6">
+                <!-- DIRECT CHAT WARNING -->
+                <div class="box box-primary box-solid direct-chat direct-chat-primary">
+                  <div class="box-header">
+                    <h3 class="box-title">Direct Chat in a Solid Box</h3>
+                    <div class="box-tools pull-right">
+                      <span data-toggle="tooltip" title="3 New Messages" class='badge bg-light-blue'>3</span>
+                      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                      <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">
+                    <form action="#" method="post">
+                      <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-primary btn-flat">Send</button>
+                        </span>
+                      </div>
+                    </form>
+                  </div><!-- /.box-footer-->
+                </div><!--/.direct-chat -->
+              </div><!-- /.col -->
+
+              <div class="col-md-6">
+                <!-- DIRECT CHAT DANGER -->
+                <div class="box box-info box-solid direct-chat direct-chat-info">
+                  <div class="box-header">
+                    <h3 class="box-title">Direct Chat in a Solid Box</h3>
+                    <div class="box-tools pull-right">
+                      <span data-toggle="tooltip" title="3 New Messages" class='badge bg-aqua'>3</span>
+                      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                      <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">
+                    <form action="#" method="post">
+                      <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-info btn-flat">Send</button>
+                        </span>
+                      </div>
+                    </form>
+                  </div><!-- /.box-footer-->
+                </div><!--/.direct-chat -->
+              </div><!-- /.col -->
+            </div><!-- /.row -->
           </section>
 
           <!-- ============================================================= -->

documentation/style.css

@@ -7,8 +7,7 @@
 }
 
 #components > h3 {
-  font-size: 25px;
-  border-bottom: 1px solid #dedede;
+  font-size: 25px;  
   color: #000;
 }
 
@@ -17,8 +16,8 @@
   color: #000;
 }
 .page-header {
-  border-bottom: 1px solid #ddd;        
-  margin: 20px 0 10px 0;
+  /*border-bottom: 1px solid #ddd;        */
+  margin: 20px 0 20px 0;
   position: relative;
   z-index: 1;
   font-size: 30px;