Personalizar Chat Invision

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

Resolvido Personalizar Chat Invision

Mensagem por Kasthiel em 23/04/14, 03:19 am

  • Descrição:
Minha dúvida.
Estou editando meu chat e gostaria de saber como tiro essas barras de scrol do lado direito e que está embaixo.
Pois quanto mais mensagem tem o chat cria a barra original do chat e fica essa outra ai pertubando e a debaixo é inutil.
E outra como coloco para as mensagem que estao ali tipo mensagem 1, mensagem 2, mensagem 3 ficarem com fundo diferente, uma transparente a outra branca quase transparente?
E para por bordas arredondas no chat tambem?

http://i.imgur.com/OF2Wmat.jpg

  • Informações:
Fórum:http://playing.playsboard.com/Versão:INVISION
Tipo:Pedido de códigoTags:Personalizar,Invision



Última edição por Kasthiel em 23/04/14, 07:01 pm, editado 3 vez(es) (Razão : Link da imagem off)
avatar

Kasthiel
Nível 8

Masculino
Inscrito dia : 20/12/2012
Mensagens : 130
Pontos Ativos : 188

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kyo Panda em 23/04/14, 09:25 am

Olá,

Adicione isso ao seu CSS:

Código:
body.chatbox {
  overflow: hidden;
}

Abraços. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kasthiel em 23/04/14, 03:39 pm

Bom, em relação as barras de scroll, ja está tudo ok, agora falta o restinho ...
avatar

Kasthiel
Nível 8

Masculino
Inscrito dia : 20/12/2012
Mensagens : 130
Pontos Ativos : 188

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kyo Panda em 23/04/14, 03:50 pm

Peço perdão por não ter observado todas as demandas, realmente um erro gravíssimo de minha parte.

Quanto as bordas redondas, adicione isso ao seu CSS:

Código:
#chatboxpop {
  border-radius: 10px !important;
}

Quanto maior o 10px, mais redondo.

Quanto ao fundo transparente, precisarei de mais informações. Transparentes referentes a qual elemento? Pois o fundo do chat é branco, logo a transparência em fundo branco não surte efeito.

Mas, adicione isso ao seu CSS:

Código:
p.chatbox_row_1 {
  background: #f00 !important;
}

p.chatbox_row_2 {
  background: #0f0 !important;
}

Aqui você pode mudar o #f00 e #0f0 para as cores desejadas, que elas alternarão nas linhas.

Abraços. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kasthiel em 23/04/14, 04:54 pm

Ta quse la ahushaus.
Agora tem um problema olha a foto ai, quando escrevo demasiado texto, fica bugado o texto sem o fundo, o texto fica praticamente flutuando no chat. Dá pra arrumar isso? ou por um limite pro tamanho do texo no chat?

http://i.imgur.com/U4oCcQN.jpg

Tambem estou tentando por uma imagem no fundo e nao to conseguindo, o script e enorme e nao consigo achar o lugar certo.
avatar

Kasthiel
Nível 8

Masculino
Inscrito dia : 20/12/2012
Mensagens : 130
Pontos Ativos : 188

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kyo Panda em 23/04/14, 05:07 pm

Para a quebra de palavras grandes, adicione isso ao CSS:

Código:
#chatbox > p {
  word-wrap: break-word;
}

Para o fundo:

Código:
#chatbox {
  background: url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-11/images/forest-small.png) !important;
}

Aqui é só trocar o http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-11/images/forest-small.png pela imagem desejada.

Penso que com uma imagem de fundo, conseguimos adicionar um pouco de transparência as linhas. Feliz

Seria:

Código:
p.chatbox_row_1 {
  background: rgba(255, 255, 255, 0.5) !important;
}

p.chatbox_row_2 {
  background: rgba(255, 255, 255, 0.8) !important;
}

Por exemplo. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kasthiel em 23/04/14, 05:16 pm

@Kyo Panda escreveu:Para a quebra de palavras grandes, adicione isso ao CSS:

Código:
#chatbox > p {
  word-wrap: break-word;
}

Tipo, esse codigo nao funciona muito bem, quando escrevo a mensagem enorme, ele continua com aquele buguizinho,
So ativa o codigo aqui comigo se eu atualizar a pagina, ai ele pega o limite do texto c tamanho do chat e quebra pra linha de baixo, mas se eu escrever tudo enorme de novo volta aquele erro. Tonto 
avatar

Kasthiel
Nível 8

Masculino
Inscrito dia : 20/12/2012
Mensagens : 130
Pontos Ativos : 188

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kyo Panda em 23/04/14, 05:22 pm

Hum... Estranho. Bem, remova o código citado e adicione esse:

Código:
#chatbox {
  overflow-x: hidden;
}

Pelo menos dessa forma conseguimos cortar palavras muito grandes. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kasthiel em 23/04/14, 05:33 pm

Hahaha.
Pelo menos tira aquele escroll de baixo.
Queria que tivesse um limite pro tamanho do texto, seria muito top.
Do jeito que eu botei fica extranho kkk.
Deixei assim

Nao era assim que eu queria, se souber outro jeito.
Assim o que escreve de mais o chat corta e quando atualiza o resto das mensagens aparecem embaixo.
Código:

#chatbox {
  overflow-x: hidden;
  word-wrap: break-word;
}
avatar

Kasthiel
Nível 8

Masculino
Inscrito dia : 20/12/2012
Mensagens : 130
Pontos Ativos : 188

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kyo Panda em 23/04/14, 05:47 pm

Vamos tentar mais um pouco. Feliz

Adicione isso ao CSS:

Código:
#chatbox .user-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar Chat Invision

Mensagem por Kasthiel em 23/04/14, 06:00 pm

Código:

#chatbox {
  overflow-x: hidden;
  word-wrap: break-word;
}

Código:

#chatbox .user-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Bom usando essas dois juntos resolveu meu problema.  Tive uma idéia! 
avatar

Kasthiel
Nível 8

Masculino
Inscrito dia : 20/12/2012
Mensagens : 130
Pontos Ativos : 188

Ver perfil do usuário http://wydchronus.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