Cores¶

Onde: menu Ajustes > Cores. Quem: os administradores modificam as cores; os editores as consultam e copiam as classes CSS delas.

É aqui que se definem as cores da identidade visual do site, de uma vez por todas. Nenhuma outra tela permite escrever uma cor livremente: as atividades, os eventos, as páginas e as categorias de posts escolhem uma das cores definidas aqui.

A vantagem: modificar uma cor nesta tela a modifica em todo lugar ao mesmo tempo. Se o laranja do site passar a um laranja mais suave, todas as atividades, páginas e blocos que o usam mudam de uma só vez, sem precisar retomá-los um a um.

Por que só os administradores podem modificar as cores

Essas cores formam a identidade visual do site. Elas foram pensadas com cuidado de antemão, para combinarem entre si e darem ao site a sua identidade. Como mudar uma delas modifica a aparência de todo o site de uma só vez, só os administradores podem modificá-las.

Os editores veem a mesma tela apenas para leitura, para copiarem as classes CSS das cores (veja O que os editores veem). Se você achar que uma cor deve mudar, fale com o administrador do site.

1 Paleta: as cores do site. 2 Papéis de cor: qual cor da paleta colore qual parte do site. 3 Cor dos submenus: calculada a partir da cor padrão. 4 Antigas classes CSS em francês: ajuste de compatibilidade para os sites antigos. 5 Salvar alterações: nada é levado em conta antes desse clique.

Entender em um minuto¶

flowchart LR
    P["Paleta<br>10 cores"] --> A[Atividades]
    P --> E[Eventos]
    P --> G[Páginas]
    P --> C[Categorias de posts]
    P --> R["Papéis<br>cabeçalho, rodapé,<br>menu, calendário…"]
    P --> K["Classes CSS<br>blocos das páginas Avada"]

A paleta tem 10 espaços, numerados de 1 a 10. Cada um recebe uma cor e um nome.
Em todo lugar, escolhe-se um espaço em uma lista suspensa, onde cada cor aparece com o seu número e o seu nome (por exemplo 2 · orange-light).
O site guarda o número do espaço, não a cor propriamente dita. É por isso que mudar a cor de um espaço se reflete em todo lugar.

O que os editores veem¶

Um editor abre a mesma tela, apenas para leitura:

uma mensagem lembra que as cores fazem parte da identidade visual;
cada cor usada aparece com o seu número, o seu nome, uma pré-visualização e o seu código, seguidos dos botões Fundo e Texto para copiar a classe CSS dela;
o botão de cópia de Texto branco continua disponível;
os papéis e a cor dos submenus são exibidos, sem poderem ser alterados;
não há botão Salvar alterações.

O resto desta página descreve a tela como os administradores a veem.

A paleta¶

1 Número do espaço. 2 Nome. 3 Cor. 4 Botões de cópia das classes CSS.

Um espaço sem cor não é usado: ele não aparece em nenhuma lista de escolha. Você não é obrigado a preencher os dez.

Número¶

O número nunca muda. É ele que as atividades, as páginas e os outros ajustes guardam: você pode, portanto, modificar a cor ou o nome de um espaço sem que eles percam o seu ajuste.

Nome¶

O nome serve para fabricar as classes CSS da cor (veja Botões Fundo e Texto) e a identifica nas listas de escolha.

Escreva-o em inglês: é o costume em CSS, e as classes do plugin também estão em inglês (background-color-…, text-color-…). Por exemplo orange, orange-light, dark-blue.
Use minúsculas, algarismos e hifens, sem acentos nem espaços. Um nome escrito de outra forma é convertido ao salvar (“Dark Blue” vira dark-blue).
Se ficar vazio, o nome é substituído pelo número do espaço.
Dois espaços não podem ter o mesmo nome.
Alguns nomes são reservados pelo plugin e são recusados: page, page-light, page-clair, default, defaut.
Evite repetir o identificador de uma categoria de posts (o “slug” dela, visível em Posts > Categorias): os dois entrariam em conflito. Uma mensagem avisa você se for o caso.

Dica: dê a cada cor o nome do seu tom

orange, blue, green… e acrescente -light para a versão clara: orange-light. Se a identidade visual evoluir um dia para um laranja ligeiramente diferente, mude a cor, não o nome.

Mudar o nome de uma cor estraga as páginas que a usam

Se orange virar amber, a classe background-color-orange deixa de existir, e os blocos das páginas que a usavam perdem a cor. A mudança de nome fica memorizada: a tela Ferramentas > Migração das cores do site oferece depois a atualização de todas essas páginas. Só mude o nome de uma cor em caso de real necessidade.

