Pular para conteúdo

As cores do site

As cores do site não são escolhidas livremente, tela por tela: todas vêm de uma mesma paleta, definida de uma vez por todas. Esta página explica esse princípio e suas consequências. O detalhe da tela está em Cores.

Em um minuto

  • A paleta tem dez cores, organizadas em espaços numerados de 1 a 10. Ela é configurada em Ajustes > Cores.
  • Em todos os outros lugares (uma atividade, uma página, uma categoria de posts), escolhe-se uma dessas cores em uma lista. Nunca se digita um código de cor.
  • O site guarda o número do espaço escolhido, não a cor em si.

Daí a consequência principal: mudar uma cor da paleta muda essa cor em todo lugar ao mesmo tempo. Se o laranja do centro passar a um laranja mais suave, todas as atividades, as páginas e os blocos que o usam acompanham a mudança, sem precisar refazê-los um a um.

Quem pode modificar as cores

As cores formam a identidade visual do site: só os administradores podem modificá-las. Os editores abrem a mesma tela apenas para leitura, para copiar as classes CSS das cores (veja abaixo).

Se você acha que uma cor deve mudar, fale com o administrador do site.

Onde cada cor é usada

Uma cor da paleta pode ser usada em quatro lugares.

As atividades. Cada atividade recebe uma cor. Suas sessões ganham essa cor no calendário público, nos blocos “Próximos eventos” e na página do evento. Um evento pode, excepcionalmente, receber uma cor própria (veja abaixo).

As páginas e as categorias de posts. Uma página pode receber sua própria cor; caso contrário, fica com a cor padrão do site. O mesmo vale para uma categoria de posts.

Os papéis. Algumas partes do site têm uma cor atribuída, escolhida na paleta:

Papel O que ele colore
Cor padrão A cor dominante do site: cabeçalho, rodapé, menu, páginas sem cor própria.
Cor dos botões do calendário Os botões de navegação do calendário público.
Cor das barras de rolagem As barras de rolagem da página e das faixas que rolam.

Os submenus não têm cor própria: eles retomam a cor padrão, um pouco mais clara. Assim, continuam combinando com o menu quando ela muda.

Os blocos das páginas Avada. Um bloco de uma página (uma seção, um texto, um título…) pode receber uma cor da paleta (veja abaixo).

Colorir um bloco de uma página

Nas páginas construídas com o Avada, colore-se um bloco acrescentando-lhe uma classe CSS: uma pequena palavra-chave, colada no campo CSS Class dos ajustes do bloco. Cada cor da paleta tem duas classes, para copiar a partir da tela Cores:

  • background-color- seguido do nome da cor, para colorir o fundo do bloco (background-color-orange);
  • text-color- seguido do nome da cor, para colorir o seu texto (text-color-orange).

A classe text-white deixa o texto em branco, sobre um fundo colorido.

O procedimento e alguns exemplos estão em Botões Fundo e Texto.

O nome de uma cor importa

As classes são feitas a partir do nome da cor. Se orange passar a se chamar amber, a classe background-color-orange deixa de existir, e os blocos que a usavam perdem a cor. Mudar o tom de um espaço, ao contrário, não estraga nada. Veja Nome.

As exceções

Dois ajustes aceitam uma cor fora da paleta:

  • uma página: “Cor da página” > “Escolher outra cor”;
  • um evento: “Cor personalizada”, quando ele deve se diferenciar da sua atividade.

Essas cores não acompanham as mudanças da paleta. Reserve-as para as verdadeiras exceções.

Quando a mudança aparece

Assim que um administrador salva uma modificação das cores, o cache do site é esvaziado: os visitantes veem as novas cores na visita seguinte. Se o seu próprio navegador ainda mostrar as antigas, recarregue a página com Ctrl + F5 (no Mac: Cmd + Shift + R).

Para saber mais