Cores¶

Onde: menu Definições > Cores. Quem: os administradores modificam as cores; os editores consultam-nas e copiam as suas classes CSS.

É aqui que se definem as cores da identidade visual do site, de uma vez por todas. Nenhum outro ecrã permite escrever uma cor livremente: as atividades, os eventos, as páginas e as categorias de artigos escolhem uma das cores definidas aqui.

A vantagem: modificar uma cor neste ecrã modifica-a em todo o lado 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 ter de os retomar um a um.

Porque é que só os administradores podem modificar as cores

Estas cores formam a identidade visual do site. Foram pensadas com cuidado de antemão, para combinarem entre si e darem ao site a sua identidade. Como mudar uma delas modifica o aspeto de todo o site de uma só vez, só os administradores as podem modificar.

Os editores veem o mesmo ecrã apenas para leitura, para copiarem as classes CSS das cores (ver O que veem os editores). Se te parecer que uma cor deve mudar, fala com o administrador do site.

1 Paleta: as cores do site. 2 Funções de cor: que cor da paleta colore que parte do site. 3 Cor dos submenus: calculada a partir da cor por omissão. 4 Antigas classes CSS em francês: definição de compatibilidade para os sites antigos. 5 Guardar alterações: nada é tido em conta antes deste clique.

Compreender num minuto¶

