Personalização do chat

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Personalização do chat

Mensagem por Pedro Rodrigues em 26/09/12, 11:51 pm

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:

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

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:
e na parte Inferior:

Agradeço desde Já Piscada

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


Última edição por Pedro Rodrigues em 30/09/12, 01:43 am, editado 1 vez(es)

Pedro Rodrigues
Nível 7

Feminino
Inscrito dia : 18/09/2012
Mensagens : 82
Pontos Ativos : 129

Ver perfil do usuário http://roadtoninjarpg.forumeiros.com/forum

Resolvido Re: Personalização do chat

Mensagem por Pedro Rodrigues em 27/09/12, 05:24 pm

Alguém?

Pedro Rodrigues
Nível 7

Feminino
Inscrito dia : 18/09/2012
Mensagens : 82
Pontos Ativos : 129

Ver perfil do usuário http://roadtoninjarpg.forumeiros.com/forum

Resolvido Re: Personalização do chat

Mensagem por Convidado em 27/09/12, 05:34 pm

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 zen

Convidado
Convidado


Resolvido Re: Personalização do chat

Mensagem por Pedro Rodrigues em 27/09/12, 06:28 pm

Olá FireWhip!

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

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

Pedro Rodrigues
Nível 7

Feminino
Inscrito dia : 18/09/2012
Mensagens : 82
Pontos Ativos : 129

Ver perfil do usuário http://roadtoninjarpg.forumeiros.com/forum

Resolvido Re: Personalização do chat

Mensagem por Nickname em 27/09/12, 06:37 pm

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

Nickname
Membro do Fórum

Masculino
Inscrito dia : 13/11/2011
Mensagens : 1551
Pontos Ativos : 2048

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Personalização do chat

Mensagem por Convidado em 27/09/12, 06:39 pm

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 {
    }
zen

Convidado
Convidado


Resolvido Re: Personalização do chat

Mensagem por Pedro Rodrigues em 27/09/12, 06:55 pm

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:

Veja como eu gostaria que ficasse:


Pedro Rodrigues
Nível 7

Feminino
Inscrito dia : 18/09/2012
Mensagens : 82
Pontos Ativos : 129

Ver perfil do usuário http://roadtoninjarpg.forumeiros.com/forum

Resolvido Re: Personalização do chat

Mensagem por Pedro Rodrigues em 27/09/12, 10:13 pm

?

Pedro Rodrigues
Nível 7

Feminino
Inscrito dia : 18/09/2012
Mensagens : 82
Pontos Ativos : 129

Ver perfil do usuário http://roadtoninjarpg.forumeiros.com/forum

Resolvido Re: Personalização do chat

Mensagem por Pedro Rodrigues em 30/09/12, 01:42 am

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*

Chat após códigos*

Piscada



Pedro Rodrigues
Nível 7

Feminino
Inscrito dia : 18/09/2012
Mensagens : 82
Pontos Ativos : 129

Ver perfil do usuário http://roadtoninjarpg.forumeiros.com/forum

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum