Chatbox personalizado

Qual é minha questão:
Olá,adicionei um código de chatbox personalizado em meu fórum,enquanto está carregando á página,o chatbox fica assim: http://4image.kgngames.com/img/594890448490a0e0b504437662890abb.PNG
e quanda termina de carregar fica assim: http://4image.kgngames.com/img/ab301f07aa78b245b3bfc79d51570eaf.PNG
Gostaria que ele ficasse somente assim: http://4image.kgngames.com/img/594890448490a0e0b504437662890abb.PNG
Aqui está o código que utilizei para a função:

Código:

/*=== Chat Personalizado===*/

.chatbox-title, .chatbox-title a.chat-title {
color: white!important;
}

#chatbox_header {
background-image: url(http://hitskin.com/themes/16/23/35/i_list_bg.jpg); 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
}

.chatbox-options li, .chatbox-options li a, .chatbox-options li label {
color: white;
}

#chatbox_footer {
background-image: url(http://hitskin.com/themes/16/23/35/i_list_bg.jpg); 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
}
#chatbox_footer label {
color: white;
}

#chatbox_members .member-title {
background-color: #CADCEB;
background-image: none;
color: #105289;
font-family: Comic Sans Ms;
font-size: 12px;
padding: .5em .25em;
text-align: center;
}

.chatbox_row_2 {
background-color: #DCEAF5;
padding: 4px;
}
.chatbox_row_1 {
background-color: #ECF3F7;
padding: 4px;
}

.inputbox {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}


.pun table th.tc2, .pun table th.tc3, .pun table th.tc4, .pun table th.tcl, .pun table th.tcr {
margin-right: -20px !important;
}
.tcr {
margin-right: -20px !important;
}

form[action='/privmsg?mode=post'] h1.page-title:after{
  content:"Afim de aproveitar o sistema de contato por Mensagem Privada, notificamos que não oferecemos suporte via mensagem privada. Contate á Equipe só em casos extremos sobre o Fórum!";
  display:block;
}
/*banner flutuante*/
#popup {
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}