Cor¶

Clique no botão Selecionar cor para abrir o seletor.

1 Escolha a cor no quadrado. 2 Ajuste o tom, mais claro ou mais escuro, com a barra da direita. 3 Ou cole o código da cor dado pela identidade visual: um # seguido de seis caracteres, por exemplo #e67e22. 4 Limpar esvazia o espaço.

Não esvazie um espaço ainda em uso

Tudo o que usava essa cor a perde, mas não da mesma maneira:

as páginas e os papéis voltam à cor padrão;
os blocos coloridos com os seus botões Fundo ou Texto deixam de ser coloridos;
as atividades mantêm a cor antiga no calendário e nos blocos “Próximos eventos”, mas a escolha de cor delas aparece vazia na tela delas: será preciso escolher outra na próxima modificação.

Antes de esvaziar um espaço, escolha outra cor em todos os lugares onde ele é usado.

Botões Fundo e Texto¶

Esses botões servem para colorir um bloco em uma página construída com o Avada (contêiner, coluna, bloco de texto, título…). Eles só aparecem nos espaços que têm uma cor.

Eles copiam uma classe CSS: uma pequena palavra-chave que se acrescenta a um bloco para mudar a aparência dele, aqui para lhe dar uma cor da paleta.

Clique em Fundo para colorir o fundo do bloco, ou em Texto para colorir o texto dele. A classe é copiada: o botão mostra ✓ durante um segundo.
No construtor do Avada, abra os ajustes do bloco a colorir, aba General. Por exemplo um contêiner (Container), ou seja, uma seção da página, para colorir o fundo dele; ou um bloco de texto (Text Block), para colorir o texto dele.
Cole a classe no campo CSS Class e depois salve a página. Para colocar várias, separe-as com um espaço.

Botão	Classe copiada	Efeito
Fundo	`background-color-orange`	fundo do bloco na cor `orange`
Texto	`text-color-orange`	texto do bloco na cor `orange`

Escrever em branco. Sobre um fundo colorido, acrescente a classe text-white: todo o texto do bloco fica branco. Ela não faz parte da paleta (não é uma cor à escolha, apenas “branco”): tem o seu próprio botão de cópia, logo abaixo da paleta — veja Texto branco.

Clarear um fundo. Acrescente uma segunda classe, separada por um espaço: background-opacity-XX, em que XX é uma porcentagem. Por exemplo, background-color-orange background-opacity-40 dá um fundo laranja a 40 %.

Exemplos

Bloco Avada	No campo CSS Class	Resultado
Contêiner (uma seção da página)	`background-color-blue text-white`	seção com fundo azul, texto em branco
Contêiner	`background-color-orange background-opacity-20`	seção com fundo laranja bem claro
Bloco de texto	`text-color-orange`	texto em laranja

Nomes antigos

Nos sites mais antigos, talvez você encontre texte-blanc em páginas: é o nome antigo de text-white, e continua funcionando. Para uma página nova, use text-white.

Nome novo ainda não salvo

Se você acabou de escrever ou de modificar um nome, os botões já copiam a nova classe, mas ela só vai funcionar no site depois de Salvar alterações.

Texto branco¶

Logo abaixo da paleta, um botão Copiar dá acesso à classe text-white: ela deixa o texto de um bloco em branco, para escrever sobre um fundo colorido. Assim como os botões Fundo e Texto, basta clicar e depois colar a classe no campo CSS Class do bloco no Avada (veja Botões Fundo e Texto).

Este campo é puramente prático: text-white não faz parte da paleta e não é salvo, por isso o botão funciona tanto para os administradores quanto para os editores.

Os papéis de cor¶

Um papel atribui uma cor da paleta a uma parte precisa do site. Cada lista só oferece os espaços que têm uma cor, e assume a cor da opção escolhida.

1 Cor padrão. 2 Cor dos botões do calendário. 3 Cor das barras de rolagem. 4 Cor dos submenus. 5 Antigas classes CSS em francês.

Cor padrão¶

A cor principal do site: é ela que determina a sua cor dominante. Ela colore:

o cabeçalho e o rodapé de todas as páginas;
o menu do site (o menu deslizante);
as páginas que não têm cor própria (ajuste “Cor da página” de cada página);
os botões dos formulários e vários elementos de layout;
os blocos “Próximos eventos” e as páginas de evento, quando a atividade não tem cor.

