Kalenderformatierung?

Unterstützung
4

Großartig! Sie müssen entweder die CSS-Datei Ihres Website-Themes bearbeiten oder die Änderungen zu einer Theme-Komponente hinzufügen und diese Theme-Komponente dann in allen Themes Ihrer Website einbinden. Ich habe den Ansatz mit Theme-Komponenten auf meiner Testseite verwendet. Hier ist ein Versuch, diesen Prozess mit Screenshots zu zeigen:

image
image1056×604 56.9 KB

image
image823×397 25.3 KB

image
image1073×753 62.5 KB

Stellen Sie sicher, dass Sie das Theme (oder die Themes) Ihrer Website in das Eingabefeld “Komponente in diesen Themes einbinden” eingeben.

Klicken Sie anschließend auf die Schaltfläche “CSS/HTML bearbeiten” und fügen Sie Folgendes zum Tab “Common CSS” des Theme-Editors hinzu:

.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);
}

Diese Änderung setzt die Randfarben des Kalenders auf die “primäre” Farbe Ihrer Website – dieselbe Farbe, die für den Text der Website verwendet wird. Durch die Verwendung der Variablen --primary funktioniert die Änderung sowohl mit hellen als auch mit dunklen Farbschemata:

image
image989×913 36.2 KB

image
image981×921 37.2 KB

Anstatt var(--primary) zu verwenden, um die Farbe festzulegen, können Sie eine Hex-Farbe fest codieren. Zum Beispiel #000000 für Schwarz:

.discourse-calendar-wrap {
    border: 5px solid #000000;
}

Lassen Sie mich wissen, ob Sie unerwünschte Nebenwirkungen dieser Änderung feststellen. Es ist möglich, dass die zweite Regel einige Elemente auswählt, die Sie lieber in der alten, helleren Farbe belassen möchten.