body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]{background-color:#FFFFFF;background-image:url()}body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]::-webkit-scrollbar{background-color:#efefef;height:10px;width:10px}body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);height:10px;width:21px}#chatbox_footer .right div[class][id]{height:20px;margin-right:0;border:0;border-right:1px solid #efefef;background-color:#efefef;padding:7px;cursor:default}#chatbox_footer .right div[class][id]:first-child{border-left:1px solid #efefef}#chatbox_main_options span,#chatbox_main_options label,#chatbox_main_options a{height:34px;margin-right:0;border:0;border-right:1px solid #efefef;background-color:#efefef;padding:7px;color:#000;padding-top:14px}#chatbox_main_options{position:absolute;bottom:0;left:0;z-index:1;color:#FFFFFF!important;height:34px;font-size:11;margin:0;margin-bottom:-25px}#chatbox_main_options li a[onclick*="ajax_refresh_chatbox"]{font-size:0;background:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) no-repeat center #efefef;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #efefefcursor:default}#chatbox_main_options a[href="/chatbox/index.forum?archives=1"],#chatbox_main_options a[href="/chatbox/index.forum?archives"]{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 #efefef;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% #efefef;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #efefef;cursor:default}#chatbox_footer{padding:0;background:url() #efefef;border-top:1px solid #CFCFCF;display:block!important;border-radius:0}#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:11px;cursor:default;padding:0 0 0 5px;outline:none;width:304px}#chatbox_messenger_form .right input[name="submit_button"]{height:33px;font-size:09px;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://2img.net/i/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}#chatbox_members{position:absolute;z-index:1;height:31px;left:0;top:0;width:100%;background:url(http://www.addthis.com/forum/styles/addthis2/theme/images/whosonline.gif) 8px -3px no-repeat white;overflow-y:hidden;border-bottom:1px solid #adadad}#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:hidden;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 .fontbutton:hover,#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:#adadad!important}#chatbox_footer #chatbox_messenger_form .right .fontbutton.fontbutton_selected{background-color:#E6E6E6}#chatbox p.clearfix{background-color:#EDEFF4;margin:0;padding:5px;padding-left:0;margin-left:7px;margin-right:7px}#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:10px}.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:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) 50% 50% no-repeat #000!important}#chatbox p.clearfix[class^="chatbox_row_1"] span[style="font-style:italic"]{font-size:10px;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://i34.servimg.com/u/f34/16/84/47/31/powerb10.jpg) 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)}
#chatbox {
background-image: url(http://i.imgur.com/PI1Ih.png);
background-repeat: no repeat;
}

Endereço do meu fórum:
http://hq-design.umforum.net

Versão do fórum:
PUNBB

Olá!

Substitua o código atual por esse:

Código:

/*=== Chat Personalizado===*/
.chatbox-title, .chatbox-title a.chat-title { color: white!important; } #chatbox_header { background-image: url(http://hitskin.com/themes/16/23/35/i_list_bg.jpg); -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; } .chatbox-options li, .chatbox-options li a, .chatbox-options li label { color: white; } #chatbox_footer { background-image: url(http://hitskin.com/themes/16/23/35/i_list_bg.jpg); -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; } #chatbox_footer label { color: white; } #chatbox_members .member-title { background-color: #CADCEB; background-image: none; color: #105289; font-family: Comic Sans Ms; font-size: 12px; padding: .5em .25em; text-align: center; } .chatbox_row_2 { background-color: #DCEAF5; padding: 4px; } .chatbox_row_1 { background-color: #ECF3F7; padding: 4px; } .inputbox { -moz-border-radius: 20px; -webkit-border-radius: 20px; border: 1px solid #000000; } .pun table th.tc2, .pun table th.tc3, .pun table th.tc4, .pun table th.tcl, .pun table th.tcr { margin-right: -20px !important; } .tcr { margin-right: -20px !important; } form[action='/privmsg?mode=post'] h1.page-title:after{ content:"Afim de aproveitar o sistema de contato por Mensagem Privada, notificamos que não oferecemos suporte via mensagem privada. Contate á Equipe só em casos extremos sobre o Fórum!"; display:block; } /*banner flutuante*/ #popup { position: absolute; top: 30%; left: 30%; width: 300px; height: 150px; padding: 20px 20px 20px 20px; border-width: 2px; border-style: solid; background: #ffffa0; display: none; } body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]{background-color:#FFFFFF;background-image:url()}body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]::-webkit-scrollbar{background-color:#efefef;height:10px;width:10px}body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);height:10px;width:21px}#chatbox_footer .right div[class][id]{height:20px;margin-right:0;border:0;border-right:1px solid #efefef;background-color:#efefef;padding:7px;cursor:default}#chatbox_footer .right div[class][id]:first-child{border-left:1px solid #efefef}#chatbox_main_options span,#chatbox_main_options label,#chatbox_main_options a{height:34px;margin-right:0;border:0;border-right:1px solid #efefef;background-color:#efefef;padding:7px;color:#000;padding-top:14px}#chatbox_main_options{position:absolute;bottom:0;left:0;z-index:1;color:#FFFFFF!important;height:34px;font-size:11;margin:0;margin-bottom:-25px}#chatbox_main_options li a[onclick*="ajax_refresh_chatbox"]{font-size:0;background:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) no-repeat center #efefef;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #efefefcursor:default}#chatbox_main_options a[href="/chatbox/index.forum?archives=1"],#chatbox_main_options a[href="/chatbox/index.forum?archives"]{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 #efefef;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% #efefef;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #efefef;cursor:default}#chatbox_footer{padding:0;background:url() #efefef;border-top:1px solid #CFCFCF;display:block!important;border-radius:0}#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:11px;cursor:default;padding:0 0 0 5px;outline:none;width:304px}#chatbox_messenger_form .right input[name="submit_button"]{height:33px;font-size:09px;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://2img.net/i/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}#chatbox_members{position:absolute;z-index:1;height:31px;left:0;top:0;width:100%;background:url(http://www.addthis.com/forum/styles/addthis2/theme/images/whosonline.gif) 8px -3px no-repeat white;overflow-y:hidden;border-bottom:1px solid #adadad}#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:hidden;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 .fontbutton:hover,#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:#adadad!important}#chatbox_footer #chatbox_messenger_form .right .fontbutton.fontbutton_selected{background-color:#E6E6E6}#chatbox p.clearfix{background-color:#EDEFF4;margin:0;padding:5px;padding-left:0;margin-left:7px;margin-right:7px}#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:10px}.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:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) 50% 50% no-repeat #000!important}#chatbox p.clearfix[class^="chatbox_row_1"] span[style="font-style:italic"]{font-size:10px;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://i34.servimg.com/u/f34/16/84/47/31/powerb10.jpg) 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 .msg{display:none}#chatbox { background-image: url(http://i.imgur.com/PI1Ih.png); background-repeat: no repeat; }

Melhores cumprimentos.

Não resultou.

Olá!

Tente este:

Código:

/*=== Chat Personalizado===*/

.chatbox-title, .chatbox-title a.chat-title {
color: white!important;
}

#chatbox_header {
background-image: url(http://hitskin.com/themes/16/23/35/i_list_bg.jpg); 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
}

.chatbox-options li, .chatbox-options li a, .chatbox-options li label {
color: white;
}

#chatbox_footer {
background-image: url(http://hitskin.com/themes/16/23/35/i_list_bg.jpg); 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
}
#chatbox_footer label {
color: white;
}

#chatbox_members .member-title {
background-color: #CADCEB;
background-image: none;
color: #105289;
font-family: Comic Sans Ms;
font-size: 12px;
padding: .5em .25em;
text-align: center;
}

.chatbox_row_2 {
background-color: #DCEAF5;
padding: 4px;
}
.chatbox_row_1 {
background-color: #ECF3F7;
padding: 4px;
}

.inputbox {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}


.pun table th.tc2, .pun table th.tc3, .pun table th.tc4, .pun table th.tcl, .pun table th.tcr {
margin-right: -20px !important;
}
.tcr {
margin-right: -20px !important;
}

form[action='/privmsg?mode=post'] h1.page-title:after{
  content:"Afim de aproveitar o sistema de contato por Mensagem Privada, notificamos que não oferecemos suporte via mensagem privada. Contate á Equipe só em casos extremos sobre o Fórum!";
  display:block;
}
/*banner flutuante*/
#popup {
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}

body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]{background-color:#FFFFFF;background-image:url()}body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]::-webkit-scrollbar{background-color:#efefef;height:10px;width:10px}body[bgcolor="#ffffff"][text="#000000"][link="#1a1a1a"]::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);height:10px;width:21px}#chatbox_footer .right div[class][id]{height:20px;margin-right:0;border:0;border-right:1px solid #efefef;background-color:#efefef;padding:7px;cursor:default}#chatbox_footer .right div[class][id]:first-child{border-left:1px solid #efefef}#chatbox_main_options span,#chatbox_main_options label,#chatbox_main_options a{height:34px;margin-right:0;border:0;border-right:1px solid #efefef;background-color:#efefef;padding:7px;color:#000;padding-top:14px}#chatbox_main_options{position:absolute;bottom:0;left:0;z-index:1;color:#FFFFFF!important;height:34px;font-size:11;margin:0;margin-bottom:-25px}#chatbox_main_options li a[onclick*="ajax_refresh_chatbox"]{font-size:0;background:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) no-repeat center #efefef;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #efefefcursor:default}#chatbox_main_options a[href="/chatbox/index.forum?archives=1"],#chatbox_main_options a[href="/chatbox/index.forum?archives"]{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 #efefef;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% #efefef;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #efefef;cursor:default}#chatbox_footer{padding:0;background:url() #efefef;border-top:1px solid #CFCFCF;display:block!important;border-radius:0}#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:11px;cursor:default;padding:0 0 0 5px;outline:none;width:304px}#chatbox_messenger_form .right input[name="submit_button"]{height:33px;font-size:09px;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://2img.net/i/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}#chatbox_members{position:absolute;z-index:1;height:31px;left:0;top:0;width:100%;background:url(http://www.addthis.com/forum/styles/addthis2/theme/images/whosonline.gif) 8px -3px no-repeat white;overflow-y:hidden;border-bottom:1px solid #adadad}#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:hidden;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 .fontbutton:hover,#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:#adadad!important}#chatbox_footer #chatbox_messenger_form .right .fontbutton.fontbutton_selected{background-color:#E6E6E6}#chatbox p.clearfix{background-color:#EDEFF4;margin:0;padding:5px;padding-left:0;margin-left:7px;margin-right:7px}#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:10px}.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:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) 50% 50% no-repeat #000!important}#chatbox p.clearfix[class^="chatbox_row_1"] span[style="font-style:italic"]{font-size:10px;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://i34.servimg.com/u/f34/16/84/47/31/powerb10.jpg) 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 .msg{display:block}.user-msg .msg span{border-image-width:0px;border:0px;border-image-source:url(http://i.imgur.com/BMdww.gif)}
#chatbox {
background-image: url(http://i.imgur.com/PI1Ih.png);
background-repeat: no repeat;
}

Melhores cumprimentos.

Nada ainda

Olá!

Tente esse:

Código:

/*=== Chat Personalizado===*/

body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]{background-color:#EDEFF4;background-image:url()}body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]::-webkit-scrollbar{background-color:#f5f5f5;height:10px;width:10px}body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);height:10px;width:21px}#chatbox_footer .right div[class][id]{height:20px;margin-right:0;border:0;border-right:1px solid #CFCFCF;background-color:#f5f5f5;padding:7px;cursor:default}#chatbox_footer .right div[class][id]:first-child{border-left:1px solid #CFCFCF}#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"]{font-size:0;background:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) no-repeat center #f5f5f5;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=1"],#chatbox_main_options a[href="/chatbox/index.forum?archives"]{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_footer{padding:0;background:url() #f5f5f5;border-top:1px solid #CFCFCF;display:block!important;border-radius:0}#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://2img.net/i/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}#chatbox_members{position:absolute;z-index:1;height:31px;left:0;top:0;width:100%;background:url(http://www.addthis.com/forum/styles/addthis2/theme/images/whosonline.gif) 8px -3px no-repeat white;overflow-y:hidden;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:hidden;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 .fontbutton:hover,#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 .fontbutton.fontbutton_selected{background-color:#E6E6E6}#chatbox p.clearfix{background-color:#EDEFF4;margin:0;padding:5px;padding-left:0;margin-left:7px;margin-right:7px}#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:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) 50% 50% no-repeat #000!important}#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)}

Melhores cumprimentos.

Olá Today,ainda não resultou,mas seria possivel me ceder este mesmo código ai acima,com 2 modificação:
1º:Os Posts do Chat forem separados um a um por uma borda preta de 1px
2º:Os Avatares do chat só aparecem anônimos mesmo o user tendo avatar,gostaria que o avatar aparece de acordo com o avatar que o membro usa.

Obrigado ^-^

Showman,

eles não oferecem suporte a JS, no caso.

https://ajuda.forumeiros.com/t71141-como-deixar-chatbox-assim#485997

<html>, creio que este java script seria um parecido com o avatar em last posts, só que seria nos avatares de chatbox, eu gostaria de esperar mais um pouco por uma resposta, mesmo assim obrigado.

UP

ae , eu queria saber como coloco esse chat assim desse geito personalizado na pagina inicial do meu forum com os mesmos efeitos e tal ?

http://4image.kgngames.com/img/594890448490a0e0b504437662890abb.PNG

gamei esse estilo ai.

se auguem puder ajudar agradeço ;D

Olá!
Na imagem o endereço do fórum citado é este: http://hq-design.umforum.net
No inicio do tópico o endereço de seu fórum é o mesmo: http://hq-design.umforum.net

Peço que o senhor seja mais especifico em relação ao seu endereço do fórum, enquanto ao endereço do fórum desejado.

Até mais.

Eu só queria que resolvesse isso do avatar no chat pois os avatares de quem tem não aparece,isso pode até ser externo aos tutoriais,mas eu acho que isso tem haver com o avatar em lastpost,pois é quase igual.

Olá amigo , adicione esse código a sua css .

Código:

body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]{background-color:#EDEFF4;background-image:url()}body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]::-webkit-scrollbar{background-color:#f5f5f5;height:10px;width:10px}body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);height:10px;width:21px}#chatbox_footer .right div[class][id]{height:20px;margin-right:0;border:0;border-right:1px solid #CFCFCF;background-color:#f5f5f5;padding:7px;cursor:default}#chatbox_footer .right div[class][id]:first-child{border-left:1px solid #CFCFCF}#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"]{font-size:0;background:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) no-repeat center #f5f5f5;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=1"],#chatbox_main_options a[href="/chatbox/index.forum?archives"]{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_footer{padding:0;background:url() #f5f5f5;border-top:1px solid #CFCFCF;display:block!important;border-radius:0}#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://2img.net/i/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}#chatbox_members{position:absolute;z-index:1;height:31px;left:0;top:0;width:100%;background:url(http://www.addthis.com/forum/styles/addthis2/theme/images/whosonline.gif) 8px -3px no-repeat white;overflow-y:hidden;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:hidden;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 .fontbutton:hover,#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 .fontbutton.fontbutton_selected{background-color:#E6E6E6}#chatbox p.clearfix{background-color:#EDEFF4;margin:0;padding:5px;padding-left:0;margin-left:7px;margin-right:7px}#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:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) 50% 50% no-repeat #000!important}#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)}

até .

Olá lucas,obrigado,mas infelizmente os avatares de quem tem não aparecem no chatbox ainda.

UP

UP

Olá,

Amigo é simplesmente improvável fazer os avatares aparecerem no chat exatamente como você pediu só com css, se te interessar posso tentar criar o js que reproduza o efeito, mas não é garantido, nem o tempo que vou levar pra isso, nem a funcionalidade; o único que pode te ajudar com o exito garantido é o próprio MateusV criador do efeito...

Até mais

Se puder fazer tudo bem.

Nada ainda,agora todos que postam ficam com o avatar do mascote da forumeiros.

Olá,

Adicione esse código a tua "CSS
Código:

Código:

body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]{background-color:#EDEFF4;background-image:url()}body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]::-webkit-scrollbar{background-color:#f5f5f5;height:10px;width:10px}body[bgcolor="#ffffff"][text="#222222"][link="#1a1a1a"]::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);height:10px;width:21px}#chatbox_footer .right div[class][id]{height:20px;margin-right:0;border:0;border-right:1px solid #CFCFCF;background-color:#f5f5f5;padding:7px;cursor:default}#chatbox_footer .right div[class][id]:first-child{border-left:1px solid #CFCFCF}#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"]{font-size:0;background:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) no-repeat center #f5f5f5;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=1"],#chatbox_main_options a[href="/chatbox/index.forum?archives"]{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_footer{padding:0;background:url() #f5f5f5;border-top:1px solid #CFCFCF;display:block!important;border-radius:0}#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://2img.net/i/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}#chatbox_members{position:absolute;z-index:1;height:31px;left:0;top:0;width:100%;background:url(http://www.addthis.com/forum/styles/addthis2/theme/images/whosonline.gif) 8px -3px no-repeat white;overflow-y:hidden;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:hidden;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 .fontbutton:hover,#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 .fontbutton.fontbutton_selected{background-color:#E6E6E6}#chatbox p.clearfix{background-color:#EDEFF4;margin:0;padding:5px;padding-left:0;margin-left:7px;margin-right:7px}#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:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) 50% 50% no-repeat #000!important}#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://2img.net/i/fa/admin/wait_preview.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://2img.net/i/fa/admin/wait_preview.gif}

Validar.