Se você passa horas analisando métricas no Grafana, sabe o quanto a estética do dashboard pode influenciar a experiência. Afinal, um ambiente visualmente agradável faz toda a diferença na leitura dos dados. Mas e quando as opções padrão de personalização não são suficientes?
Existe um pequeno “truque” que pode te ajudar, a edição direta do CSS. Com esse método, você pode ir além das configurações convencionais, ajustando o fundo do seu dashboard para combinar com a identidade visual da sua empresa, seu gosto pessoal ou simplesmente criar uma experiência mais imersiva.
Editando o CSS do Dashboard
Para aplicar as alterações no plano de fundo, utilizaremos o plugin HTML Graphics, sem título e com transparência ativada. Esse painel ficará invisível no dashboard, mas servirá como um “container” para o nosso código CSS.
Passo a Passo:
Editando CSS root:
Neste exemplo, focaremos apenas na edição do campo CSS root, sem utilizar os demais campos, como CSS, HTML ou JavaScript. Iremos modificar especificamente a propriedade body (corpo da página) para ajustar a aparência do dashboard.
Alterando o plano de fundo:
Para mudar a cor de fundo do dashboard, adicione o seguinte código em CSS root:
body {
background: #0b131f;
}Aqui, #0b131f é um exemplo de cor hexadecimal. Sinta-se à vontade para substituí-la por qualquer outra cor de sua preferência.
Adicionando uma imagem de fundo:
Se preferir usar uma imagem como plano de fundo, utilize a propriedade url do CSS. Substitua ‘LINK_DA_IMAGEM’ pelo endereço da imagem desejada:
body {
background: url('LINK_DA_IMAGEM');
background-repeat: no-repeat;
background-size: cover;
}Essas propriedades CSS controlam a exibição de imagens de fundo em um elemento:
background-repeat: no-repeat; → Impede que a imagem de fundo se repita, exibindo-a apenas uma vez.
background-size: cover; → Faz com que a imagem de fundo cubra todo o elemento, ajustando seu tamanho proporcionalmente para preencher o espaço disponível sem distorcer a imagem.
Dica: Utilize imagens leves para não impactar o carregamento do seu dashboard!
Bônus: Usando Gradientes para um visual moderno
Que tal dar um toque ainda mais profissional ao seu dashboard? Experimente um gradiente no plano de fundo. Você pode criar um de forma manual ou utilizar ferramentas como o cssgradient.io, que permite gerar códigos CSS para gradientes personalizados.
Aqui está um exemplo de como aplicar um gradiente no plano de fundo:
body {
background: rgb(18,26,38);
background: linear-gradient(43deg, rgba(18,26,38,1) 15%, rgba(65,216,130,1) 100%);
}Neste exemplo, o gradiente começa com um tom escuro e transiciona para um verde vibrante, criando um efeito moderno e sofisticado.
Conclusão
Com essas técnicas, você pode transformar completamente a aparência do seu dashboard no Grafana, deixando-o mais atrativo, profissional e personalizado. Seja uma simples mudança de cor, a adição de uma imagem de fundo ou até mesmo um gradiente sofisticado, as possibilidades são infinitas!
Agora é com você: experimente, teste diferentes combinações e torne o seu dashboard único! 🚀
Obrigado por acompanhar esse artigo.
