Esiste un modo semplice per regolare i colori del calendario visualizzato nel plugin del calendario? Abbiamo ricevuto alcune lamentele sull’accessibilità dello schema di colori grigio chiaro su bianco.
Non ci sono impostazioni che possono essere utilizzate per regolare i colori del calendario, ma i colori possono essere sovrascritti con un po’ di CSS. Sono tutt’altro che un esperto di CSS, ma qualcosa di simile è vicino a quello che stai cercando?
L’unica modifica che ho apportato è stata quella di scurire il bordo esterno e le linee utilizzate per dividere i giorni del calendario. Se è il tipo di modifica che stai cercando, posso trovarti i selettori CSS corretti. (La regolazione che ho fatto in quello screenshot è stata semplicemente fatta tramite gli strumenti CSS del mio browser.)
1 Mi Piace
Grazie! Sarebbe un grande miglioramento. Mi piacerebbe ricevere aiuto per trovare i selettori giusti.
Ottimo! Dovrai modificare il file CSS del tema del tuo sito, oppure aggiungere le modifiche a un componente del tema e quindi includere quel componente del tema in tutti i temi del tuo sito. Ho utilizzato l’approccio del componente del tema sul mio sito di prova. Ecco un tentativo di mostrare quel processo con screenshot:
Assicurati di aggiungere il tema (o i temi) del tuo sito all’input “Includi componente su questi temi”.
Una volta fatto ciò, fai clic sul pulsante “Modifica CSS/HTML” e aggiungi quanto segue alla scheda CSS comune dell’editor del tema:
.discourse-calendar-wrap {
border: 5px solid var(--primary);
}
.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
border-color: var(--primary);
}
Ciò che fa questa modifica è impostare i colori del bordo del calendario sul colore “primario” del tuo sito, lo stesso colore utilizzato per il testo del sito. Utilizzando la variabile --primary, la modifica funziona sia con schemi di colori chiari che scuri:
Invece di utilizzare var(--primary) per impostare il colore, puoi codificare a mano un colore esadecimale. Ad esempio #000000 per il nero:
.discourse-calendar-wrap {
border: 5px solid #000000;
}
Fammi sapere se noti effetti collaterali indesiderati da questa modifica. È possibile che la seconda regola selezioni alcuni elementi che preferiresti lasciare al vecchio colore più chiaro.
2 Mi Piace
Dolce! Grazie mille. Ci proverò domani.
2 Mi Piace