Temi e aspetto

I 6 temi Éclair cambiano l’aspetto del tuo sito con un clic: colore, font, intestazione e presentazione degli elenchi. Li provi sul tuo sito vero grazie all’anteprima in tempo reale, su computer o su smartphone, e non si pubblica nulla finché non salvi. I tuoi contenuti, la velocità e il posizionamento, invece, restano com’erano.

Quali sono i 6 temi Éclair?

I temi Éclair sono inclusi nel CMS dalla versione 1.3.0. Ognuno ha il suo carattere e il suo pubblico:

Tutti i temi mostrano gli stessi blocchi, il blog e il negozio leggero: scegli quello che somiglia al tuo mestiere, non quello che «contiene» una funzione.

Come cambiare tema?

Bastano cinque passaggi, anteprima compresa:

1. Apri Impostazioni › Aspetto.
2. In Tema, clicca sulla card che ti piace. Il suo colore, i suoi font, la sua intestazione e la presentazione degli elenchi si applicano subito ai campi qui sotto.
3. Sotto Anteprima in tempo reale, scegli la pagina mostrata (Home, Blog, Un articolo, Il negozio o Un prodotto), poi passa da Computer a Smartphone. Puoi cliccare nell’anteprima: i link restano al suo interno.
4. Regola quello che vuoi (colore principale, font, intestazione, elenchi, modalità scura): l’anteprima segue ogni modifica.
5. Clicca su Salva. La cache delle pagine viene svuotata automaticamente: il tuo sito cambia subito.

Cosa imposta ogni tema quando lo scegli?

Ecco le impostazioni consigliate che ogni tema applica, tutte modificabili in seguito:

Quali altre impostazioni dell’aspetto puoi modificare?

Sempre in Impostazioni › Aspetto, sotto l’anteprima:

Per il colore principale, Éclair punta a un contrasto di almeno 4,5:1 tra i link e lo sfondo, la soglia del criterio WCAG 1.4.3 per il testo normale. Se il tuo colore non basta, i link usano una versione più scura (più chiara in modalità scura), e il testo dei pulsanti diventa bianco o nero, a seconda di ciò che si legge meglio.

Perché un tema non rallenta il tuo sito?

Perché ogni tema è solo un foglio di stile da 1,5 a 3 KB, aggiunto a quello di base. Il tema Éclair, invece, non aggiunge nulla: è lo stile di base.

• L’HTML non cambia da un tema all’altro: velocità, accessibilità, dati strutturati e posizionamento restano identici.
• Solo il tema attivo viene inserito nella pagina, insieme al resto del CSS: nessun file in più da scaricare.
• La modalità scura automatica funziona con ognuno dei 6 temi.
• Gli stili del negozio vengono inseriti solo quando è aperto: un sito vetrina non li carica mai.

Come aggiungere il tuo CSS?

Per andare oltre il tema (il colore di un pulsante, le spaziature, lo stile di un blocco), incolla le tue regole in Impostazioni › Aspetto › CSS personalizzato, poi salva.

• Hanno la precedenza sul tema: vengono aggiunte dopo di esso in ogni pagina.
• Sopravvivono agli aggiornamenti da Éclair 1.5.0: sono salvate insieme ai tuoi dati, in data/, che l’aggiornamento non tocca.
• I delimitatori della modalità scura funzionano: le regole comprese tra /*dark*/ e /*/dark*/ scompaiono quando la modalità scura è impostata su «Sempre chiaro».
• Per sicurezza, il carattere <, le regole @import e i caratteri di controllo vengono rimossi, e il campo accetta al massimo 64 KB.

Per esempio, per pulsanti con gli angoli leggermente arrotondati e un piè di pagina più scuro in modalità scura:

.btn { border-radius: 6px; }

/*dark*/@media (prefers-color-scheme: dark) { .site-footer { background: #0d0d12; } }/*/dark*/

Cosa non fanno i temi?

• Non cambiano la struttura delle pagine. Per spostare un elemento o aggiungere un’area, bisogna modificare i template PHP di app/theme/, come spiega la pagina Per sviluppatori. Un aggiornamento li sostituisce: tieni una copia dei tuoi file.
• Non c’è un catalogo di temi da scaricare e non ci sono estensioni: i 6 temi sono inclusi in Éclair. L’assenza di estensioni è una scelta, per la velocità e per la sicurezza.
• Niente web font nelle impostazioni: solo font di sistema, già presenti sul dispositivo del visitatore.
• Il CSS personalizzato non importa nulla: senza @import, non può caricare un altro foglio di stile.

Cosa fare se l’aspetto non cambia?

Le istruzioni originali sono anche nella guida ufficiale di Éclair, e il dettaglio delle versioni dalla 1.3.0 alla 1.5.0 nel registro delle versioni.