Início
phpBB3 
PunBB
Invision
Olá amigos, segue meu protótipo do chatbox staff, fiz algumas mudanças, acho que vai ser necessário adicionar alguns ID's novamente.. Mas acho que nada muito dificil..
Troquei o input por uma textarea e outro input por um button..
Usei a font-awesome para os ícones..
Espero que gostem..
Troquei o input por uma textarea e outro input por um button..
Usei a font-awesome para os ícones..
Espero que gostem..
- Código:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
* {
outline: none;
}
.shouttStaff{
font: 11px 'Open Sans', sans-serif;
}
.shouttWrap{
margin: 0px;
height: 213px;
max-height: 213px;
overflow: auto;
}
.shouttShoutt{
word-wrap: break-word;
}
.shouttDelete{
cursor: pointer;
}
.shouttTextarea{
padding: 7px;
font: 11px 'Open Sans', sans-serif;
width: 100%;
color: #333;
background-color: #FFF;
border: 1px solid #D6D6D6;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
overflow: auto;
resize: none;
}
.shouttTextarea:hover {
border-color: #B8B8B8;
}
.shouttTextarea:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.shouttSubmit{
padding: 4px 0;
width: 100%;
color: #333;
text-align: center;
cursor: pointer;
background-color: #F5F5F5;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
background-image: linear-gradient(top, #FFF, #E6E6E6);
background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6);
background-image: -o-linear-gradient(top, #FFF, #E6E6E6);
background-image: -moz-linear-gradient(top, #FFF, #E6E6E6);
background-image: -ms-linear-gradient(top, #FFF, #E6E6E6);
font-weight: bold;
margin: 3px auto;
}
.shouttSubmit:hover {
background-color: #E6E6E6;
background-image: linear-gradient(top, #E6E6E6, #fff);
background-image: -webkit-linear-gradient(top, #E6E6E6, #fff);
background-image: -o-linear-gradient(top, #E6E6E6, #fff);
background-image: -moz-linear-gradient(top, #E6E6E6, #fff);
background-image: -ms-linear-gradient(top, #E6E6E6, #fff);
}
.shouttWrap ul{
margin: 0;
padding: 0;
}
.shouttShoutt{
list-style: none;
padding: 4px;
overflow: hidden;
border-bottom: #eee 1px solid;
}
.shouttClear{
width: 100%;
}
.shouttHead{
padding: 4px 7px;
overflow: hidden;
cursor: default;
}
.shouttAutor{
float: left;
font-weight: bold;
}
.shouttHour{
float: right;
font-style: italic;
}
.shouttRank{
color: #999;
font-weight: normal;
}
.shouttContent{
float: left;
width: 137px;
}
.shouttExtra{
float: right;
width: 73px;
text-align: center;
color: #ccc;
}
.shouttAvatar{
margin: 0 auto;
width: 40px;
height: 40px;
display: block;
border-radius: 2px;
padding: 1px;
background: #fff;
box-shadow: rgba(0,0,0,.3) 0 0 3px;
}
.shouttTotal{
padding: 4px 0;
float: right;
color: #333;
text-align: center;
cursor: default;
background-color: #F5F5F5;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
background-image: linear-gradient(top, #FFF, #E6E6E6);
background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6);
background-image: -o-linear-gradient(top, #FFF, #E6E6E6);
background-image: -moz-linear-gradient(top, #FFF, #E6E6E6);
background-image: -ms-linear-gradient(top, #FFF, #E6E6E6);
margin: 3px auto;
}
.shouttTotalPad{
padding: 4px 20px;
}
</style>
<div class="module main shouttStaff">
<div class="main-head"><h3>ChatBox da <em>Staff!</em></h3></div>
<div class="shouttInput">
<textarea class="shouttTextarea" maxlength="200" placeholder="Digite sua mensagem.."></textarea>
</div>
<span class="shouttTotal"><span class="shouttTotalPad"><i class="fa fa-file-text-o"></i> <strong>Total de mensagens:</strong> 21</span></span>
<button class="shouttSubmit"><i class="fa fa-reply-all"></i> Enviar</button>
<div class="shouttWrap">
<ul>
<li class="shouttShoutt">
<div class="shouttClear">
<div class="shouttHead">
<span class="shouttAutor" style="color:#8FD534;"><i class="fa fa-user"></i> JScript <span class="shouttRank">[ Administrador ]</span></span>
<span class="shouttHour">16/2 - 10:03</span>
</div>
<div class="shouttContent">
Mensagem de teste
</div>
<div class="shouttExtra">
<img class="shouttAvatar" src="http://i34.servimg.com/u/f34/18/17/62/92/av-8910.png" alt="Avatar">
<div class="shouttDelete">deletar shoutt</div>
</div>
</div>
</li>
<li class="shouttShoutt">
<div class="shouttClear">
<div class="shouttHead">
<span class="shouttAutor" style="color:#F00;"><i class="fa fa-user"></i> Wagner <span class="shouttRank">[ Programador ]</span></span>
<span class="shouttHour">16/2 - 10:07</span>
</div>
<div class="shouttContent">
Somente testando aqui mesmo
</div>
<div class="shouttExtra">
<img class="shouttAvatar" src="http://r19.imgfast.net/users/1917/43/09/52/avatars/61-47.jpg" alt="Avatar">
<div class="shouttDelete">deletar shoutt</div>
</div>
</div>
</li>
<li class="shouttShoutt">
<div class="shouttClear">
<div class="shouttHead">
<span class="shouttAutor" style="color:#009;"><i class="fa fa-user"></i> joelson0007 <span class="shouttRank">[ Moderador ]</span></span>
<span class="shouttHour">16/2 - 10:17</span>
</div>
<div class="shouttContent">
Opa, outro teste
</div>
<div class="shouttExtra">
<img class="shouttAvatar" src="http://r19.imgfast.net/users/1917/43/09/52/avatars/36-5.png" alt="Avatar">
<div class="shouttDelete">deletar shoutt</div>
</div>
</div>
</li>
</ul>
</div>
</div>
