O Editor CSS é a ferramenta mais avançada do seu site. Com ele, você cria estilos personalizados pra ajustar detalhes visuais como tamanho de fonte, cores e espaçamentos, indo além do que os outros ajustes oferecem. Por mexer direto na folha de estilo do site, ele pede um conhecimento um pouco mais técnico. Neste tutorial, você vai entender como ele funciona e como criar um estilo personalizado.
O que é o Editor CSS
CSS é a linguagem que controla a aparência de um site: as cores, os tamanhos de texto, os espaçamentos, tudo o que é visual. O seu site já vem com um estilo próprio, pronto e ajustado. O Editor CSS entra quando você quer mudar algum detalhe visual específico que os outros ajustes não alcançam. Você escreve uma pequena regra de estilo, e ela passa a valer no site.
Onde fica o Editor CSS
A opção fica no grupo Criador de Site, no menu à esquerda, com o nome Editor CSS. Ao abrir, na aba Classes CSS, você vê a lista dos estilos que já foram cadastrados no site.
Cada item da lista é um estilo personalizado. Ele tem um nome de identificação à esquerda e o código CSS logo abaixo. Os botões Editar e Excluir permitem mudar ou remover cada estilo.
Passo a passo pra cadastrar um estilo
Vá na aba Cadastrar CSS
No topo, clique na aba Cadastrar CSS pra abrir o formulário de novo estilo.
Dê um nome de identificação
No campo Nome da classe, coloque um nome que ajude você a reconhecer esse estilo depois na lista. Pense nele como uma etiqueta. Pode ser algo descritivo como Título maior ou Cor dos botões. Ele serve só pra organização, pra você não se perder quando tiver vários estilos cadastrados.
Escreva o código no campo Estilo CSS
Aqui vai o código de verdade. Você começa pelo seletor, que é o nome da classe com um ponto na frente, abre chaves e escreve as propriedades que quer mudar, uma por linha. Veja um exemplo que aumenta a fonte e muda a cor de um título:
.meu-titulo {
font-size: 32px !important;
color: #104D93 !important;
}Repare no ponto antes do nome da classe. Ele é obrigatório, é o que indica que aquilo é uma classe CSS.
Salve
Clique em Salvar. O novo estilo passa a fazer parte da folha de estilo do site e aparece na lista da aba Classes CSS.
O detalhe mais importante: o !important
Esse é o ponto que mais gera dúvida, então preste atenção. Como o seu site já tem os estilos dele funcionando, quando você cria um estilo novo, os dois podem entrar em conflito, e nem sempre o seu vence. Pra garantir que o seu estilo personalizado sobrescreva o que o site já tem, você adiciona !important no final de cada propriedade, antes do ponto e vírgula.
/* sem !important, o estilo do site pode prevalecer */
color: #104D93;
/* com !important, o seu estilo ganha e vale */
color: #104D93 !important;Na prática, sempre que você quiser ter certeza de que a sua mudança vai aparecer, coloque o !important. É a forma de dizer pro navegador que aquela regra tem prioridade.
Editar e excluir estilos
Na aba Classes CSS, cada estilo cadastrado tem dois botões. O Editar abre o estilo pra você mudar o nome ou o código. O Excluir remove o estilo do site. Se em algum momento uma mudança não te agradar, é só excluir o estilo que causou, e o site volta ao que era antes.