[Tutorial] Chatbox estilo da Bestskins

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Sex Out 07, 2016 11:56 am

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:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum