Personaliza chat box

Qual é minha questão:
Gostaria de deixar o chat box como na imagem.

vi nesse forum.

http://cavaleiros-lendarios.forum-livre.com/portal

Links e imagens do meu problema:
https://i.imgur.com/c5QOi.jpg

Endereço do meu fórum:
http://www.narutorpgakatsuki.com/

Versão do meu fórum:
PUNBB

Hello querido,

Bem, o senhor deseja o Chat todo? Ou apenas a borda zulada no campo de resposta?

Graciosamente,
Mikéé.

o chat box todo, ate a forma no qual se loga se conversa etc...

Olá,

Aceda a seu CSS e aplique:

Código:

 #chatbox_members{border-right:1px solid;bottom:30px;overflow:auto;position:absolute;top:30px;width:180px}#chatbox{bottom:30px;left:181px;line-height:10px;overflow:auto;position:absolute;right:0;top:30px}.chatbox_row_1,.chatbox_row_2,.chatbox_row_3{font-size:12px}.chatbox-options{text-align:right}#chatbox_messenger_form,#chatbox_messenger_form .gen,#chatbox_messenger_form .text-field{float:right;white-space:nowrap}#chatbox_footer{bottom:0;height:30px;left:0;position:absolute;right:0}#chatbox_footer table.text-styles{float:right}#chatbox_footer .text-field{float:left}#chatbox_header{background-color:#000;height:30px}#chatbox p{line-height:1.2em}.chatbox_row_1{background-color:#000;padding:4px}.chatbox_row_2{background-color:#000;padding:4px}.chatbox_row_3{background-color:#000;padding:4px}.memberlist_row_1{background-color:#000;padding:2px 2px 2px 10px}#chatbox_members .member-title{background-color:#000;background-image:none;color:#ccc;font-family:Arial;font-size:12px;padding:.5em .25em;text-align:center}#chatbox_members ul{list-style:none;margin:0 0 0 10px}#chatbox_members ul li{margin:2px 2px 2px 0}#message,#submit_button{border-width:1px}.fontbutton{border:0;cursor:pointer;padding:1px;text-align:left}.fontbutton_normal{background:#E1E1E2}.fontbutton_selected{background:#BBC7CE;border:1px solid #22229C}.fontbutton_clicked{background:#959595;border:1px solid #22229C}.fontbutton_hover{background:#E1E1E2;border:1px solid #22229C}#chatbox .user{font-weight:700}div#chatbox{color:#fff}#chatbox_contextmenu{background-color:#000;border:1px solid #aaa}#chatbox_contextmenu p{background:#;border-bottom:1px solid #777;font-family:verdana, arial, sans-serif;margin:0;padding:1px 4px}#chatbox_contextmenu p.hover{background:#}#chatbox_contextmenu p.close{background:url();color:#fff;font-size:70%;padding:1px}#chatbox_contextmenu p.close img{padding-left:20px;vertical-align:middle}#chatbox_contextmenu a{color:#;font-size:70%;text-decoration:none}#chatbox_contextmenu a:hover{color:#}* html #chatbox-members{height:expression((document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight) - ((parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 2px * 0) ) + px)}* html #chatbox{height:expression((document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight) - ((parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 2px * 0) ) + px);width:expression((document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth) - ((parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 10) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 1) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 2px * 1.3) ) + px)}* html #chatbox-footer{width:expression((document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth) - ((parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333px * 2px * 0) ) + px)}

Cordialmente.

Não teve nenhuma alteração

up

up

Olá Shion,

Está ciente que as versões não são as mesmas e que partes do chatbox são diferentes para cada versão, correto?

Assim, terá de converter essas partes para PunBB.

Cordialmente.

VocÊ já não tem o codigo pronto para punbb...?

Olá,

Não. Alias, isso me tomaria muito tempo. Recomendo que o senhor mesmo faça.

Cordialmente.

Ace escreveu:Olá Shion,

Está ciente que as versões não são as mesmas e que partes do chatbox são diferentes para cada versão, correto?

Assim, terá de converter essas partes para PunBB.

Cordialmente.

Na verdade, as classes são as mesmas.

Tente este:

Código:

.member-title.online::before {
content: "Jogadores ";
}
.member-title.away::before {
content: "Jogadores ";
}
#chatbox_header a strong::after {
content: " Cavaleiros Lendários ";
}
.msg span[style="color:green;"] {
background-image: url(http://cdn5.iconfinder.com/data/icons/fatcow/32x32/status_online.png);
background-repeat: no-repeat;
color: #149B02!important;
font-size: 14px;
padding-bottom: 13px;
padding-left: 31px;
padding-top: 7px;
text-shadow: 1px 1px 30px green;
}
#chatbox_footer{
background-color: #00003C;
border: 2px solid #0707DA;
border-radius: 10px;
box-shadow: 0 0 10px blue;
margin-left: -136px;
margin-right: 147px;
margin-top: -10px;
padding: 0 10px;
position: relative;
}

Abraços.

Eu adicionei porem a barra de enviar ficou em cima, e ele nao ficou com a aparencia do outro.

Olá senhor , adicione a sua css .

Código:

 #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}

Usa esse css:

Código:

#chatbox_header{background-image:url();background-color:#060646!important;border:1px solid #00009B}#chatbox_header *{color:white!important}#chatbox_footer{background: url(http://i.imgur.com/iuLnO.png); border: 0px;}#chatbox_messenger_form{-webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-shadow: blue 0px 0px 10px 0px; background-color: #00003C; border-bottom-color: #0707DA; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-style: solid; border-bottom-width: 2px; border-collapse: separate; border-left-color: #0707DA; border-left-style: solid; border-left-width: 2px; border-right-color: #0707DA; border-right-style: solid; border-right-width: 2px; border-top-color: #0707DA; border-top-left-radius: 10px; border-top-right-radius: 10px; border-top-style: solid; border-top-width: 2px; box-shadow: blue 0px 0px 10px 0px; display: table; font-family: Arial; height: 38px; margin-bottom: 0px; margin-left: -136px; margin-right: 147px; margin-top: -10px; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px; position: relative; white-space: nowrap; width: 925px;}

Obrigado meta tag funcionou.