Personalização do chat

Qual é minha questão:
Existe algum código que eu possa acrescentar ao meu CSS para melhorar o chatbox do meu fórum?

Vejam abaixo um print que eu tirei dele:
https://i.servimg.com/u/f30/17/70/63/19/chatbo10.jpg

É um pouco feio e... Queria melhora-lo um pouco.

Links e imagens do meu problema:
Não é necessário.

Endereço do meu fórum:
http://metalisthelaw.ativoforum.com/

Versão do meu fórum:
INVISION

Boa tarde,

Aceda à teu CSS com o código abaixo:
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

Código:

.introduction, .panel {-moz-border-radius: 5px;-webkit-border-radius: 5px;background-color: #FCFCFC;border: 2px solid #EAEAEA;border-radius: 5px;}.row3 {background-color: white;}.panel {background-color: white;color: gray;margin-bottom: 4px;padding: 0 10px;}

Atenciosamente,
Mikéé.

Mikéé escreveu:Boa tarde,

Aceda à teu CSS com o código abaixo:
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

Código:

.introduction, .panel {-moz-border-radius: 5px;-webkit-border-radius: 5px;background-color: #FCFCFC;border: 2px solid #EAEAEA;border-radius: 5px;}.row3 {background-color: white;}.panel {background-color: white;color: gray;margin-bottom: 4px;padding: 0 10px;}

Atenciosamente,
Mikéé.

Adicionei as linhas de CSS em questão e não resultou em nada, o chatbox continua como antes.

Olá,

Poderá então desfrutar dos códigos do tutorial abaixo:

https://ajuda.forumeiros.com/t22416-tutorial-personalizar-o-chatbox

Passar bem.

Muito bem, caso nada ocorro eu to postando aqui para facilitar:

Vá em:

Painel de Controle -> Módulos -> Portal & Widgets -> Gestão dos Widgets do Fórum -> Criar um Widget personalizado:

Nome Do Widget: Bote ChatPersonalizado
Utilizar Um table Type: (Maque Não)
titulo do Widget: Não escreva Nada:
Fonte do widget:

CODIGO:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="Imagem de ENTRADA AQUI[/img]" id="chatboxopen" style="display: inline; "><img src="IMAGEM DE SAIDA AQUI" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>

O que eu quero dizer com imagem de Entrada e de Saida: Simples:
Onde vai aparecer para fechar e para abrir o CHAT, ele ficara em um sitio diferente, Claro que você pode criar sua própria ABA DE FECHAR E DE SAIR mais se quiser utilize a mesma que a minha se quiser o mesmo que o meu Bote na FONT de Widget este cod:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="https://i.servimg.com/u/f39/17/09/34/10/abrir10.jpg" id="chatboxopen" style="display: inline; "><img src="https://i.servimg.com/u/f39/17/09/34/10/enter10.jpg" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>


Até mais.