"Simple Shoutbox"
Bootstrap 3.3.0 Snippet by akirichev

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <aside class="sidebar col-md-4"> <div class="sidebar-nav-fixed pull-right affix"> <div class="panel panel-chat shoutbox"> <div class="panel-heading"> <div class="btn-group chat-status"> <button type="button" class="btn btn-inverted btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="status-icon icon-online"></span>Online <span class="sr-only">Change Status</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Online</a></li> <li><a href="#">Away</a></li> <li><a href="#">Do Not Disturb</a></li> <li class="divider"></li> <li><a href="#">Offline</a></li> </ul> </div> <h3 class="panel-title text-center">Chat</h3> <button type="button" class="close close-shoutbox" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <ul class="list-group"> <li class="list-group-item"> <div class="profile-avatar tiny pull-left" style="background-image: url(http://lorempixel.com/180/100)"></div> <h5 class="list-group-item-heading"><a href="#">Johny Bravo</a></h5> <p class="message-content"><time>09:58</time>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. </p> </li> <li class="list-group-item"> <div class="profile-avatar tiny pull-left" style="background-image: url(http://lorempixel.com/180/100)"></div> <h5 class="list-group-item-heading"><a href="#">Johny Bravo</a></h5> <p class="message-content"><time>10:00</time>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. </p> <p class="message-content"><time>10:01</time>I'm in a transitional period so I don't wanna kill you, I wanna help you. </p> </li> </ul> <div class="panel-footer "> <form class="form-inline"> <div class="form-group"> <textarea class="auto-expand form-control" data-min-rows='1' rows="1"></textarea> </div> </form> </div> </div> </div> </aside> </div> </div>
aside { position: relative;} .shoutbox { width: 100%; bottom: -1px; margin-bottom: 0; border-radius: 0; } .profile-avatar { position: relative; z-index: 20; background-size: cover; background-position: center center; border-radius: 100%; -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } .profile-avatar.tiny { width: 32px; height: 32px; border: none; } .shoutbox .panel-heading { border-radius: 0; } .shoutbox .profile-avatar { box-shadow: none; } .shoutbox .list-group { height: 300px; overflow-y: auto; } .shoutbox .list-group-item-heading, .shoutbox p { margin-left: 48px; padding-right: 30px; } .shoutbox .list-group-item .message-content { position: relative; } .shoutbox .list-group-item time { position: absolute; top: 0; right: 0; color: #777777; font-size: 12px; } .shoutbox .form-group { width: 100%; } .shoutbox textarea.form-control { width: 100%; resize: none; } .panel-chat { border-color: #ddd; } .panel-chat > .panel-heading { color: #fff; background-color: #373d43; border-color: #ddd; } .panel-chat > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ddd; } .panel-chat > .panel-heading .badge { color: #373d43; background-color: #fff; } .panel-chat > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ddd; } .panel-chat .close { color: #fff; position: absolute; top: 8px; right: 16px; } .chat-status { position: absolute; top: 7px; left: 8px; } .chat-status .btn { color: #fff; font-weight: 500; } .chat-status .status-icon { display: inline-block; margin-top: 4px; margin-right: 8px; float: left; width: 10px; height: 10px; border-radius: 5px; } .chat-status .status-icon.icon-online { background: #5cb85c; } .btn-inverted { color: #fff; background: rgba(0, 0, 0, 0.2); } .btn-inverted:hover, .btn-inverted:focus, .btn-inverted.focus { color: #fff; background: rgba(0, 0, 0, 0.3); }

Related: See More


Questions / Comments:

salut

kadaverik () - 1 year ago - Reply -1