Kalenderformatierung?

Unterstützung
1

Gibt es eine einfache Möglichkeit, die Farben des im Kalender-Plugin angezeigten Kalenders anzupassen? Wir haben einige Beschwerden über die Zugänglichkeit des hellgrau-auf-weiß-Farbschemas.

2

Es gibt keine Einstellungen, mit denen die Farben des Kalenders angepasst werden können, aber die Farben können mit etwas CSS überschrieben werden. Ich bin weit davon entfernt, ein CSS-Experte zu sein, aber ist etwas wie das dem, wonach Sie suchen, nahe genug?

image
image1017×891 38.5 KB

Die einzige Änderung, die ich vorgenommen habe, ist die Abdunkelung des äußeren Rahmens und der Linien, die zur Unterteilung der Kalendertage verwendet werden. Wenn das die Art von Änderung ist, nach der Sie suchen, kann ich Ihnen die richtigen CSS-Selektoren heraussuchen. (Die Anpassung, die ich in diesem Screenshot vorgenommen habe, wurde nur über die CSS-Tools meines Browsers vorgenommen.)

1 „Gefällt mir“
3

Danke! Das wäre eine große Verbesserung. Ich hätte gerne Hilfe bei der Suche nach den richtigen Selektoren.

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.

2 „Gefällt mir“
5

Super! Vielen Dank. Ich werde es morgen versuchen.

2 „Gefällt mir“