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.