Personalizar Chat Invision

[Kasthiel]

• 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?

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

---

• Informações:

Fórum:	http://playing.playsboard.com/	Versão:	INVISION
Tipo:	Pedido de código	Tags:	Personalizar,Invision

---

[Kyo Panda]

Olá,

Adicione isso ao seu CSS:

Código:

body.chatbox {
  overflow: hidden;
}

Abraços.

[Kasthiel]

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

[Kyo Panda]

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.

[Kasthiel]

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?

https://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.

[Kyo Panda]

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.

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.

[Kasthiel]

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.  

[Kyo Panda]

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.

[Kasthiel]

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;
}


[Kyo Panda]

Vamos tentar mais um pouco.

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;
}

[Kasthiel]

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.