{"id":21458,"date":"2025-11-16T21:59:36","date_gmt":"2025-11-16T20:59:36","guid":{"rendered":"https:\/\/linux-bibel.at\/?p=21458"},"modified":"2025-12-28T10:25:57","modified_gmt":"2025-12-28T09:25:57","slug":"xfce-kalender-widget-mit-css-aufpeppen","status":"publish","type":"post","link":"https:\/\/linux-bibel.at\/index.php\/2025\/11\/16\/xfce-kalender-widget-mit-css-aufpeppen\/","title":{"rendered":"Xfce Kalender-Widget mit CSS aufpeppen"},"content":{"rendered":"\n

Das Standard-Kalender-Widget des Xfce<\/a>-Desktop<\/a>s 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.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Xfce<\/a>-Desktop<\/a>: Original Kalender-Widget<\/p>\n\n\n\n

Schritt 1: Texteditor<\/a> starten<\/p>\n\n\n\n

Öffnen sie einen einfachen Texteditor<\/a> (z.B. Mousepad, Gedit oder Nano). Es wird lediglich eine reine Textdatei<\/a> ohne Formatierungen erstellt bzw. bearbeitet.<\/p>\n\n\n\n

Schritt 2: CSS-Code einfügen<\/p>\n\n\n\n

Kopieren Sie folgenden CSS-Code in den Editor<\/a>:<\/p>\n\n\n\n

\/* =======================================\n   XFCE Kalender-Widget - eckig & kontrastreicher\n   ======================================= *\/\n\n\/* Grundstruktur *\/\ncalendar,\nGtkCalendar {\n    font-size: 18pt;\n    background-color: #f8f9fa;\n    color: #4a4f56;\n    border-radius: 0; \/* Ecken entfernt f\u00fcr klaren Look *\/\n    padding: 10px 12px;\n    transition: background-color 0.3s ease, color 0.3s ease;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    border: 1px solid #dcdfe2;\n}\n\n\/* Auswahlzustand *\/\ncalendar:selected,\nGtkCalendar:selected {\n    background-color: #64baff;\n    color: #ffffff;\n    font-weight: 600;\n    border-radius: 0;\n}\n\n\/* Wochentage (Kopfzeile) *\/\ncalendar.highlight,\nGtkCalendar.highlight {\n    background-color: #d2d5d9;   \/* dunkleres, neutralgraues Headerfeld *\/\n    color: #40444a;              \/* satteres Dunkelgrau f\u00fcr Text *\/\n    font-weight: 600;\n    border-radius: 0;\n    padding: 4px 0;\n    border-bottom: 1px solid #bcbfc2;\n}\n\n\/* Kalenderwochen-Spalte *\/\ncalendar.week-number,\nGtkCalendar.week-number {\n    background-color: #d8dbde;   \/* etwas dunkler f\u00fcr klare Abgrenzung *\/\n    color: #3c4045;\n    font-weight: 600;\n    padding: 2px 8px;\n    border-radius: 0;\n}\n\n\/* Aktuelles Datum *\/\ncalendar.today,\nGtkCalendar.today {\n    background-color: #d7e8f6;\n    color: #2a6fb8;\n    border-radius: 0;\n    font-weight: 600;\n    box-shadow: 0 0 10px rgba(100, 186, 255, 0.25);\n    animation: pulse-today 4s ease-in-out infinite;\n    transition: background-color 0.4s ease, box-shadow 0.4s ease;\n}\n\n\/* Sanftes Pulsieren des heutigen Datums *\/\n@keyframes pulse-today {\n    0%, 100% {\n        box-shadow: 0 0 0px rgba(100, 186, 255, 0.2);\n        background-color: #d7e8f6;\n    }\n    50% {\n        box-shadow: 0 0 16px rgba(100, 186, 255, 0.4);\n        background-color: #e3f0fa;\n    }\n}\n\n\/* Kalendergitter *\/\ncalendar,\nGtkCalendar box,\nGtkCalendar grid {\n    background-image: linear-gradient(\n        to bottom,\n        rgba(255, 255, 255, 0.9),\n        rgba(247, 248, 249, 0.9)\n    );\n    border-radius: 0;\n}\n\n\/* Header (Monat\/Jahr) *\/\ncalendar.header,\nGtkCalendar.header {\n    color: #35393d;\n    font-weight: 700;\n    text-shadow: none;\n}\n\n\/* Tage-Buttons *\/\ncalendar button,\nGtkCalendar button {\n    border-radius: 0;\n    padding: 4px 6px;\n    color: #4a4f56;\n    background: transparent;\n    transition: background-color 0.2s ease, color 0.2s ease;\n}\n\n\/* Hover-Effekt *\/\ncalendar button:hover,\nGtkCalendar button:hover {\n    background-color: rgba(100, 186, 255, 0.15);\n    color: #3178c6;\n}\n\n\/* Optional: Rahmen f\u00fcr klare Abgrenzung auf dunklem oder hellem Hintergrund *\/\ncalendar,\nGtkCalendar {\n    box-shadow: none;\n    border: 1px solid #cfd3d7;\n}\n<\/code><\/pre>\n\n\n\n
Schritt 3: CSS-Datei<\/a> abspeichern<\/a><\/p>\n\n\n\n
Speichern<\/a> sie die Datei<\/a> als gtk.css<\/strong> im versteckten Ordner .config\/gtk-3.0\/<\/strong> unter Ihrem Home<\/a>-Verzeichnis<\/a> (\/home<\/a>\/USERNAME\/.config\/gtk-3.0\/gtk.css) ab. Falls der Ordner noch nicht existiert, erstellen sie ihn.<\/p>\n\n\n\n
Schritt 4: Xfce<\/a>-Panel neu starten<\/p>\n\n\n\n
Damit die Änderungen sofort übernommen werden, starten Sie das Xfce<\/a>-Panel neu. Am einfachsten geht das mit dem Befehl<\/a>:<\/p>\n\n\n\n
xfce4-panel -r<\/code><\/pre>\n\n\n\n
Alternativ ab- und wieder anmelden.<\/p>\n\n\n\n
Was bewirken diese Änderungen<\/p>\n\n\n\n
– 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.<\/p>\n\n\n\n
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 Datei<\/a>namen.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Xfce<\/a>-Desktop<\/a>: Angepasstes Kalender-Widget<\/p>\n\n\n\n
Anmerkung<\/strong><\/p>\n\n\n\n
Sollte die gtk.css-Datei<\/a> im beschriebenen Ordner bereits bestehen, fügen Sie den o.g. CSS-Code am Ende der Textdatei<\/a> ein, speichern<\/a> es einfach und fahren laut Anleitung fort.<\/p>\n\n\n\n
Fazit<\/p>\n\n\n\n
Mit diesen wenigen Schritten lässt sich das Xfce<\/a> Kalender-Widget individuell anpassen und deutlich übersichtlicher gestalten. Perfekt für alle, die auf dem Xfce<\/a>-Desktop<\/a> ein modernes und klares Erscheinungsbild bevorzugen.<\/p>\n
\r\n    
\r\n    \r\n                            \"Gef\u00e4llt\r\n            <\/a>\r\n    20    <\/span>\r\n<\/div>
\r\n    \r\n                            \"Gef\u00e4llt\r\n            <\/a>\r\n    <\/span>\r\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"
Das Standard-Kalender-Widget des Xfce-Desktops ist funktional, aber optisch nicht jedermanns Geschmack. Mit wenigen Schritten l\u00e4sst sich das Design deutlich aufwerten – alles, was daf\u00fcr ben\u00f6tigt wird, ist eine kleine Anpassung per CSS. Xfce-Desktop: Original Kalender-Widget Schritt 1: Texteditor starten \u00d6ffnen sie einen einfachen Texteditor (z.B. Mousepad, Gedit oder Nano). Es wird lediglich eine reine Textdatei […]<\/p>\n","protected":false},"author":7,"featured_media":21993,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[297,545],"tags":[1455],"class_list":["post-21458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desktop-umgebungen","category-xfce","tag-kalender-widget"],"_links":{"self":[{"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/posts\/21458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/comments?post=21458"}],"version-history":[{"count":6,"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/posts\/21458\/revisions"}],"predecessor-version":[{"id":21996,"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/posts\/21458\/revisions\/21996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/media\/21993"}],"wp:attachment":[{"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/media?parent=21458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/categories?post=21458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linux-bibel.at\/index.php\/wp-json\/wp\/v2\/tags?post=21458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}