{"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-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.<\/p>\n\n\n\n

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

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

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

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

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

Kopieren Sie folgenden CSS-Code in den Editor:<\/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 abspeichern<\/p>\n\n\n\n
Speichern sie die Datei als gtk.css<\/strong> im versteckten Ordner .config\/gtk-3.0\/<\/strong> unter Ihrem Home-Verzeichnis (\/home\/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-Panel neu starten<\/p>\n\n\n\n
Damit die \u00c4nderungen sofort \u00fcbernommen werden, starten Sie das Xfce-Panel neu. Am einfachsten geht das mit dem Befehl:<\/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 \u00c4nderungen<\/p>\n\n\n\n
– Ein farblich neutraler Hintergrund schafft ein weicheres und moderneres Erscheinungsbild.
– Das ausgew\u00e4hlte Datum hebt sich klar ab.
– Unterschiedliche Graut\u00f6ne f\u00fcr Kalenderwochen und Wochentage schaffen visuelle Hierarchie.
– Leichte Hover-Effekte auf den Tagen erh\u00f6hen die Interaktivit\u00e4t.
– Gen\u00fcgend Innenabstand (Padding) sorgt f\u00fcr Luftigkeit und bessere \u00dcbersichtlichkeit.<\/p>\n\n\n\n
Das Kalender-Widget zeigt nun gr\u00f6\u00dfere Schrift und ist optisch klarer hervorgehoben. Sollte das neue Design nicht sofort aktiv sein, hilft eine \u00dcberpr\u00fcfung der Pfade oder des Dateinamen.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Xfce-Desktop: Angepasstes Kalender-Widget<\/p>\n\n\n\n
Anmerkung<\/strong><\/p>\n\n\n\n
Sollte die gtk.css-Datei im beschriebenen Ordner bereits bestehen, f\u00fcgen Sie den o.g. CSS-Code am Ende der Textdatei ein, speichern es einfach und fahren laut Anleitung fort.<\/p>\n\n\n\n
Fazit<\/p>\n\n\n\n
Mit diesen wenigen Schritten l\u00e4sst sich das Xfce Kalender-Widget individuell anpassen und deutlich \u00fcbersichtlicher gestalten. Perfekt f\u00fcr alle, die auf dem Xfce-Desktop ein modernes und klares Erscheinungsbild bevorzugen.<\/p>\n
\r\n    
\r\n    \r\n                            \"Gef\u00e4llt\r\n            <\/a>\r\n    21    <\/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}]}}