Rocketchat: Customizando a aparência de sua instância do RocketChat

O RocketChat é altamente customizável para as necessidades de branding.

Dentre as opções disponíveis de comunicação, encontram-se a alteração das cores do sistema e a aplicação de uma imagem personalizada em áreas como a barra lateral e a tela de login.

Este guia mostra algumas opções de customização e como fazê-las.

Customizando a aparência

  • No menu inicial, clique no ícone ⋮ e selecione "Administração":

  • Em seguida, selecione "Layout" (1) na barra lateral esquerda. Para modificar cores, selecione "Cores" (2). Caso deseje alterar definições gerais de aparência (inclusive especificação de cores) via "CSS Customizado" (3)

Para alterar as cores da barra lateral, por exemplo, existem dois métodos:

Alterando cores da barra lateral - Pelo item "Cores"

Este método é indicado se você pretende definir cores globais para sua instância do RocketChat. As cores configuradas aqui afetam todo o esquema de cores da instância, e geralmente mais de um elemento.

  1. No grupo de configurações "Layout" (imagem acima), selecione "Cores". Este sub-menu trará diversos itens relacionado a cores de diversos elementos, como texto, erros, alertas e também a barra lateral. Uma cor pode ser do tipo Expressão (o valor da cor é armazenado em uma constante) ou Cor (escolhida por um seletor de cores):
  1. Para alterar as cores da barra lateral, modifique :
  • Primário/Primary: a cor da barra lateral. Também é a cor do título do usuário que aparece no livechat e a cor da tela
  • Primary Darkest: a cor que uma mensagem ou chat na barra lateral apresenta quando o mouse é passado sobre ela
  • Escuro Primário: a cor que uma mensagem ou chat na barra lateral apresenta quando este está selecionado (clicado)
  • Luz primária: a cor da fonte e ícones da barra lateral. Também é a cor que realça o elemento do menu "Administração", e a cor dos dados do usuário que aparece no livechat.

Alterando cores da barra lateral - Pelo item "CSS Customizado"

Este método é indicado se você quiser realizar alterações pontuais de Layout via CSS, inspecionando o elemento e acrescentando a codificação pertinente.

Para alterar a cor do plano de fundo da barra lateral, por exemplo, utilize a seguinte sintaxe:

.sidebar{

background:"#e4e4e4" !important; 

}
Dica: use o marcador !important para garantir que o CSS customizado substituirá a outra versão.

Alterando imagens da barra lateral e do ícone do navegador

Em administração, selecione o item Recursos (Assets) no menu lateral esquerdo.

Nesta página, você poderá alterar:

  1. O logotipo que será exibido na barra lateral e no menu de login
  2. O fundo da tela de login
  3. O Favicon (imagem que é exibida na aba do navegador). Existem várias opções de formato e tamanhos de arquivos

Não esqueça de salvar as alterações e selecionar "Aplicar e atualizar todos os clientes", se quiser que esta alteração tenha efeito para todos os usuários da sua instância do RocketChat

As alterações de imagem podem surtir efeito apenas ao limpar o cache do navegador.

Ainda com dúvidas?

Nossa equipe está disponível para te ajudar. Caso precise, envie um email para suporte@ilhasoft.com.br ou abra um ticket em nossa plataforma: atendimento.ilhasoft.com.br

Como a gente se saiu?

Ticketer: Como integrar o RocketChat como serviço de ticket na Plataforma Weni

Rocketchat: Como enviar Message Templates pelo RocketChat

Contato