Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

Ir à página : 1, 2  Seguinte

#1
 D'Leandro™

avatar
Fundador

ChatBox Personalizado


PunBB PhpBB2  PhpBB3  Invision

--> Código CSS <--
Obs: Para que funcione, o Chat Box Original deve estar ativo.
Código:
      /*ChatBox Personalizado por D'Leandro™️*/
#message, #submit_button {
        border: none;
        border-top-style: none !important;
        background: #fff;
}
#chatbox_footer {
        padding: 0px;
        background: url("") repeat scroll 0% 0% rgb(245, 245, 245);
        border-top: 2px solid #1E90FF;
        display: block !important;
        border-radius: 0px 0px 0px 0px;
        top: 270px;
        left: 0px;
        right: 0px;
}
#submit_button {
        color: #1E90FF;
        border: 1px solid #ddd;
        margin: 2px;
        padding: 2px;
}
.fontbutton_selected {
        border: none;
        background: #1E90FF;
        float: left;
        margin-right: 3px;
        padding: 1px;
        border-radius: 3px;
}
.fontbutton:hover {
        border: none;
        background: none;
        float: left;
        margin-right: 3px;
        padding: 1px;
        border-radius: 3px;
}
.fontbutton {
        background: none;
        float: left;
        margin-right: 3px;
        padding: 1px;
        border-radius: 3px;
}
#chatbox_footer label {
        background: none repeat scroll 0% 0% rgb(255, 255, 255);
        border-width: 2px;
        border-right: 2px solid rgb(221, 221, 221);
        border-style: dashed solid solid;
        border-color: rgb(221, 221, 221);
       -moz-border-top-colors: none;
       -moz-border-right-colors: none;
       -moz-border-bottom-colors: none;
       -moz-border-left-colors: none;
        border-image: none;
        border-radius: 6px 6px 6px 6px;
        font-size: 11px;
        margin: 0px;
        padding: 3px;
        border-top: 1px;
}
#cp-main .panel {
        background: none repeat scroll 0% 0% rgb(255, 255, 255);
        border-width: 2px;
        border-right: 2px solid rgb(221, 221, 221);
        border-style: dashed solid solid;
        border-color: rgb(221, 221, 221);
       -moz-border-top-colors: none;
       -moz-border-right-colors: none;
       -moz-border-bottom-colors: none;
       -moz-border-left-colors: none;
        border-image: none;
        border-radius: 6px 6px 6px 6px;
        font-size: 11px;
        margin: 0px;
        padding: 3px;
}
#chatbox_main_options span,#chatbox_main_options label,#chatbox_main_options a{
        height:34px;
        margin-right:0;
        border:0;
        border-right:1px solid #CFCFCF;
        background-color:#f5f5f5;
        padding:7px;color:#000;
        padding-top:14px}#chatbox_main_options{
        position:absolute;
        bottom:0;
        left:0;
        z-index:1;
        color:#818181!important;
        height:34px;
        font-size:0;
        margin:0;
        margin-bottom:-25px
}
#chatbox_main_options li a[onclick*="ajax_refresh_chatbox"]{
        background: none;
}
#chatbox_main_options a[href="/chatbox/index.forum?archives=1"],#chatbox_main_options a[href="/chives"]{
        font-size:0;
        background:url(http://www.dreamtemplate.com/dreamcodes/web_icons/gray-archive-icon.png) no-repeat center whiteSmoke;
        padding-top:25px;
        padding-bottom:9px;
        padding-right:31px;
        border-top:1px solid #CFCFCF;
        cursor:default
}
#chatbox_main_options a[href="/chatbox/index.forum?archives"]{
        background-color:#E6E6E6
}
#chatbox_main_options li a[onclick="CB_disconnect();"]{
        border-right:0;
        padding:0
}
#chatbox_main_options li a[onclick="CB_disconnect();"] span{
        font-size:0;
        background:url(http://i.imgur.com/xXA8w.gif) no-repeat 50% 50% #f5f5f5;
        padding-top:25px;
        padding-bottom:9px;
        padding-right:31px;
        border-top:1px solid #CFCFCF;
        cursor:default
}
#chatbox_messenger_form .right {
       padding:0;font-size:0
}
#chatbox_messenger_form .right input#message{
        height:34px;
        font-weight:normal;
        background-color:white;
        background-image:url();
        border:0;height:34px;
        margin-bottom:0;font-size:16px;cursor:default;padding:0 0 0 5px;outline:none;width:304px
}
#chatbox_messenger_form .right input[name="submit_button"]{
        height:33px;
        font-size:15px;
        border:0;
        background-color:transparent;
        padding-left:10px;
        padding-right:11px;
        margin-left:-4px;
        cursor:default;
        font-weight:normal
}
#chatbox_messenger_form .right img[src="http://illiweb.com/fa/subsilver/wysiwyg/menupop.gif"],#chatbox_members h4.member-title,#chatbox_main_options li#chatbox_option_autorefresh,#chatbox p.clearfix span.date-and-time,#chatbox p.clearfix:hover span.date-and-time{
        display:none
}
#chatbox_header{
        height:0;
        font-size:0
}
#chatbox{
        top:32px;
        left:0
}
#chatbox p.clearfix:first-child{
        padding-top:8px;
        border-radius: 6px;
        background: rgb(245, 245, 245);
}
#chatbox_members{
        margin-top: -30px;
        border: 0px solid #1E90FF;
        position:absolute;
        z-index:1;
        height:29px;
        width:1100px;
        background:url(http://www.addthis.com/forum/styles/addthis2/theme/images/whosonline.gif) 8px -3px no-repeat white;
        border-bottom:1px solid #CFCFCF
}
#chatbox_members li{
        display:inline;
        margin-right:0
}
#chatbox_members a:last-child:after{
        content:', '
}
#chatbox_members li:last-child a:last-child:after{
content:'.'
}
#chatbox_members ul{
        padding-top:8px;
        font-size:12px;
        margin:0;
        overflow-y:auto;
        overflow-x:auto;
        margin-left:46px;
        padding-right:8px;
        padding-bottom:0;
        white-space:nowrap;
        height:23px;
        max-width:none
}
#chatbox_footer #chatbox_messenger_form .right ,#chatbox_header #chatbox_main_options.chatbox-options a:hover,#chatbox_header #chatbox_main_options.chatbox-options span:hover,#chatbox_messenger_form .right input[name="submit_button"]:hover{
        background-color:#CFCFCF!important
}
#chatbox_footer #chatbox_messenger_form .right {
        background-color:#E6E6E6
}
#chatbox p.clearfix {
        background-color: #DDD;
        margin: 2px;
        padding: 2px;
        border-radius: 6px;
}
#chatbox p.clearfix span.user,#chatbox p.clearfix .msg,#chatbox_main_options li{
        font-size:0
}
#chatbox p.clearfix .msg,#chatbox p.clearfix span.user *{
        font-family:Verdana;
        font-size:12px
}
.user a[href*="/u"]{
        margin-right:8px
}
.user span:first-child strong{
        margin-right:4px
}
.user span:last-child strong{
        margin-right:0
}
a[onclick*="ajax_refresh_chatbox"]:hover{
        background: none;
}
#chatbox p.clearfix[class^="chatbox_row_1"] span[style="font-style:italic"]{
        font-size:15px;
        font-style:normal!important;
        margin-left:-66px;
        background-color:#EDEFF4
}
#chatbox p.chatbox_row_1.clearfix:first-child span[style="font-style:italic"]:last-child{
        font-size:0px
}
#chatbox p.chatbox_row_1.clearfix:first-child span[title]:first-child{
        visibility:hidden
}
#chatbox p.chatbox_row_1.clearfix:first-child span[style="font-style:italic"]:last-child:before{
        margin-left:7px;
        background:url(http://i.imgur.com/xXA8w.gif) top left no-repeat;
        background-size:20px;
        padding-left:22px;
        content:'Entre para conversar!';
        font-size:15px
}
#chatbox_contextmenu{
        z-index:1
}
#chatbox_messenger_form{
        margin-top:0px
}
.user-msg{
        display:inline-block;
        padding-left:38px;
        background:url(http://i.imgur.com/BMdww.gif) no-repeat top left;
        background-size:32px 32px;
        min-height:32px
}
.user-msg .msg{
        display:block
}
.user-msg .msg span{
        border-image-width:0px;
        border:0px;
        border-image-source:url(http://i.imgur.com/BMdww.gif)
}/*http://staffergroupbr.stuning.net/t1075-tutorialchatbox-personalizado*/

--> Resultado Final <--



Desenvolvido por Luciano98 | D'Leandro™
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 Bookmarlucas654

avatar
Membro
Ebaaaaaaaa, ia pedir isto mesmo, dando like e testando =D
Ps.: E como deixa a caixa de mensagens do lado, como aqui na SG?
Ver perfil do usuário

#3
 D'Leandro™

avatar
Fundador
Deixar a caixa ao lado é um código restrito, o criador do código pediu para não divulgar ainda!
Assim que eu tiver autorização, eu divulgarei.
Ver perfil do usuário

#4
 Bookmarlucas654

avatar
Membro
Há, ta certo, sem problemas. Se o próprio criador não permitiu a divulgação, devemos respeitar ;)
Ver perfil do usuário

#5
 HenRyqUéè

avatar
Membro
Bacana, o foda é q buga no meu forum.... (deixe os créditos do Luciano, o verdadeiro criador do code!)
Ver perfil do usuário

#6
 D'Leandro™

avatar
Fundador
O Senhor poderia me mandar o link do código original?
Ver perfil do usuário

#7
 Narutofake

avatar
Membro
Olá, Eu posso... { Link Removido! Motivo: Não é mais necessário }
Ver perfil do usuário

#8
 D'Leandro™

avatar
Fundador
Conteúdo Atualizado;
Os creditos foram devidamente adicionados!
Ver perfil do usuário

#9
 'Fusion

avatar
Membro
Gostei obrgiado por compartilhar =D
Ver perfil do usuário samuca_akira@hotmail.com

#10
 ®'Martins

avatar
Membro
o Unico prblema deste modo de chat é que as vezes ele buga e buga feio o antigo modelo do meu chat era este, estou pensando seriamente em por ele de volta....
Ver perfil do usuário

#11
 Stark'

avatar
Membro
Vamos Ver Ele Atualiza o Avatar?
Ver perfil do usuário

#12
 D'Leandro™

avatar
Fundador
Nao, o avatar dele nao muda, e so para dar um estilo -'-
Ver perfil do usuário

#13
 'Fusion

avatar
Membro
Mesmo sem atualizar ficou legal =D
Ver perfil do usuário samuca_akira@hotmail.com

#14
 Chronos

avatar
Moderador
Ótimo Tutorial.
Ver perfil do usuário

#15
 Gmtp

avatar
Membro
Olá

Chat box shoow chama atenção e é elegante

Até mais
Ver perfil do usuário

#16
 Jose Hamizaki

avatar
Membro
Obrigado por compartilhar, esta precisando muito desse chatbox.
Ver perfil do usuário

#17
 fojogo

avatar
Membro
Fodastico, adorei
Ver perfil do usuário

#18
 BangBang

avatar
Membro
O meu é este só que sem esse azul, e com avatar que se atualiza e fica maior num toltip ao passar o mouse, caso alguém pedir meu code do chatbox, nem pensar, código restrito, se alguém o roubar ( o code ) O fórum irá receber um legitio.
Ver perfil do usuário

#19
 TiagoDJ-7.0

avatar
Membro
vou testar
no meu site
Ver perfil do usuário

#20
 GyGu

avatar
Membro
Muito bom esse código ai.
Ver perfil do usuário

#21
 Chorão

avatar
Membro
Te Como colocar Imagen de FUndo nela?
Ver perfil do usuário

#22
 houdini

avatar
Membro
Gostei deste estilo de Chat, vou testar.
Ver perfil do usuário

#23
 Michelangelo

avatar
Novato
Muito perfeito, este chat é mais perfeito ainda com as suas edições!
Ver perfil do usuário

#24
 Stark'

avatar
Membro
mt bom parça
Ver perfil do usuário

#25
 Zoldyck

avatar
Novato
Muito bom!
Ver perfil do usuário

#26
 Conteúdo patrocinado


Ir à página : 1, 2  Seguinte