Colori¶

Dove: menu Configurazione > Colori. Chi: gli amministratori modificano i colori; gli editori li consultano e copiano le loro classi CSS.

È qui che si definiscono i colori dell'identità grafica del sito, una volta per tutte. Nessun'altra schermata permette di inserire un colore liberamente: le attività, gli eventi, le pagine e le categorie degli articoli scelgono uno dei colori definiti qui.

Il vantaggio: modificare un colore in questa schermata lo modifica ovunque allo stesso tempo. Se l'arancione del sito diventa un arancione più tenue, tutte le attività, le pagine e i blocchi che lo usano cambiano in un colpo, senza doverli riprendere uno per uno.

Perché solo gli amministratori possono modificare i colori

Questi colori formano l'identità grafica del sito. Sono stati studiati con cura in anticipo, per armonizzarsi tra loro e dare al sito la sua identità. Poiché cambiarne uno modifica l'aspetto di tutto il sito in un colpo, solo gli amministratori possono modificarli.

Gli editori vedono la stessa schermata in sola lettura, per copiarvi le classi CSS dei colori (vedi Che cosa vedono gli editori). Se ti sembra che un colore debba cambiare, rivolgiti all'amministratore del sito.

1 Tavolozza: i colori del sito. 2 Ruoli dei colori: quale colore della tavolozza colora quale parte del sito. 3 Colore dei sottomenu: calcolato a partire dal colore predefinito. 4 Classi CSS francesi: impostazione di compatibilità per i siti meno recenti. 5 Salva le modifiche: nulla viene preso in conto prima di questo clic.

Capire in un minuto¶

flowchart LR
    P["Tavolozza<br>10 colori"] --> A[Attività]
    P --> E[Eventi]
    P --> G[Pagine]
    P --> C[Categorie degli articoli]
    P --> R["Ruoli<br>intestazione, piè di pagina,<br>menu, calendario…"]
    P --> K["Classi CSS<br>blocchi delle pagine Avada"]

La tavolozza conta 10 posti, numerati da 1 a 10. Ognuno riceve un colore e un nome.
In tutti gli altri punti, si sceglie un posto in un elenco a discesa, dove ogni colore compare con il suo numero e il suo nome (per esempio 2 · orange-light).
Il sito memorizza il numero del posto, non il colore stesso. Per questo cambiare il colore di un posto si ripercuote ovunque.

Che cosa vedono gli editori¶

Un editore apre la stessa schermata, in sola lettura:

un messaggio ricorda che i colori fanno parte dell'identità grafica;
ogni colore usato compare con il suo numero, il suo nome, un'anteprima e il suo codice, seguiti dai pulsanti Sfondo e Testo per copiare la sua classe CSS;
il pulsante di copia di Testo bianco resta disponibile;
i ruoli e il colore dei sottomenu sono mostrati, senza poter essere cambiati;
non c'è il pulsante Salva le modifiche.

Il resto di questa pagina descrive la schermata così come la vedono gli amministratori.

La tavolozza¶

1 Numero del posto. 2 Nome. 3 Colore. 4 Pulsanti di copia delle classi CSS.

Un posto senza colore non viene usato: non compare in nessun elenco di scelta. Non sei obbligato a riempirli tutti e dieci.

Numero¶

Il numero non cambia mai. È quello che memorizzano le attività, le pagine e le altre impostazioni: puoi quindi modificare il colore o il nome di un posto senza che perdano la loro impostazione.

Nome¶

Il nome serve a creare le classi CSS del colore (vedi Pulsanti Sfondo e Testo) e lo identifica negli elenchi di scelta.

Scrivilo in inglese: è l'uso nel CSS, e anche le classi del plugin lo sono (background-color-…, text-color-…). Per esempio orange, orange-light, dark-blue.
Usa lettere minuscole, cifre e trattini, senza accenti né spazi. Un nome inserito in altro modo viene convertito al salvataggio («Dark Blue» diventa dark-blue).
Se resta vuoto, il nome viene sostituito dal numero del posto.
Due posti non possono avere lo stesso nome.
Alcuni nomi sono riservati dal plugin e rifiutati: page, page-light, page-clair, default, defaut.
Evita di riprendere l'identificativo di una categoria di articoli (il suo «slug», visibile in Articoli > Categorie): i due si contraddirebbero. Un messaggio ti avvisa se è il caso.

Consiglio: dai a ogni colore il nome della sua tinta

orange, blue, green… e aggiungi -light per la sua versione chiara: orange-light. Se un giorno l'identità grafica passa a un arancione leggermente diverso, cambia il colore, non il nome.

Rinominare un colore rompe le pagine che lo usano

Se orange diventa amber, la classe background-color-orange non esiste più, e i blocchi delle pagine che la usavano perdono il loro colore. La ridenominazione viene memorizzata: la schermata Strumenti > Migrazione dei colori del sito propone poi di aggiornare tutte queste pagine. Rinomina un colore solo in caso di reale necessità.

