Pular para o conteúdo principal

Layout Avançado (Custom CSS)

O Layout avançado permite personalizar a aparência e o comportamento do ACCELERO incluindo CSS e JavaScript próprios, aplicados em todas as páginas do sistema. Na prática, ele abre espaço para construir um frontend sob medida para o ACCELERO — reestilizando cores, tipografia, logos, listagens e formulários — apenas escrevendo CSS (e, quando necessário, pequenos scripts).

Requer licenciamento

O Layout avançado é um módulo licenciado (customcss, categoria Avançado). A tela de configuração só fica disponível quando o módulo está habilitado na licença. Ver Licenciamento.

Recurso técnico

Este recurso pressupõe conhecimento de CSS/JavaScript. O código informado é aplicado a todas as páginas, então um erro pode afetar a exibição ou o funcionamento do sistema inteiro. Teste sempre com cuidado.

Configuração​

Caminho de acesso: Configurações > Personalização - Layout avançado

A tela apresenta dois editores de código:

CampoDescrição
CSS a incluir em todas as páginasEstilos CSS aplicados a todas as páginas do ACCELERO
JS a incluir em todas as páginasJavaScript executado em todas as páginas do ACCELERO

Preencha o que precisar e clique em Salvar. Editar essa configuração exige a permissão de edição de configurações.

TODO: Adicionar Screenshot

Tela Configurações > Personalização - Layout avançado mostrando os dois editores (CSS e JS) e o botão Salvar.

Onde é aplicado​

O CSS e o JS informados são incluídos em todas as páginas do sistema — inclusive nas páginas públicas de convite (as telas que o visitante vê ao acompanhar ou cancelar um convite). Uma personalização feita aqui vale tanto para a interface dos operadores quanto para as páginas acessadas por visitantes.

Descobrindo os seletores​

O ACCELERO usa uma base Bootstrap, então a maioria dos elementos tem classes previsíveis. Para personalizar um elemento específico:

  1. Abra a tela desejada no navegador.
  2. Clique com o botão direito sobre o elemento e escolha Inspecionar.
  3. Veja a classe ou o id do elemento e use-o como seletor no seu CSS.

Alguns seletores úteis e estáveis do sistema:

ElementoSeletor
Logo do topo (área logada).header .main-logo
Cabeçalho do topo.header
Logo da tela de login#loginbox .card-container img
Rótulos de campos.control-label
Campos de formulário (inputs/selects).form-control
Grupo de um campo (rótulo + campo).form-group
Botões primários.btn-primary
Botão de login.btn-login
Tabelas de listagem.table

Exemplos práticos​

Os exemplos abaixo são ilustrativos. Ajuste os seletores à tela que você está personalizando e teste antes de deixar em produção.

Deixar todo o sistema em MAIÚSCULAS​

/* CSS a incluir em todas as páginas */
body {
  text-transform: uppercase;
}
Apenas visual

text-transform altera só a exibição — o texto continua armazenado como foi digitado. Para forçar a digitação em maiúsculas em um campo específico, aplique também no input:

input.form-control,
textarea.form-control {
  text-transform: uppercase;
}

Substitua o logo do topo (área logada):

.header .main-logo {
  content: url('https://seu-dominio.com/logo-cliente.png');
  height: 40px;
  width: auto;
}

E o logo da tela de login:

#loginbox .card-container img {
  content: url('https://seu-dominio.com/logo-cliente.png');
  max-width: 220px;
  height: auto;
}
Hospede a imagem em um endereço acessível

Use uma URL pública e estável (HTTPS). Se a imagem sair do ar, o logo deixa de aparecer.

Mudar as cores da marca​

/* Botões primários e barra do topo na cor do cliente */
.btn-primary {
  background-color: #0a7c5a;
  border-color: #0a7c5a;
}
.header {
  background-color: #0a7c5a;
}

Ocultar um elemento​

/* Exemplo: esconder o "Lembrar-me" da tela de login */
#loginbox .checkbox {
  display: none;
}
Ocultar não é o mesmo que restringir

Esconder um botão via CSS não remove a permissão por trás dele — apenas deixa de exibi-lo. Para controlar o que cada operador pode fazer, use Perfis.

Destacar as listagens​

/* Cabeçalho das tabelas em destaque e linhas com zebra mais forte */
.table thead th {
  background-color: #0a7c5a;
  color: #fff;
}
.table tbody tr:nth-child(odd) {
  background-color: #f3f7f5;
}

Marcar um campo como obrigatório​

Visualmente, você pode sinalizar um campo obrigatório com um asterisco no rótulo. Descubra o campo pelo atributo data-name (visível no Inspecionar) e destaque o rótulo correspondente:

/* Adiciona um asterisco vermelho ao rótulo de um campo */
.control-label[for="usuDocumento"]::after {
  content: " *";
  color: #d33;
}
Marcação visual ≠ validação

O exemplo acima apenas sinaliza o campo — não impede o salvamento se ele ficar vazio. A validação de obrigatoriedade no ACCELERO é feita pelo atributo data-validation="notnull" do campo. Forçar essa validação por conta própria exige JavaScript e depende de o campo participar do fluxo de validação padrão da tela — teste bem antes de usar em produção.

Exemplo com JavaScript​

O campo JS a incluir em todas as páginas permite pequenos comportamentos globais. Exemplo simples que aplica maiúsculas ao digitar em um campo específico:

// JS a incluir em todas as páginas
document.addEventListener('input', function (e) {
  if (e.target.matches('[data-name="pesNome"]')) {
    e.target.value = e.target.value.toUpperCase();
  }
});
Cuidado com o JavaScript personalizado

Scripts aplicados a todas as páginas podem interferir no funcionamento normal do sistema. Use apenas código confiável, mantenha-o simples e valide bem antes de deixar em produção.

Boas práticas​

  • Evolua aos poucos: aplique poucas regras por vez e verifique o resultado em diferentes telas (listagens, formulários e as páginas de convite).
  • Prefira classes estáveis: use as classes estruturais (.form-control, .control-label, .table) em vez de seletores muito específicos que podem mudar entre versões.
  • Documente o que aplicou: mantenha um registro do CSS/JS usado, para facilitar manutenção e diagnóstico.
  • Não use para segurança: ocultar elementos é estético; restrições de acesso pertencem a Perfis e às permissões.

Próximos Passos​