[Tutorial] Chatbox estilo da Bestskins
Página 1 de 1 • Compartilhe
Autor: Daemon
Funcionalidade: PunBB
Creditos adicionais: Zump (por pegar o código utilizado no Bestskins e estar disponibilizando aqui)
Acesse:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> 'Aba' Folha de estilo css
e adicione esse código em sua folha de estilo:
- Código:
#chatbox_top{min-height:350px!important;}
.chatbox{
background-color:#fff!important;
border:1px solid #ddd!important;
margin:10px 0!important;
padding:8px 8px 0!important;
}
#chatbox_header.main-head{
background:#f5f5f5 url(http://imgur.com/iy2rLu3.png) repeat-x 0 0!important;
border:1px solid #eaeaea!important;
height:40px!important;
padding-left:.3em!important;
}
#submit_button {background:#000!important;width:60px!important;}
.chatbox-title{background:url(http://i.imgur.com/zpUIlTa.jpg) no-repeat scroll 88px 8px transparent!important;}
.chatbox-title a.chat-title{
color:#323232!important;
font-size:18px!important;
font-style:normal!important;
font-variant:normal!important;
font-weight:300!important;
line-height:1.3!important;
}
.chatbox-options li,.chatbox-options li a{color:#323232!important;}
body[bgcolor]{background:#ededed!important;}
#chatbox_members{border:1px solid #eaeaea!important;right:0!important;}
#chatbox_members .member-title{
background:#ededed!important;
color:#5a5a5a!important;
padding:8px 10px!important;
text-align:left!important;
}
#chatbox{
-moz-box-shadow:2px 0 4px rgba(0,0,0,0.1)!important;
-webkit-box-shadow:2px 0 4px rgba(0,0,0,0.1)!important;
border:1px solid #e3e3e3!important;
box-shadow:2px 0 4px rgba(0,0,0,0.1)!important;
left:0!important;
right:190px!important;
}
#chatbox,#chatbox_members{ background:#fff!important; bottom:50px!important; top:40px!important; }
#chatbox p{
background:none repeat scroll 0 0 #fff!important;
border-bottom:1px solid #e3e3e3!important;
line-height:1.3em!important; padding:5px!important;
}
#chatbox:after{
background:#F5FFF6 url(http://i.imgur.com/g3NBjqp.png) repeat-x!important;
border:1px solid #D3EED3!important;
color:#1F691C!important;
content:'Não daremos suporte no chat! BestSkins V2.0';
display:block!important;
font-size:12px!important;
line-height:1.6!important;
padding:10px!important;
text-shadow:0 1px 0 rgba(255,255,255,0.5)!important;
}
#chatbox_footer{
background:#ededed!important;
border:1px solid #d6d6d6!important;
border-bottom-width:4px!important;
min-height:35px!important;
padding:4px!important;
}
#chatbox_messenger_form{margin:0;}
#chatbox_footer .right:first-child{ float:left!important; width:45%!important; }
#chatbox_messenger_form label[for="message"]{display:none;}
input#message.post{
background-color:#fff!important;
height:30px!important;
outline:0!important;
width:78%!important;
}
#divcolor,#divsmilies,#help-button ,.format-message + label{
border:1px solid #AAA!important;
border-radius:3px!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05)!important;
display:inline-block!important;
height:18px!important;
line-height:16px!important;
text-align:center!important;
width:18px!important;
}
#submit_button{
-moz-box-shadow:inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2)!important;
-webkit-box-shadow:inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2)!important;
border:1px solid #212121!important;
border-radius:3px!important;
box-shadow:inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2)!important;
color:#fff!important;
font-family:tahoma,helvetica,arial,sans-serif!important;
font-size:13px!important;
font-style:normal!important;
font-variant:normal!important;
font-weight:400!important;
height:auto!important;
margin:0 5px 0 8px!important;
padding:4px 10px!important;
}
.fontbutton{
-moz-box-shadow:rgba(0,0,0,0.43) 0 1px 3px!important;
-webkit-box-shadow:rgba(0,0,0,0.43) 0 1px 3px!important;
background:#646464 url(http://i58.servimg.com/u/f58/18/62/03/31/highli17.png) repeat-x 0 0!important;
border:1px solid #585858!important;
box-shadow:rgba(0,0,0,0.43) 0 1px 3px!important;
color:#fff!important;
font-family:tahoma,helvetica,arial,sans-serif!important;
font-size:13px!important;
font-style:normal!important;
font-variant:normal!important;
font-weight:400!important;
padding:4px 10px!important;
text-shadow:#474747 0 -1px 0!important;
width:auto!important;
}
#help-button{float:right!important;}
#chatbox .date-and-time{float:right!important;}
Resultado:
Tópicos semelhantes
Cria uma conta ou logue para postar uma mensagem.
Você precisa ser um membro, para poder postar uma resposta.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|