Excellent ! Vous devrez modifier le fichier CSS de votre thème ou ajouter les modifications à un composant de thème, puis inclure ce composant de thème dans tous les thèmes de votre site. J’ai utilisé l’approche du composant de thème sur mon site de test. Voici une tentative de montrer ce processus avec des captures d’écran :
Assurez-vous d’ajouter le thème (ou les thèmes) de votre site à l’entrée « Inclure le composant sur ces thèmes ».
Une fois que vous avez fait cela, cliquez sur le bouton « Modifier le CSS/HTML » et ajoutez ce qui suit dans l’onglet CSS commun de l’éditeur de thème :
.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);
}
Ce changement définit les couleurs des bordures du calendrier sur la couleur « primaire » de votre site, la même couleur que celle utilisée pour le texte du site. En utilisant la variable --primary, le changement fonctionne avec les thèmes clairs et sombres :
Au lieu d’utiliser var(--primary) pour définir la couleur, vous pouvez coder en dur une couleur hexadécimale. Par exemple #000000 pour le noir :
.discourse-calendar-wrap {
border: 5px solid #000000;
}
Faites-moi savoir si vous constatez des effets indésirables de ce changement. Il est possible que la deuxième règle sélectionne certains éléments que vous préféreriez laisser à l’ancienne couleur plus claire.