Vai al contenuto

I colori del sito

I colori del sito non si scelgono liberamente, schermata per schermata: vengono tutti da un'unica tavolozza, definita una volta per tutte. Questa pagina spiega questo principio e le sue conseguenze. Il dettaglio della schermata è in Colori.

In un minuto

  • La tavolozza conta dieci colori, sistemati in posti numerati da 1 a 10. Si imposta in Configurazione > Colori.
  • Ovunque altrove (un'attività, una pagina, una categoria di articoli), si sceglie uno di questi colori da un elenco. Non si inserisce mai un codice di colore.
  • Il sito memorizza il numero del posto scelto, non il colore stesso.

Da qui la conseguenza principale: cambiare un colore della tavolozza lo cambia ovunque in una volta sola. Se l'arancione del centro diventa un arancione più tenue, tutte le attività, le pagine e i blocchi che lo usano si adeguano, senza doverli riprendere uno per uno.

Chi può modificare i colori

I colori formano l'identità grafica del sito: solo gli amministratori possono modificarli. Gli editori aprono la stessa schermata in sola lettura, per copiarvi le classi CSS dei colori (vedi qui sotto).

Se ti sembra che un colore debba cambiare, rivolgiti all'amministratore del sito.

Dove serve ogni colore

Un colore della tavolozza può servire in quattro punti.

Le attività. Ogni attività riceve un colore. Le sue sessioni prendono questo colore nel calendario pubblico, nei blocchi «Prossimi eventi» e nella pagina dell'evento. Un evento può, in via eccezionale, ricevere un colore tutto suo (vedi qui sotto).

Le pagine e le categorie di articoli. Una pagina può ricevere un colore proprio; altrimenti prende il colore predefinito del sito. Lo stesso vale per una categoria di articoli.

I ruoli. Alcune parti del sito hanno un colore assegnato, scelto nella tavolozza:

Ruolo Che cosa colora
Colore predefinito Il colore dominante del sito: intestazione, piè di pagina, menu, pagine senza un colore proprio.
Colore dei pulsanti del calendario I pulsanti di navigazione del calendario pubblico.
Colore delle barre di scorrimento Le barre di scorrimento della pagina e delle fasce che scorrono.

I sottomenu non hanno un colore proprio: riprendono il colore predefinito, un po' schiarito. Restano quindi in armonia con il menu quando questo cambia.

I blocchi delle pagine Avada. Un blocco di una pagina (una sezione, un testo, un titolo…) può prendere un colore della tavolozza (vedi qui sotto).

Colorare un blocco di una pagina

Nelle pagine costruite con Avada, si colora un blocco aggiungendogli una classe CSS: una piccola parola chiave, incollata nel campo CSS Class delle impostazioni del blocco. Ogni colore della tavolozza ha due classi, da copiare dalla schermata Colori:

  • background-color- seguito dal nome del colore, per colorare lo sfondo del blocco (background-color-orange);
  • text-color- seguito dal nome del colore, per colorare il suo testo (text-color-orange).

La classe text-white scrive il testo in bianco, su uno sfondo colorato.

La procedura e alcuni esempi sono in Pulsanti Sfondo e Testo.

Il nome di un colore conta

Le classi sono costruite a partire dal nome del colore. Se orange viene rinominato amber, la classe background-color-orange non esiste più, e i blocchi che la usavano perdono il loro colore. Cambiare la tinta di un posto, invece, non rompe nulla. Vedi Nome.

Le eccezioni

Due impostazioni accettano un colore fuori dalla tavolozza:

  • una pagina: «Colore della pagina» > «Scegli un altro colore»;
  • un evento: «Colore personalizzato», quando deve distinguersi dalla sua attività.

Questi colori non seguono i cambiamenti della tavolozza. Riservali alle vere eccezioni.

Quando il cambiamento si vede

Appena un amministratore salva una modifica dei colori, la cache del sito viene svuotata: i visitatori vedono i nuovi colori alla visita successiva. Se il tuo browser mostra ancora quelli vecchi, ricarica la pagina con Ctrl + F5 (su Mac: Cmd + Maiusc + R).

Per saperne di più