Chatbox personalizado

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

Resolvido Chatbox personalizado

Mensagem por yT0RM3NT0 em 03/11/11, 06:37 pm

Qual é minha questão:
Eu estava procurando como personalizar o chatbox e achei o seguinte tópico:

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

Eu tentei montar o código e tudo mais, mas eu não entendi a 3º parte, eu não sei se está certo o código que tentei usar

Alguém poderia me passar o código completo para mim editar?

Eu sei editar e tudo mais, mas eu não consegui "Juntar as partes"

Eu tava tentando mudar e consegui só isso:

Código:
background-color: #FFFFFF;
background-image: url(http://yourimg.in/m/6043adu.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
background-position: 2px 10px;
color: #FFFFFF;
color: 10pt;
font-family Verdana, Geneva, sans-serif;
#chatbox_header

Agradeço desde já

Medidas que eu tomei para corrigir o problema:
Nenhuma

Imagens do meu problema:
-

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

Versão do meu fórum:
PHPBB3

yT0RM3NT0
Nível 9

Masculino
Inscrito dia : 09/08/2011
Mensagens : 203
Pontos Ativos : 330

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

Resolvido Re: Chatbox personalizado

Mensagem por Cream em 03/11/11, 06:42 pm

Olá amigo,

A terceira parte do tutorial, fala sobre qual parte do chatbox você irá aplicar estes códigos que você produziu (chamados de propriedades). Exemplo:
#chatbox_header {
background-color: #FFFFFF;
background-image: url(http://yourimg.in/m/6043adu.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
background-position: 2px 10px;
color: #FFFFFF;
color: 10pt;
font-family: Verdana, Geneva, sans-serif;

}
A parte em Vermelho vai alterar a parte em Verde. Entendes? Use as chaves (em azul) para abrir as propriedades de uma classe, e fechá-las. Assim por diante...

Até mais!
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Chatbox personalizado

Mensagem por yT0RM3NT0 em 03/11/11, 06:49 pm

Ficara +/- assim? :

Código:
#chatbox_header
h2.chatbox-title a.chat-title
#chatbox_main_options a
#chatbox_members
#chatbox
.chatbox_row_1
.chatbox_row_2
.chatbox_row_3
#chatbox_footer {
background-color: #FFFFFF;
background-image: url(http://yourimg.in/m/6043adu.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
background-position: 2px 10px;
color: #FFFFFF;
color: 10pt;
font-family: Verdana, Geneva, sans-serif;
}

Eu não entendo muito de códigos,

Ah e mais uma coisa, terá que colocar o link das imagens ?

yT0RM3NT0
Nível 9

Masculino
Inscrito dia : 09/08/2011
Mensagens : 203
Pontos Ativos : 330

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

Resolvido Re: Chatbox personalizado

Mensagem por Cream em 03/11/11, 06:53 pm

Olá amigo,

Você deve separar cada propriedade para cada classe. Entende? Por exemplo:
Spoiler:
#chatbox_header {
background-color: #FFFFFF;
}

h2.chatbox-title a.chat-title {
background-color: #FFFFFF;
}

#chatbox_main_options a {
background-color: #FFFFFF;
}

#chatbox_members {
background-color: #FFFFFF;
}

#chatbox {
background-color: #FFFFFF;
}

.chatbox_row_1 {
background-color: #FFFFFF;
}

.chatbox_row_2 {
background-color: #FFFFFF;
}

.chatbox_row_3 {
background-color: #FFFFFF;
}

#chatbox_footer {
background-color: #FFFFFF;
}
Você não pode agrupar as classes quando elas são diferentes e para locais totalmente diferentes. Haverá conflitos no código. Sobre a imagem poderia explicar melhor? Não pude compreender. Lembrando, adicione sempre os códigos CSS em:
Painel de controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS

Até mais! Piscada
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Chatbox personalizado

Mensagem por Gaaratsu em 03/11/11, 06:54 pm

Olá,

Aonde quer colocar imagens TudoSobreJogosForum ?


Owner Piscada


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5948
Pontos Ativos : 7430

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

Resolvido Re: Chatbox personalizado

Mensagem por yT0RM3NT0 em 03/11/11, 08:03 pm

@Owner escreveu:Olá,

Aonde quer colocar imagens TudoSobreJogosForum ?


Owner Piscada

Olá, olhe a imagem abaixo


yT0RM3NT0
Nível 9

Masculino
Inscrito dia : 09/08/2011
Mensagens : 203
Pontos Ativos : 330

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

Resolvido Re: Chatbox personalizado

Mensagem por yT0RM3NT0 em 03/11/11, 08:04 pm

@Cream escreveu:Olá amigo,

Você deve separar cada propriedade para cada classe. Entende? Por exemplo:
Spoiler:
#chatbox_header {
background-color: #FFFFFF;
}

h2.chatbox-title a.chat-title {
background-color: #FFFFFF;
}

#chatbox_main_options a {
background-color: #FFFFFF;
}

#chatbox_members {
background-color: #FFFFFF;
}

#chatbox {
background-color: #FFFFFF;
}

.chatbox_row_1 {
background-color: #FFFFFF;
}

.chatbox_row_2 {
background-color: #FFFFFF;
}

.chatbox_row_3 {
background-color: #FFFFFF;
}

#chatbox_footer {
background-color: #FFFFFF;
}
Você não pode agrupar as classes quando elas são diferentes e para locais totalmente diferentes. Haverá conflitos no código. Sobre a imagem poderia explicar melhor? Não pude compreender. Lembrando, adicione sempre os códigos CSS em:
Painel de controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS

Até mais! Piscada

Obrigado, Cream ajudou muito

yT0RM3NT0
Nível 9

Masculino
Inscrito dia : 09/08/2011
Mensagens : 203
Pontos Ativos : 330

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

Resolvido Re: Chatbox personalizado

Mensagem por Cream em 03/11/11, 08:12 pm

Olá,

Amigo, poderia nos dizer se sua dúvida ainda persiste? Para colocar imagem nestes locais, utilize os seguintes códigos em:
Painel de controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS

Insira o seguinte:
Spoiler:
#chatbox_header {
background-image: url(IMG);
}

#chatbox_footer {
background-image: url(IMG);
}

#chatbox {
background-image: url(IMG);
}
Troque os lugares com "IMG" pelo link da imagem desejada.

Resulta?
Até mais!
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Chatbox personalizado

Mensagem por yT0RM3NT0 em 03/11/11, 08:31 pm

@Cream escreveu:Olá,

Amigo, poderia nos dizer se sua dúvida ainda persiste? Para colocar imagem nestes locais, utilize os seguintes códigos em:
Painel de controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS

Insira o seguinte:
Spoiler:
#chatbox_header {
background-image: url(IMG);
}

#chatbox_footer {
background-image: url(IMG);
}

#chatbox {
background-image: url(IMG);
}
Troque os lugares com "IMG" pelo link da imagem desejada.

Resulta?
Até mais!

Seria assim? :

Código:
#chatbox_header {
background-color: url(http://yourimg.in/m/78y936p.png);
}

#chatbox {
background-color: url(http://yourimg.in/m/6043adu.png);
}

#chatbox_footer {
background-color: url(http://yourimg.in/m/78y936p.png);
}

Se for assim, não resultou Triste

yT0RM3NT0
Nível 9

Masculino
Inscrito dia : 09/08/2011
Mensagens : 203
Pontos Ativos : 330

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

Resolvido Re: Chatbox personalizado

Mensagem por Cream em 03/11/11, 08:34 pm

Olá amigo,

Não. Você usou a propriedade 'color' ao invés da propriedade 'image'. Ficaria assim:
Spoiler:
#chatbox_header {
background-image: url('http://yourimg.in/m/78y936p.png');
}

#chatbox {
background-image: url(http://yourimg.in/m/6043adu.png);
}

#chatbox_footer {
background-image: url('http://yourimg.in/m/78y936p.png');
}

Teste deste modo e veja se resulta.
Até mais! Piscada
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Chatbox personalizado

Mensagem por yT0RM3NT0 em 03/11/11, 08:39 pm

@Cream escreveu:Olá amigo,

Não. Você usou a propriedade 'color' ao invés da propriedade 'image'. Ficaria assim:
Spoiler:
#chatbox_header {
background-image: url('http://yourimg.in/m/78y936p.png');
}

#chatbox {
background-image: url(http://yourimg.in/m/6043adu.png);
}

#chatbox_footer {
background-image: url('http://yourimg.in/m/78y936p.png');
}

Teste deste modo e veja se resulta.
Até mais! Piscada

Obrigado, Cream, resultou

Obrigado

yT0RM3NT0
Nível 9

Masculino
Inscrito dia : 09/08/2011
Mensagens : 203
Pontos Ativos : 330

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

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