Colore¶

Fai clic sul pulsante Seleziona colore per aprire il selettore.

1 Scegli il colore nel quadrato. 2 Regola la sua sfumatura, più chiara o più scura, con la barra di destra. 3 Oppure incolla il codice del colore fornito dall'identità grafica: un # seguito da sei caratteri, per esempio #e67e22. 4 Cancella svuota il posto.

Non svuotare un posto ancora in uso

Tutto ciò che usava questo colore lo perde, ma non allo stesso modo:

le pagine e i ruoli riprendono il colore predefinito;
i blocchi colorati con i suoi pulsanti Sfondo o Testo non sono più colorati;
le attività mantengono il loro vecchio colore nel calendario e nei blocchi «Prossimi eventi», ma la loro scelta di colore appare vuota nella loro schermata: bisognerà sceglierne un altro alla prossima modifica.

Prima di svuotare un posto, scegli un altro colore ovunque sia usato.

Pulsanti Sfondo e Testo¶

Questi pulsanti servono a colorare un blocco in una pagina costruita con Avada (container, colonna, blocco di testo, titolo…). Compaiono solo sui posti che hanno un colore.

Copiano una classe CSS: una piccola parola chiave che si aggiunge a un blocco per cambiarne l'aspetto, qui per dargli un colore della tavolozza.

Fai clic su Sfondo per colorare lo sfondo del blocco, oppure su Testo per colorarne il testo. La classe viene copiata: il pulsante mostra ✓ per un secondo.
Nel builder di Avada, apri le impostazioni del blocco da colorare, scheda General. Per esempio un container (Container), cioè una sezione della pagina, per colorarne lo sfondo; oppure un blocco di testo (Text Block), per colorarne il testo.
Incolla la classe nel campo CSS Class, poi salva la pagina. Per metterne più di una, separale con uno spazio.

Pulsante	Classe copiata	Effetto
Sfondo	`background-color-orange`	sfondo del blocco nel colore `orange`
Testo	`text-color-orange`	testo del blocco nel colore `orange`

Scrivere in bianco. Su uno sfondo colorato, aggiungi la classe text-white: tutto il testo del blocco diventa bianco. Non fa parte della tavolozza (non è un colore a scelta, solo «bianco»): ha il suo pulsante di copia, subito sotto la tavolozza — vedi Testo bianco.

Schiarire uno sfondo. Aggiungi una seconda classe, separata da uno spazio: background-opacity-XX, dove XX è una percentuale. Per esempio, background-color-orange background-opacity-40 dà uno sfondo arancione al 40%.

Esempi

Blocco Avada	Nel campo CSS Class	Risultato
Container (una sezione della pagina)	`background-color-blue text-white`	sezione su sfondo blu, testo in bianco
Container	`background-color-orange background-opacity-20`	sezione su sfondo arancione molto chiaro
Blocco di testo	`text-color-orange`	testo in arancione

Vecchi nomi

Sui siti meno recenti, potresti trovare texte-blanc in alcune pagine: è il vecchio nome di text-white, e funziona ancora. Per una nuova pagina, usa text-white.

Nuovo nome non ancora salvato

Se hai appena inserito o modificato un nome, i pulsanti copiano già la nuova classe, ma questa funzionerà sul sito solo dopo Salva le modifiche.

Testo bianco¶

Subito sotto la tavolozza, un pulsante Copia dà accesso alla classe text-white: rende bianco il testo di un blocco, per scrivere su uno sfondo colorato. Come per i pulsanti Sfondo e Testo, basta fare clic, poi incollare la classe nel campo CSS Class del blocco in Avada (vedi Pulsanti Sfondo e Testo).

Questo campo è puramente pratico: text-white non fa parte della tavolozza e non viene salvato, quindi il pulsante funziona sia per gli amministratori sia per gli editori.

I ruoli dei colori¶

Un ruolo assegna un colore della tavolozza a una parte precisa del sito. Ogni elenco propone solo i posti che hanno un colore, e assume il colore dell'opzione scelta.

1 Colore predefinito. 2 Colore dei pulsanti del calendario. 3 Colore delle barre di scorrimento. 4 Colore dei sottomenu. 5 Classi CSS francesi.

Colore predefinito¶

Il colore principale del sito: è lui che ne determina il colore dominante. Colora:

l'intestazione e il piè di pagina di tutte le pagine;
il menu del sito (il menu a scorrimento);
le pagine che non hanno un colore proprio (impostazione «Colore della pagina» di ogni pagina);
i pulsanti dei moduli e diversi elementi dell'impaginazione;
i blocchi «Prossimi eventi» e le pagine degli eventi, quando l'attività non ha un colore.