Ela tem também os seus botões Fundo e Texto, que copiam background-color-default e text-color-default: um bloco colorido assim vai acompanhar a cor padrão mesmo que você a mude um dia.

Cor dos botões do calendário¶

Os botões de navegação do calendário: período anterior, período seguinte e volta ao período atual. Ao passar o mouse, um botão fica mais claro; ao clicar, ele escurece. O botão de volta fica mais claro enquanto você já estiver no período atual.

A etiqueta dele acompanha o que está exibido: “hoje” na visão por mês, “esta semana” na visão por semana — a dos celulares.

Cor das barras de rolagem¶

A parte móvel das barras de rolagem: a da página, e as das faixas que deslizam na horizontal (próximos eventos, retratos dos professores).

Note

O Firefox não aplica essa cor e mantém as suas barras de rolagem habituais.

Cor dos submenus¶

Os submenus do menu deslizante não têm cor própria: eles retomam a cor padrão, mais clara no número de pontos de luminosidade indicado. Menu e submenus ficam assim em harmonia, mesmo quando a cor padrão muda.

A pré-visualização mostra a cor do menu (em cima) e a dos submenus (embaixo), como foram salvas.
0: os submenus têm exatamente a cor do menu, não se distinguem mais.
8 (valor padrão): uma diferença discreta, mas visível.
100: os submenus ficam brancos.

O tom é mantido: o resultado é a mesma cor mais clara, e não uma cor desbotada.

À esquerda, o menu, na cor padrão. À direita, um submenu, mais claro.

Antigas classes CSS em francês¶

Antes de o plugin passar para o inglês, as classes de cor tinham nomes franceses: fond-couleur-…, texte-couleur-…, fond-opacite-….

Ajuste técnico

Só o modifique com o acordo do webmaster do site.

Deixe a caixa marcada se páginas do seu site ainda usarem essas classes. A tela Ferramentas > Migração das cores do site lista todas as classes encontradas nas páginas.
Desmarque-a em um site novo, ou quando todas as páginas tiverem passado para as classes em inglês: cada página do site ficará um pouco mais leve.

Salvar¶

Reservado aos administradores. Clique em Salvar alterações no fim da tela. A mensagem “Configurações salvas” confirma a operação.

Pode aparecer uma mensagem de aviso no topo da tela:

Mensagem	O que aconteceu
“o nome … é reservado pelo plugin”	O nome foi substituído pelo número do espaço. Escolha outro nome.
“o nome … já está sendo usado pela cor …”	Dois espaços tinham o mesmo nome: o segundo recebeu o seu número no lugar.
“… também é o slug de uma categoria de posts”	O nome é aceito, mas pode entrar em conflito com a cor dessa categoria. Escolha outro nome.

Assim que uma cor muda, o cache do site é esvaziado automaticamente: os visitantes veem as novas cores na próxima visita.

Perguntas frequentes¶

Mudei uma cor, mas o site não mudou. Verifique se você clicou mesmo em Salvar alterações e depois recarregue a página do site com Ctrl + F5 (no Mac: Cmd + Shift + R): talvez o seu navegador tenha guardado a versão antiga.

Um bloco de uma página perdeu a cor de fundo. A classe CSS dele não corresponde mais a nenhuma cor: espaço com o nome mudado ou esvaziado, ou classe antiga de atividade (as atividades não produzem mais classes). A tela Ferramentas > Migração das cores do site encontra essas classes e as substitui.

A cor que procuro não aparece na lista de uma atividade ou de uma página. O espaço não tem cor na paleta. Preencha-o aqui e depois salve.

Não consigo modificar as cores. É normal se você for editor: as cores fazem parte da identidade visual, e só os administradores podem mudá-las. Você sempre pode copiar as classes CSS delas com os botões Fundo e Texto.

Posso acrescentar uma décima primeira cor? Não, a paleta tem sempre dez espaços.

Posso usar uma cor fora da paleta? Só em dois casos: uma página (“Cor da página” > “Escolher outra cor”) e um evento (“Cor personalizada”). Reserve isso para as exceções: essas cores não acompanham as mudanças da paleta.

Onde essas cores são escolhidas¶

Tela	Ajuste
Uma atividade	Cor da atividade na agenda e nas páginas dos cursos e dos eventos
Um evento	Cor de substituição, só se tiver de ser diferente da cor da atividade
Uma página	Cor da página, no quadro à direita da tela de edição
Uma categoria de posts	Cor da categoria

Para a lógica do conjunto, veja As cores do site.