flowchart LR
    P["Paleta<br>10 cores"] --> A[Atividades]
    P --> E[Eventos]
    P --> G[Páginas]
    P --> C[Categorias de artigos]
    P --> R["Funções<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 o lado, escolhe-se um espaço numa lista pendente, 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 repercute em todo o lado.

O que veem os editores¶

Um editor abre o mesmo ecrã, 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 sua classe CSS;
o botão de cópia de Texto branco continua disponível;
as funções e a cor dos submenus são mostradas, sem poderem ser alteradas;
não há botão Guardar alterações.

O resto desta página descreve o ecrã tal como o veem os administradores.

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: não aparece em nenhuma lista de escolha. Não és obrigado a preencher os dez.

Número¶

O número nunca muda. É ele que as atividades, as páginas e as outras definições guardam: podes portanto modificar a cor ou o nome de um espaço sem que percam a sua definição.

Nome¶

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

Escreve-o em inglês: é o uso em CSS, e as classes do plugin também o são (background-color-…, text-color-…). Por exemplo orange, orange-light, dark-blue.
Usa minúsculas, algarismos e hífenes, sem acentos nem espaços. Um nome escrito de outra forma é convertido ao guardar («Dark Blue» passa a 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 estão reservados pelo plugin e são recusados: page, page-light, page-clair, default, defaut.
Evita repetir o identificador de uma categoria de artigos (o seu «slug», visível em Artigos > Categorias): os dois contradizer-se-iam. Uma mensagem avisa-te se for o caso.

Conselho: dá a cada cor o nome da sua tonalidade

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

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

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

Cor¶

Clica no botão Seleccionar cor para abrir o seletor.

1 Escolhe a cor no quadrado. 2 Ajusta a sua tonalidade, mais clara ou mais escura, com a barra da direita. 3 Ou cola 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 esvazies um espaço ainda em uso

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

as páginas e as funções retomam a cor por omissão;
os blocos coloridos com os seus botões Fundo ou Texto deixam de estar coloridos;
as atividades mantêm a sua antiga cor no calendário e nos blocos «Próximos eventos», mas a sua escolha de cor aparece vazia no ecrã delas: será preciso escolher-lhes outra na próxima modificação.

Antes de esvaziar um espaço, escolhe outra cor em todo o lado onde ele é usado.

Botões Fundo e Texto¶

Estes botões servem para colorir um bloco numa página construída com o Avada (contentor, coluna, bloco de texto, título…). Só aparecem nos espaços que têm uma cor.

Copiam uma classe CSS: uma pequena palavra-chave que se acrescenta a um bloco para mudar o seu aspeto, aqui para lhe dar uma cor da paleta.

Clica em Fundo para colorir o fundo do bloco, ou em Texto para colorir o seu texto. A classe fica copiada: o botão mostra ✓ durante um segundo.
No construtor do Avada, abre as definições do bloco a colorir, separador General. Por exemplo um contentor (Container), ou seja uma secção da página, para colorir o seu fundo; ou um bloco de texto (Text Block), para colorir o seu texto.
Cola a classe no campo CSS Class e depois guarda a página. Para pôr várias, separa-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 a branco. Sobre um fundo colorido, acrescenta a classe text-white: todo o texto do bloco passa a branco. 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 — ver Texto branco.

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

Exemplos

Bloco Avada	No campo CSS Class	Resultado
Contentor (uma secção da página)	`background-color-blue text-white`	secção com fundo azul, texto a branco
Contentor	`background-color-orange background-opacity-20`	secção com fundo laranja muito claro
Bloco de texto	`text-color-orange`	texto a laranja

Nomes antigos

Nos sites mais antigos, talvez encontres texte-blanc em páginas: é o antigo nome de text-white, e continua a funcionar. Para uma página nova, usa text-white.

Nome novo ainda não guardado

Se acabaste de escrever ou de modificar um nome, os botões já copiam a nova classe, mas esta só vai funcionar no site depois de Guardar alterações.

Texto branco¶

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

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

As funções de cor¶

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

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

Cor por omissão¶

A cor principal do site: é ela que determina a sua cor dominante. 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 (definição «Cor da página» de cada página);
os botões dos formulários e vários elementos de paginação;
os blocos «Próximos eventos» e as páginas de evento, quando a atividade não tem cor.

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 por omissão mesmo que a mudes 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 regresso ao período atual. Ao passar o rato, um botão fica mais claro; ao clicar, escurece. O botão de regresso fica mais claro enquanto já se estiver no período atual.

A sua etiqueta acompanha o que está apresentado: «hoje» na vista por mês, «esta semana» na vista por semana — a dos telemóveis.

Cor das barras de deslocamento¶

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

Note

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

Cor dos submenus¶

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

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

A tonalidade é mantida: o resultado é a mesma cor mais clara, e não uma cor desbotada.

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

Antigas classes CSS em francês¶

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

Definição técnica

Só a modifiques com o acordo do webmaster do site.

Deixa a caixa selecionada se páginas do teu site ainda usarem estas classes. O ecrã Ferramentas > Migração das cores do site lista todas as classes encontradas nas páginas.
Desseleciona-a num 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.

Guardar¶

Reservado aos administradores. Clica em Guardar alterações no fundo do ecrã. A mensagem «Definições guardadas» confirma a operação.

Pode aparecer uma mensagem de aviso no topo do ecrã:

Mensagem	O que aconteceu
«o nome … está reservado pelo plugin»	O nome foi substituído pelo número do espaço. Escolhe outro nome.
«o nome … já está a ser usado pela cor …»	Dois espaços tinham o mesmo nome: o segundo recebeu o seu número em vez disso.
«… é também o slug de uma categoria de artigos»	O nome é aceite, mas pode entrar em conflito com a cor dessa categoria. Escolhe outro nome.

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

Perguntas frequentes¶

Mudei uma cor, mas o site não mudou. Verifica se clicaste mesmo em Guardar alterações e depois recarrega a página do site com Ctrl + F5 (no Mac: Cmd + Shift + R): o teu navegador talvez guardasse a versão antiga.

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

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. Preenche-o aqui e depois guarda.

Não consigo modificar as cores. É normal se fores editor: as cores fazem parte da identidade visual, e só os administradores as podem mudar. Podes sempre copiar as suas classes CSS 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»). Reserva-o para as exceções: estas cores não acompanham as mudanças da paleta.

Onde estas cores são escolhidas¶

Ecrã	Definição
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 da atividade
Uma página	Cor da página, no quadro à direita do ecrã de edição
Uma categoria de artigos	Cor da categoria

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