Ha anche i suoi pulsanti Sfondo e Testo, che copiano background-color-default e text-color-default: un blocco colorato così seguirà il colore predefinito anche se un giorno lo cambi.

Colore dei pulsanti del calendario¶

I pulsanti di navigazione del calendario: periodo precedente, periodo successivo e ritorno al periodo in corso. Al passaggio del mouse, un pulsante si schiarisce; al clic, si scurisce. Il pulsante di ritorno resta più chiaro finché si è già sul periodo in corso.

La sua etichetta segue ciò che è mostrato: «oggi» nella vista per mese, «questa settimana» nella vista per settimana — quella dei cellulari.

Colore delle barre di scorrimento¶

La parte mobile delle barre di scorrimento: quella della pagina, e quelle delle fasce che scorrono in orizzontale (prossimi eventi, ritratti degli insegnanti).

Note

Firefox non applica questo colore e mantiene le sue barre di scorrimento abituali.

Colore dei sottomenu¶

I sottomenu del menu a scorrimento non hanno un colore proprio: riprendono il colore predefinito, schiarito del numero di punti di luminosità indicato. Menu e sottomenu restano così in armonia, anche quando il colore predefinito cambia.

L'anteprima mostra il colore del menu (in alto) e quello dei sottomenu (in basso), così come sono salvati.
0: i sottomenu hanno esattamente il colore del menu, non si distinguono più.
8 (valore predefinito): uno scarto discreto ma visibile.
100: i sottomenu diventano bianchi.

La tinta viene conservata: il risultato è lo stesso colore più chiaro, non un colore sbiadito.

A sinistra, il menu, nel colore predefinito. A destra, un sottomenu, schiarito.

Classi CSS francesi¶

Prima che il plugin passasse all'inglese, le classi di colore avevano nomi francesi: fond-couleur-…, texte-couleur-…, fond-opacite-….

Impostazione tecnica

Modificala solo con l'accordo del webmaster del sito.

Lascia la casella selezionata se alcune pagine del tuo sito usano ancora queste classi. La schermata Strumenti > Migrazione dei colori del sito elenca tutte le classi trovate nelle pagine.
Deselezionala su un sito nuovo, o quando tutte le pagine sono passate alle classi inglesi: ogni pagina del sito sarà un po' più leggera.

Salvare¶

Riservato agli amministratori. Fai clic su Salva le modifiche in fondo alla schermata. Il messaggio «Impostazioni salvate.» conferma l'operazione.

Un messaggio di avviso può comparire in cima alla schermata:

Messaggio	Che cosa è successo
«il nome … è riservato dal plugin»	Il nome è stato sostituito dal numero del posto. Scegli un altro nome.
«il nome … è già usato dal colore …»	Due posti avevano lo stesso nome: il secondo ha ricevuto il suo numero al suo posto.
«… è anche lo slug di una categoria di articoli»	Il nome è accettato, ma rischia di entrare in conflitto con il colore di questa categoria. Scegli un altro nome.

Appena un colore cambia, la cache del sito viene svuotata automaticamente: i visitatori vedono i nuovi colori alla loro prossima visita.

Domande frequenti¶

Ho cambiato un colore, ma il sito non è cambiato. Verifica di aver fatto clic su Salva le modifiche, poi ricarica la pagina del sito con Ctrl + F5 (su Mac: Cmd + Maiusc + R): il tuo browser forse conservava la vecchia versione.

Un blocco di una pagina ha perso il suo colore di sfondo. La sua classe CSS non corrisponde più a nessun colore: posto rinominato o svuotato, oppure vecchia classe di attività (le attività non producono più classi). La schermata Strumenti > Migrazione dei colori del sito individua queste classi e le sostituisce.

Il colore che cerco non compare nell'elenco di un'attività o di una pagina. Il posto non ha un colore nella tavolozza. Riempilo qui, poi salva.

Non riesco a modificare i colori. È normale se sei editore: i colori fanno parte dell'identità grafica, e solo gli amministratori possono cambiarli. Puoi sempre copiare le loro classi CSS con i pulsanti Sfondo e Testo.

Posso aggiungere un undicesimo colore? No, la tavolozza conta sempre dieci posti.

Posso usare un colore fuori dalla tavolozza? Solo in due casi: una pagina («Colore della pagina» > «Scegli un altro colore») e un evento («Colore personalizzato»). Riservalo alle eccezioni: questi colori non seguiranno i cambiamenti della tavolozza.

Dove si scelgono questi colori¶

Schermata	Impostazione
Un'attività	Colore dell'attività nell'agenda e nelle pagine dei corsi e degli eventi
Un evento	Colore di sostituzione, solo se deve essere diverso da quello dell'attività
Una pagina	Colore della pagina, nel riquadro a destra della schermata di modifica
Una categoria di articoli	Colore della categoria

Per la logica d'insieme, vedi I colori del sito.