mirror of https://github.com/ColorlibHQ/AdminLTE
Updated docs
Abdullah Almsaeed
parent
5c93ffc613
commit
9753353574
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue