Personalização do chat

Qual é minha questão:
Bem, já li o Tutorial sobre personalização, tentei alguns códigos, mais nada que eu faço se aproxima do que eu quero realmente.

Gostaria de deixar o Layout do meu chat mais a cara do fórum personalizando ele.
como não sei bem explicar as coisas eu fiz umas imagens pra que possam entender o que eu quero.

Até então meu chat se encontra da seguinte forma:

https://i.servimg.com/u/f39/17/79/51/88/chat_310.png

Representação de como eu gostaria que ele ficasse:

https://i.servimg.com/u/f39/17/79/51/88/chat_410.png

como podem ver, eu alterei apenas a parte Superior, a parte Inferior, e a cor do fundo do chat (linha que fica entre Usuários conectados e o Chat)

Hoje em dia uso os seguintes comandos no CSS para modificar o Chat:

Código:

#chatbox {
background-image: url(http://i39.servimg.com/u/f39/17/79/51/88/invert10.png);
background-repeat: no-repeat;
background-position: bottom right;
}
#chatbox_members{
background-color:#080808;
}

foram apenas os comandos que eu consegui executar com perfeição! :/

Queria que me ajudassem a personalizar meu chat.
caso necessário aqui estão a URL das imagens que eu gostaria que estivessem na parte Superior:

https://i.servimg.com/u/f39/17/79/51/88/chat_411.png

e na parte Inferior:

https://i.servimg.com/u/f39/17/79/51/88/chat_412.png

Agradeço desde Já

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

Endereço do meu fórum:
http://roadtoninjarpg.forumeiros.com/forum

Versão do meu fórum:
PHPBB3

Alguém?

Boas,
amigo troque o código por este:

Código:

#chatbox_header {
    background: url(http://i39.servimg.com/u/f39/17/79/51/88/chat_411.png);
    }
    #chatbox_footer {
    background: url(http://i39.servimg.com/u/f39/17/79/51/88/chat_412.png);
    }
    #chatbox_members {
    background: #6F6F6F;
    }
    #chatbox_members .member-title {
    background-color: #AAA;
    background-image: none;
    box-shadow: white 1px 0 20px 1px;
    color: #704A4A;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    padding: .5em .25em;
    text-align: center;
    }
    .chatbox_row_2 {
    background-color: white;
    padding: 4px;
    }
    .chatbox_row_1 {
    background-color: #EFEDED;
    padding: 4px;
    }
    #chatbox {
    bottom: 30px;
    left: 181px;
    line-height: 10px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 30px;
    box-shadow: white 1px 1px 30px 1px;
    }
    #frame_chatbox {
    border-radius: 30px;
    box-shadow: 0 0 30px 3px black;
    }
    #chatbox {
    background: #704A4A;
    }
    .date-and-time {
    display: none;
    }
    #chatbox_main_options {
    z-index: 50;
    position: relative;
    color: white;
    }
    .cattitle strong {
        color: white;
        font-size: 20px;
        padding-left: 15px;
    }
    #chatbox_main_options a {
        color: white;
        text-decoration: none;
        font-size: 15px;
    }
    #chatbox_members a {
    }

Resultou?

Passar Bem

Olá FireWhip!

Coloquei o código, mais parece que o mesmo foi rejeitado :/

veja aqui - https://i.servimg.com/u/f39/17/79/51/88/proble18.png

Olá,
A imagem que é aplicada nas categorias, é a imagem que irá aparecer no tópo e fim do chat, tente modificar para a imagem que desejas e veja se resulta.

Cordialmente
Upload

Boas,
troque por este:

Código:

/*chatbox personalizado*/
#chatbox_header {
    background: url(http://i39.servimg.com/u/f39/17/79/51/88/chat_411.png);
    }
    #chatbox_footer {
    background: url(http://i39.servimg.com/u/f39/17/79/51/88/chat_412.png);
    }
    #chatbox_members {
    background: #6F6F6F;
    }
    #chatbox_members .member-title {
    background-color: #AAA;
    background-image: none;
    box-shadow: white 1px 0 20px 1px;
    color: #704A4A;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    padding: .5em .25em;
    text-align: center;
    }
    .chatbox_row_2 {
    background-color: white;
    padding: 4px;
    }
    .chatbox_row_1 {
    background-color: #EFEDED;
    padding: 4px;
    }
    #chatbox {
    bottom: 30px;
    left: 181px;
    line-height: 10px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 30px;
    box-shadow: white 1px 1px 30px 1px;
    }
    #frame_chatbox {
    border-radius: 30px;
    box-shadow: 0 0 30px 3px black;
    }
    #chatbox {
    background: #704A4A;
    }
    .date-and-time {
    display: none;
    }
    #chatbox_main_options {
    z-index: 50;
    position: relative;
    color: white;
    }
    .cattitle strong {
        color: white;
        font-size: 20px;
        padding-left: 15px;
    }
    #chatbox_main_options a {
        color: white;
        text-decoration: none;
        font-size: 15px;
    }
    #chatbox_members a {
    }

Upload - poderia ser mais claro? :/

Firewhip - Detectei o porque do código não ser aceito, o ultimo comando;

Código:

    }
    #chatbox_members a {
    }

eu coloquei da seguinte forma

Código:

    }
    #chatbox_members a
}

sendo assim o CSS aceitou o código como "valido", porem não obtive o resultado esperado.

veja como ficou o chat:

https://i.servimg.com/u/f39/17/79/51/88/proble19.png

Veja como eu gostaria que ficasse:

https://i.servimg.com/u/f39/17/79/51/88/chat_410.png

?

Bem, tive que passar horas lendo e relendo tutoriais pra aprender, uma coisa tão fácil que nem tinha necessidade! vou dizer como aqui, caso alguém tenha as mesmas dúvidas que eu tive!

No caso para alterar a parte superior do chatbox, é necessário o seguinte código:

Código:

#chatbox_header{
background-image: url(URL DA IMAGEM DA SUA PREFERENCIA);
background-repeat: no-repeat;
background-color:#080808;
}

Para alterar a parte superior do chatbox, é necessário o seguinte código:

Código:

#chatbox_footer{
background-image: url(URL DA IMAGEM DA SUA PREFERENCIA)!important;
background-repeat: no-repeat;
background-color:#080808;
}

Com esses dois comandos vc poderá personalizar parte do seu chat:

Chat comum*

https://i.servimg.com/u/f39/17/79/51/88/chat_310.png

Chat após códigos*

https://i.servimg.com/u/f39/17/79/51/88/chat_410.png