Visão Geral
As boas práticas recomendam o uso de ambientes separados para “desenvolvimento” e “produção”, e em alguns casos, até outros ambientes podem ser necessários, como “QA” (quality assurance) ou “Treinamentos”.
Nestes casos, um logotipo diferente para identificar cada ambiente é muito útil.
Neste tópico vou mostrar como adicionar um rótulo diferenciador sobre o logotipo usando apenas CSS, sem a necessidade de editar a imagem do logotipo.
Código CSS
No Latromi Client
No Latromi Client, acesse o menu Configurações → CSS Público, e adicione o código abaixo, e depois clique em depois Salvar:
.master-header div[role="img"]{
position:relative;
}
.master-header div[role="img"]::after {
content:"Homologação"; /* texto do rótulo */
color: white; /* cor do texto */
background: tomato; /* cor de fundo */
font-size: 10px;
line-height: 10px;
position: absolute;
bottom:0;
right:0;
padding:1px;
}
No Latromi Web
Por fim, para que o código CSS seja atualizado no site, será necessário clicar em “Recarregar Configurações” na página inicial do Latromi Web, em um acesso de administrador:
Resultado Final
