Das Standard-Kalender-Widget des Xfce-Desktops ist funktional, aber optisch nicht jedermanns Geschmack. Mit wenigen Schritten lässt sich das Design deutlich aufwerten – alles, was dafür benötigt wird, ist eine kleine Anpassung per CSS.
Xfce-Desktop: Original Kalender-Widget
Schritt 1: Texteditor starten
Öffnen sie einen einfachen Texteditor (z.B. Mousepad, Gedit oder Nano). Es wird lediglich eine reine Textdatei ohne Formatierungen erstellt bzw. bearbeitet.
Schritt 2: CSS-Code einfügen
Kopieren Sie folgenden CSS-Code in den Editor:
/* =======================================
XFCE Kalender-Widget - eckig & kontrastreicher
======================================= */
/* Grundstruktur */
calendar,
GtkCalendar {
font-size: 18pt;
background-color: #f8f9fa;
color: #4a4f56;
border-radius: 0; /* Ecken entfernt für klaren Look */
padding: 10px 12px;
transition: background-color 0.3s ease, color 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
border: 1px solid #dcdfe2;
}
/* Auswahlzustand */
calendar:selected,
GtkCalendar:selected {
background-color: #64baff;
color: #ffffff;
font-weight: 600;
border-radius: 0;
}
/* Wochentage (Kopfzeile) */
calendar.highlight,
GtkCalendar.highlight {
background-color: #d2d5d9; /* dunkleres, neutralgraues Headerfeld */
color: #40444a; /* satteres Dunkelgrau für Text */
font-weight: 600;
border-radius: 0;
padding: 4px 0;
border-bottom: 1px solid #bcbfc2;
}
/* Kalenderwochen-Spalte */
calendar.week-number,
GtkCalendar.week-number {
background-color: #d8dbde; /* etwas dunkler für klare Abgrenzung */
color: #3c4045;
font-weight: 600;
padding: 2px 8px;
border-radius: 0;
}
/* Aktuelles Datum */
calendar.today,
GtkCalendar.today {
background-color: #d7e8f6;
color: #2a6fb8;
border-radius: 0;
font-weight: 600;
box-shadow: 0 0 10px rgba(100, 186, 255, 0.25);
animation: pulse-today 4s ease-in-out infinite;
transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
/* Sanftes Pulsieren des heutigen Datums */
@keyframes pulse-today {
0%, 100% {
box-shadow: 0 0 0px rgba(100, 186, 255, 0.2);
background-color: #d7e8f6;
}
50% {
box-shadow: 0 0 16px rgba(100, 186, 255, 0.4);
background-color: #e3f0fa;
}
}
/* Kalendergitter */
calendar,
GtkCalendar box,
GtkCalendar grid {
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.9),
rgba(247, 248, 249, 0.9)
);
border-radius: 0;
}
/* Header (Monat/Jahr) */
calendar.header,
GtkCalendar.header {
color: #35393d;
font-weight: 700;
text-shadow: none;
}
/* Tage-Buttons */
calendar button,
GtkCalendar button {
border-radius: 0;
padding: 4px 6px;
color: #4a4f56;
background: transparent;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Hover-Effekt */
calendar button:hover,
GtkCalendar button:hover {
background-color: rgba(100, 186, 255, 0.15);
color: #3178c6;
}
/* Optional: Rahmen für klare Abgrenzung auf dunklem oder hellem Hintergrund */
calendar,
GtkCalendar {
box-shadow: none;
border: 1px solid #cfd3d7;
}
Schritt 3: CSS-Datei abspeichern
Speichern sie die Datei als gtk.css im versteckten Ordner .config/gtk-3.0/ unter Ihrem Home-Verzeichnis (/home/USERNAME/.config/gtk-3.0/gtk.css) ab. Falls der Ordner noch nicht existiert, erstellen sie ihn.
Schritt 4: Xfce-Panel neu starten
Damit die Änderungen sofort übernommen werden, starten Sie das Xfce-Panel neu. Am einfachsten geht das mit dem Befehl:
xfce4-panel -rAlternativ ab- und wieder anmelden.
Was bewirken diese Änderungen
– Ein farblich neutraler Hintergrund schafft ein weicheres und moderneres Erscheinungsbild.
– Das ausgewählte Datum hebt sich klar ab.
– Unterschiedliche Grautöne für Kalenderwochen und Wochentage schaffen visuelle Hierarchie.
– Leichte Hover-Effekte auf den Tagen erhöhen die Interaktivität.
– Genügend Innenabstand (Padding) sorgt für Luftigkeit und bessere Übersichtlichkeit.
Das Kalender-Widget zeigt nun größere Schrift und ist optisch klarer hervorgehoben. Sollte das neue Design nicht sofort aktiv sein, hilft eine Überprüfung der Pfade oder des Dateinamen.
Xfce-Desktop: Angepasstes Kalender-Widget
Anmerkung
Sollte die gtk.css-Datei im beschriebenen Ordner bereits bestehen, fügen Sie den o.g. CSS-Code am Ende der Textdatei ein, speichern es einfach und fahren laut Anleitung fort.
Fazit
Mit diesen wenigen Schritten lässt sich das Xfce Kalender-Widget individuell anpassen und deutlich übersichtlicher gestalten. Perfekt für alle, die auf dem Xfce-Desktop ein modernes und klares Erscheinungsbild bevorzugen.
19
Eine Reaktion
Danke für diese tolle Anleitung. Das war mir schon lange ein Dorn im Auge. Bei meiner bisherigen Suche bin ich auf das gestoßen: https://www.pling.com/s/XFCE/p/2303779
Das sieht zwar gut aus, funktioniert aber hinten und vorne nicht.
Besten Dank an @zebolon nochmal für diesen Tipp.