Antes de começar certifique de que sua skin não seja modificada, caso seja você precisará tirar qualquer CSS relacionada ao chatbox, se tiverem duvidas em relação a isso crie um tópico com sua folha de estilo para poder obter suporte.
Para uma melhor experiência recomendo usar o JS feito pelo nosso amigo JScript, Auto Logon in Chat Box!
Após isso vá em Painel de Controle Visualização Imagens e Cores Cores folha de estilo CSS
[guest] - Código:
@font-face { font-family: 'Play'; font-style: normal; font-weight: 400; src: local('Play'), local('Play-Regular'), url(https://fonts.gstatic.com/s/play/v7/ZNo-5SxCwH1CXgZ-n3bt2g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
body[bgcolor] { background: #fff; }
.chatbox_row_1.clearfix.shout-0 span span[style="color:undefined"] { font-size: 0px; }
.chatbox-options li a span#chatbox_option_co:before { content: "Para visualizar as mensagens clique em login."; text-align: center; margin-top: 125px; background: #FFFFFF!important; width: 100%; height: 80px; right: 0; position: absolute; z-index: 1; display: block; border-top: 1px solid #ebebeb; font-size: 14px!important; color: #000; }
.chatbox-options li a span#chatbox_option_co:after { content: " Você está desconectado!"; margin-top: 180px; background: #ccc!important; width: 100%; padding: 10px 0; right: 0; position: absolute; z-index: 1; text-align: center; display: block; border-top: 1px solid #ebebeb; font-size: 20px!important; color: #000; }
#chatbox .user strong span, body #chatbox .msg, #chatbox .date-and-time, #chatbox_header.main-head { font-family: Play,Arial,Helvetica,sans-serif!important; font-size: 14px!important; }
#chatbox .date-and-time { float: right; color: #cacaca; font-size: 11px; }
#chatbox .date-and-time img { opacity: 0.5; }
#chatbox .date-and-time img:hover { opacity: 1.0; }
#chatbox_header.main-head { background: #3d648a; padding: 0; margin: 0; list-style: none; position: inherit; height: 40px; display: block; }
#chatbox_header.main-head:after { content: "Divulgação, flood, spam ou atitudes desrespeitosas não são toleradas neste Chat."; background: #ebebeb; color: #111111; margin-top: 40px; display: block; padding: 10px; position: absolute; width: 100%; }
.chatbox-title { font-size: 14px; color: #fff; padding: 10px 10px 0 10px; }
.chatbox-title, .chatbox-title a.chat-title { color: #fff; font-weight: 300; text-decoration: none; }
#chatbox_members, #chatbox { top: 80px; }
.chatbox-options { background: rgba(0,0,0,0.5); opacity: 0.6; color: #fff; padding: 5px; }
#chatbox_members { display: none; }
#chatbox { left: 0; }
.chatbox_row_1, .chatbox_row_2 { background-color: #fff; position: relative; border-width: 0 0 1px 0; border-style: solid; border-color: #ebebeb; padding: 7px; }
#chatbox > p { border-bottom: 1px solid #ebebeb!important; }
body #chatbox .user strong { font-size: 0px; margin-left: 4px; }
body #chatbox .user strong span { font-size: 12px; font-weight: 300; }
body #chatbox .msg { display: block; line-height: 1.5em; margin-top: -7px!important; }
#chatbox_footer .right:first-child { width: 100% !important; float: right; }
.pun .main-content.chatbox { border: 0px solid #ebebeb; }
#chatbox_footer .right:nth-child(2) { float: right; margin-top: -42px; z-index: 999; }
#chatbox_messenger_form label[for="message"] { display: none; }
input#message.post { width: 90% !important; margin-top: 2px; height: 12px; padding: 8px 10px 8px 8px !important; border: none !important; background: transparent; outline: none; }
input#message.post { background: url(https://i.imgur.com/5zppq7r.png) no-repeat!important; }
input#message.post:focus { background: transparent!important; }
#divcolor, #help-button, .format-message + label { display: none!important; }
.right #submit_button { position: absolute; right: 0; margin-right: 10px; }
.right #submit_button { height: 30px!important; background: #1abc9c; color: #ffffff !important; cursor: pointer; text-align: center; font-size: 13px; font-weight: 500; text-align: center; text-decoration: none; text-shadow: none; white-space: nowrap; display: inline-block; vertical-align: middle; padding: 5px 15px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); -webkit-transition: 0.1s all linear; -moz-transition: 0.1s all linear; -ms-transition: 0.1s all linear; -o-transition: 0.1s all linear; transition: 0.1s all linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; border-width: 0px!important; }
#divsmilies { width: 24px!important; height: 24px!important; background: url(https://i.imgur.com/Ku7QNJd.png) no-repeat; border: 0px!important; /* position:absolute; */ margin-right: 80px; margin-top: 15px; }
#divsmilies>img { display: none; }
#divsmilies:hover:before { content: "Emoticons"; background: #2a2a2a; line-height: 26px; font-size: 12px; color: #fff; position: absolute; padding: 0 8px; pointer-events: none; border-radius: 2px; position: absolute; margin-top: -30px; margin-left: -35px; }
#chatbox_footer { height: auto !important; background-color: #fff!important; border-top: 0px dashed #ccc; }
body #chatbox .cb-avatar { border-width: 0!important; }
#chatbox .cb-avatar, #chatbox .cb-avatar img { background: none repeat scroll 0 0 #fff!important; border: 0px solid #d5d5d5!important; border-width: 0!important; box-shadow: none!important; float: left; margin-right: 4px!important; padding: 1px!important; vertical-align: middle!important; width: 34px!important; height: 34px!important; }
[/guest]
Resultado [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
|