Farben im Kalender

k2themax

Moin moin,

da das Thema

Farben im Kalender - Kalender, Termin- und Aufgabenverwaltung (ehemals Lightning) - Thunderbird Mail DE (thunderbird-mail.de)

leider geschlossen wurde und ich sonst nur alte Beiträge finde, diese ausprobiert habe und trotzdem vor selbem Problem stehe, hier meine Frage an findige User. Wie o. a. Link zeigt, beschäftigen sich mehrere mit der Problematik, dass die Farbgebung im Kalender von Thunderbird eher schlecht als recht ist. Ich wollte das mittels der Userchrome.css ändern, allerdings funktionieren meine Änderungen nicht. Ich habe in der selben .css Änderungen für den Posteingang durchgeführt, welche alle funktionieren. Lediglich die Farbgebung für den Kalender funktioniert nicht...ich habe auch mein Theme auf Standard gesetzt und alle Addons deaktiviert. Leider kein Erfolg. Hier meine Einträge, vielleicht hat jemand eine Idee, wie man das zum Laufen bekommt. In erste Linie ist mir wichtig, dass der "Heutige Tag" deutlicher wird, durch Umrandung etc...

CSS

/* --------------------------------------------------------- */
/* Aktueller Tag in der Tagesansicht */
.calendar-day-label-name[relation="today1day"] {
color: red !important;
font-weight: bold !important;
}
#day-view .calendar-header-container[relation="today1day"],
#day-view .calendar-event-column-linebox[relation="today1day"] {
background: silver !important; /* silver */
}


/* --------------------------------------------------------- */
/* Aktueller Tag in der Wochenansicht */
.calendar-day-label-name[relation="today"] {
color: red !important;
font-weight: bold !important;
}
#week-view .calendar-event-column-header[relation="today"],
#week-view .calendar-event-column-linebox[relation="today"] {
background: silver !important; /* silver */
}
/* --------------------------------------------------------- */


/* Aktueller Tag in mehrwöchiger und Monatsansicht */
.calendar-month-day-box-date-label[relation="today"] {
color: red !important;
font-weight: bold !important;
}
.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"] {
border: 3px solid red !important;
}
.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"],
.calendar-month-day-box-date-label[relation="today"] {
background: rgb(209, 23, 23) !important; /* silver */
}


/* --------------------------------------------------------- */
#week-view .day-column-heading {
background-color: #0082FC !important;
color: red !important;
}
#week-view .day-column-selected .day-column-heading {
background-color: #006800 !important;
color: red !important;
}
#day-view .day-column-heading,
#week-view .day-column-today .day-column-heading {
background-color: #FFC0C0 !important;
color: red !important;
}
#week-view .day-column-today.day-column-selected .day-column-heading {
background-color: #F20 !important;
color: red !important;
}

Alles anzeigen

Danke, Gruß kai

Bastler

Zitat von k2themax

In erste Linie ist mir wichtig, dass der "Heutige Tag" deutlicher wird, durch Umrandung etc...

Hallo,

folgend eine ganze Packung zum Kalender. Den anderen Code von Dir vorher ausschneiden und evtl. separat irgendwo weglegen.

Einige Codeschnipsel sind durch diese /* Zeichen am Anfang und Ende */ inaktiv, d.h. auskommentiert.

Zur Funktion die Zeichen löschen oder damit bewusst Codezeilen inaktiv machen.

~~Wenn Du nochmal einen Code veröffentlichst, achte darauf, Grußformeln o.ä. nicht in den Codekasten zu schreiben, sondern den Cursor darunter setzen!~~ Wurde korrigiert.

CSS

/* ------------Kalender Layout----------------------*/

/* ---Kalender rechte Seite Tagesfelder Aussehen--- */
.calendar-month-day-box-current-month[selected="true"],
.calendar-month-day-box-day-off[selected="true"],
.calendar-month-day-box-other-month[selected="true"] {
border: 2px dashed blue !important; /* Rahmen angewaehlter Tag */
}

.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"] {
border: 1px solid red !important; /* Rahmen aktueller Tag */
/*  background-color: #f7f7bf !important; */ /* Hintergrund aktueller Tag */
}

/* ---Kopfbalken eines Tages, heute--- */
.calendar-month-day-box-date-label[relation="today"] {
/* Datum Zahl aktueller Tag */
color: black !important;
font-weight: bold !important;
/* Kopfbalken aktueller Tag */
background-color: #cddded !important;
}

/* ---Tages-Kopfbalken unten abgrenzen--- */
.calendar-month-day-box-dates {
  border-bottom: 0.1px solid #E2E2E2 !important; /* nur Linie unten */
}

/* ---KW-Label umfaerben--- */
.calendar-month-week-label,
.calendar-month-day-box-week-label {
max-width: 3em !important;
color: black !important;
background-color: #E0E0E0 !important;
opacity: 1 !important;
}

/* ---farbige Terminbalken schlanker--- */
 .calendar-color-box {
  padding: 1px !important;
}

/* INAKTIV---Terminbalken 100% Kategoriefarbe--- */
/* .calendar-category-box {
width: 100% !important;
} */

/* --- Kalenderwoche im Minikalender --- */
.minimonth-cal-box .minimonth-week {
color: #0000EE !important;
font-weight: bold !important;
border: 1px solid #999999 !important;
  border-radius: 4px !important;
}

/* ---Schriftgroesse Tagesplan Kopfbereich--- */
#datevalue-label, #weekdayNameLabel {
font-size: 14px !important;
}

/* ---Tagesplan Breite begrenzen--- */
#today-pane-panel,
#agenda {
/*min-width: 140px !important;*/
max-width: 240px !important;
}

/* ---Titel in Wochenansicht einzeilig--- */
:is(calendar-day-view, calendar-week-view) .event-name-label {
-moz-appearance: none !important;
min-height: 10px !important;
max-height: 16px !important;
}

/* ---Wochenansicht Ganztagstermine mehr Platz oben--- */
.allday-events-list {
max-height: 400px !important;
}
.allday-event-listitem {
calendar-editable-item .calendar-color-box .calendar-item-container {
  padding: 0px !important;
max-height: 16px !important;
}
}

/*-------------Aufgaben diverse Anpassungen-----------*/
/* Aufgaben Tab Titelbalken Abstaende */
#calendar-task-tree treechildren::-moz-tree-row,
#calendar-task-tree treechildren::-moz-tree-cell,
#calendar-task-tree treechildren::-moz-tree-cell-text {
  appearance: none !important;
  min-height: 24px !important;
}

/* ---Aufgaben Tab Titeltext--- */
#calendar-task-tree treechildren::-moz-tree-cell-text {
  font-size: 14px !important;
  font-weight: bold !important;
}

/* ---Aufgaben Tab Beschreibung--- */
#calendar-task-details-description,
tabpanel#event-grid-tabpanel-description,
editor#item-description > html {
font-size: 16px !important;
}

/* ---Termin Detail Fensterchen anpassen--- */
#calendar-event-summary-dialog {
appearance: none !important;
height: 500px !important;
width: 450px !important;
}

/* ---Tagesplan Alarm Label--- */
.agenda-listitem-relative {
color: black !important;
background-color: coral !important;
}

Alles anzeigen

graba

Zitat von Bastler

Wenn Du nochmal einen Code veröffentlichst, achte darauf, Grußformeln o.ä. nicht in den Codekasten zu schreiben, sondern den Cursor darunter setzen!

Der TE kann nichts dafür. Das Missgeschick ist mir bei dem Code-Setzen unterlaufen.

Habe eine Korrektur vorgenommen.

k2themax

Danke - es ändert sich aber leider nichts. Das bringt mich dann auf den Gedanken, dass iwas anderes schief läuft...habt ihr Ideen? Wie gesagt, die .css funktioniert, da im Posteingang alles so ist, wie ich es userchromifiziert habe. Merkwürdig!

Bastler

Zitat von k2themax

mittels der Userchrome.css ändern ----- userchromifiziert

Die Schreibweise der Datei ist wichtig. Sie muss unbedingt userChrome.css lauten, Groß- Kleinschreibung beachten!

Bitte auch bei Beschreibungen darauf achten.

Du hast nicht zufällig den Code in die userContent.css gesteckt? Die liegt in gleichem Ordner, spricht aber andere Bereiche an.

milupo

Ich kenne mich mit dem Kalender so richtig aus. Aber ich habe in den Entwicklerwerkzeugen nirgendwo das Attribut relation gefunden und somit auch nicht dessen Werte.

calendar-header-container ist keine Klasse sondern ein Element, also muss der Punkt entfernt werden.

.calendar-event-column-header und .calendar-event-column-linebox habe ich nicht gefunden. Nur calendar-event-column, das ist aber ein Element und keine Klasse.

Weiter bin ich noch nicht, wie gesagt bei Kalender-CSS habe ich noch kaum Erfahrung.

k2themax

Zitat von Bastler

Zitat von k2themax

mittels der Userchrome.css ändern ----- userchromifiziert

Die Schreibweise der Datei ist wichtig. Sie muss unbedingt userChrome.css lauten, Groß- Kleinschreibung beachten!
Bitte auch bei Beschreibungen darauf achten.
Du hast nicht zufällig den Code in die userContent.css gesteckt? Die liegt in gleichem Ordner, spricht aber andere Bereiche an.

Richtig, manchmal werde ich bei der Schreibweise schlampig, wenn ich im Forum schreibe Nee, habe die schon korrekt benannt (funktioniert ja auch eigentlich...) und auch nicht in den userContent.css

Bastler

Funktioniert Dein Code, auch nach den Hinweisen von @milupo nicht, oder mein Code nicht, oder überhaupt keiner der Kalender-Codes?

milupo

Sein Code basiert offenbar noch auf TB 91. Entscheidend ist die TB-Datei calendar-views.css. Dort gibt es noch neben dem Element calendar-header-container die Klasse .calendar-header-container, in TB 102 gibt es nur noch das Element. .calendar-event-column-header und .calendar-event-column-linebox gibt es auch nicht mehr in TB 102, in TB 91 gab es diese beiden KLassen noch. Soweit erst einmal zu meinem Beitrag #6.

milupo

Die Klasse .calendar-day-label-name gibt es auch noch, aber ohne das Attribut relation. Übrigens, den Wert today1day gibt es nicht mehr als Wert für das Attribut relation. Man könnte mal stattdessen Folgendes ausprobieren:

CSS

calendar-day-label[relation="today"]

k2themax

Zitat von milupo

Ich kenne mich mit dem Kalender so richtig aus. Aber ich habe in den Entwicklerwerkzeugen nirgendwo das Attribut relation gefunden und somit auch nicht dessen Werte.
calendar-header-container ist keine Klasse sondern ein Element, also muss der Punkt entfernt werden.
.calendar-event-column-header und .calendar-event-column-linebox habe ich nicht gefunden. Nur calendar-event-column, das ist aber ein Element und keine Klasse.
Weiter bin ich noch nicht, wie gesagt bei Kalender-CSS habe ich noch kaum Erfahrung.

Ich finde diese Einträge nicht, wo siehst Du die? Also ich habe auch keine calendar-views.css. In welchem Ordner müsste die sich verstecken? Oder bin ich blind?

k2themax

Zitat von Bastler

Funktioniert Dein Code, auch nach den Hinweisen von @milupo nicht, oder mein Code nicht, oder überhaupt keiner der Kalender-Codes?

Kein Kalender Code funktioniert - nur meine Einträge für etwaige Posteingangs-Geschichten...Ich habe auch schon alles Kalender-typische gelöscht und nur noch euren Code eingefügt ohne Änderungen - hatte alles keinen Effekt.

Bastler

Zitat von k2themax

nur meine Einträge für etwaige Posteingangs-Geschichten.

Stelle einmal den gesamten Inhalt Deiner userChrome.css hier ein. Im Editor der userChrome.css Strg + A und Strg + C tippen,

dann hier rechts auf folgendes Symbol klicken und in dem Codekasten Strg + V tippen.

So können wir sehen, ob in dem Code ein Fehleintrag alles Weitere blockiert.

k2themax

CSS

/* --- Ungelesene Mails und Postings besonders hervorheben. --- */
treechildren::-moz-tree-cell-text(unread) {
font-weight: bold ! important;
text-decoration: underline ! important;
color: blue ! important;
}
/* --- Neue Mails und Postings besonders hervorheben. --- */
treechildren::-moz-tree-cell-text(new) {
font-weight: bold ! important;
text-decoration: underline ! important;
color: blue ! important;
}
treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
  color: blue !important;
}
treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true, selected, focus) {
  color: blue !important;
}
#folderTree > treechildren::-moz-tree-line {
  visibility: visible !important;
}/* horizontal grid lines */
#threadTree treechildren::-moz-tree-row() {
  border-bottom: 1px dotted grey !important;
}
/* vertical grid lines */
#threadTree > treechildren::-moz-tree-cell {
  border-right: 1px dotted grey !important;
}
/* vertical grid lines for blank area of thread pane */
#threadTree treechildren::-moz-tree-column() {
  border-right: 1px dotted grey !important;
}

/* change Thread pane alternating row colours */
#threadTree treechildren::-moz-tree-row(odd) {
  -moz-appearance: none !important;
  background-image: none !important;
  background-color:#ECF4F4 !important;
}
#threadTree treechildren::-moz-tree-row(selected) {
  background-color: #ffff00 !important;
}
#threadTree treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}

@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml") {
#addressRowCc.address-row.hidden,
#addressRowBcc.address-row.hidden {
    display: flex !important;
}
#addressingWidgetSwappableLabels > label#addr_cc,
#addressingWidgetSwappableLabels > label#addr_bcc {
    display: none !important;
}
.aw-firstColBox {
  display: none !important;
}
#addressingWidgetLabels > label#extraRecipientsLabel {
display: none !important;
}

/* ------------Kalender Layout----------------------*/

/* ---Kalender rechte Seite Tagesfelder Aussehen--- */
.calendar-month-day-box-current-month[selected="true"],
.calendar-month-day-box-day-off[selected="true"],
.calendar-month-day-box-other-month[selected="true"] {
border: 2px dashed blue !important; /* Rahmen angewaehlter Tag */
}

.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"] {
border: 1px solid red !important; /* Rahmen aktueller Tag */
/*  background-color: #f7f7bf !important; */ /* Hintergrund aktueller Tag */
}

/* ---Kopfbalken eines Tages, heute--- */
.calendar-month-day-box-date-label[relation="today"] {
/* Datum Zahl aktueller Tag */
color: black !important;
font-weight: bold !important;
/* Kopfbalken aktueller Tag */
background-color: #cddded !important;
}

/* ---Tages-Kopfbalken unten abgrenzen--- */
.calendar-month-day-box-dates {
  border-bottom: 0.1px solid #E2E2E2 !important; /* nur Linie unten */
}

/* ---KW-Label umfaerben--- */
.calendar-month-week-label,
.calendar-month-day-box-week-label {
max-width: 3em !important;
color: black !important;
background-color: #E0E0E0 !important;
opacity: 1 !important;
}

/* ---farbige Terminbalken schlanker--- */
 .calendar-color-box {
  padding: 1px !important;
}

/* INAKTIV---Terminbalken 100% Kategoriefarbe--- */
/* .calendar-category-box {
width: 100% !important;
} */

/* --- Kalenderwoche im Minikalender --- */
.minimonth-cal-box .minimonth-week {
color: #0000EE !important;
font-weight: bold !important;
border: 1px solid #999999 !important;
  border-radius: 4px !important;
}

/* ---Schriftgroesse Tagesplan Kopfbereich--- */
#datevalue-label, #weekdayNameLabel {
font-size: 14px !important;
}

/* ---Tagesplan Breite begrenzen--- */
#today-pane-panel,
#agenda {
/*min-width: 140px !important;*/
max-width: 240px !important;
}

/* ---Titel in Wochenansicht einzeilig--- */
:is(calendar-day-view, calendar-week-view) .event-name-label {
-moz-appearance: none !important;
min-height: 10px !important;
max-height: 16px !important;
}

/* ---Wochenansicht Ganztagstermine mehr Platz oben--- */
.allday-events-list {
max-height: 400px !important;
}
.allday-event-listitem {
calendar-editable-item .calendar-color-box .calendar-item-container {
  padding: 0px !important;
max-height: 16px !important;
}
}

/*-------------Aufgaben diverse Anpassungen-----------*/
/* Aufgaben Tab Titelbalken Abstaende */
#calendar-task-tree treechildren::-moz-tree-row,
#calendar-task-tree treechildren::-moz-tree-cell,
#calendar-task-tree treechildren::-moz-tree-cell-text {
  appearance: none !important;
  min-height: 24px !important;
}

/* ---Aufgaben Tab Titeltext--- */
#calendar-task-tree treechildren::-moz-tree-cell-text {
  font-size: 14px !important;
  font-weight: bold !important;
}

/* ---Aufgaben Tab Beschreibung--- */
#calendar-task-details-description,
tabpanel#event-grid-tabpanel-description,
editor#item-description > html {
font-size: 16px !important;
}

/* ---Termin Detail Fensterchen anpassen--- */
#calendar-event-summary-dialog {
appearance: none !important;
height: 500px !important;
width: 450px !important;
}

/* ---Tagesplan Alarm Label--- */
.agenda-listitem-relative {
color: black !important;
background-color: coral !important;
}

Alles anzeigen

k2themax

Liebe Leute!!! Ich habe den Fehler! In Zeile 47 ist eine Schweifklammer zuviel....ich habe gerade nochmals alles kontrolliert, damit ich euch keinen Schwachsinn poste und ihr euch nicht umsonst Mühe macht, da habe ich sie entdeckt. Jetzt funktioniert alles.

Ich danke euch vielmals fürs mitgrübeln

Gruß

Kai

milupo

Wo kommt denn der Code plötzlich her? Der sieht doch ganz anders aus. Warum nicht gleich den richtigen Code? Auch da sind Kalender-Regeln enthalten. Da hätten wir uns nicht mehr mit Code beschäftigen müssen, den du sowieso nicht verwendest.

Bastler

Zitat von milupo

Wo kommt denn der Code plötzlich her? Der sieht doch ganz anders aus

Der die Mailansicht betreffende ist der von k2themax und der Kalender betreffende ist wie es aussieht von mir.

milupo

Zitat von Bastler

der Kalender betreffende ist wie es aussieht von mir.

Da ist dann natürlich der Kalender-Code aktuell.

franzoktoberfest

Windows 11

TB 102.10 (64bit)

Hallo zusammen,

und jetzt mal für Dumme.

Ich verstehe nichts von css "Programmierung" und will es auch nicht lernen.

Aber die Möglichkeit den aktuellen Tag (also heute) farblich stärker zu kennzeichnen möchte ich auch schon seit langem.

Gibt es eine Möglichkeit eine Teil (welchen) des oben aufgeführten Codes zu übernehmen und in meine ???? zu kopieren.

Oder denke ich da zu einfach?

Viele Grüße

Franz

Bastler

Zitat von franzoktoberfest

Aber die Möglichkeit den aktuellen Tag (also heute) farblich stärker zu kennzeichnen möchte ich auch schon seit langem.

Hallo,

da empfehle ich, die ganze Packung aus #2 mittels der Symbole rechts oben in dem Codekasten zu kopieren

und in eine userChrome.css, die unter Profilordner\chrome\ liegen muss, einzufügen.

Das Ganze bei beendetem TB!

Falls die Datei noch nicht existiert, im Ordner chrome mit rechter Maustaste -> Neu -> Textdokument

dann die blaue Schrift sofort komplett umbenennen in userChrome.css (korrekte Schreibweise!).

Die aufpoppende Warnung abnicken, OK. Mit rechter Maustaste -> Bearbeiten, das oben kopierte einfügen und speichern.

Der Weg zum aktiven Profilordner wie da im 1. Bild bei Deinem TB Ordner öffnen klicken und dann TB beenden!

Im nun geöffneten Explorer kann der Pfad zum Ordner chrome so aussehen:

Wichtig!

In den Erweiterten Einstellungen, Extras -> Einstellungen -> links Allgemein -> rechts unten Konfiguration bearbeiten...

toolkit.legacyUserProfileCustomizations.stylesheets -> true schalten. Geht mit Doppelklick auf den Wert, oder Symbol ganz rechts.

Dann TB neu starten.

Farben im Kalender

Thunderbird 139.0.2 veröffentlicht

Thunderbird 128.11.1 ESR veröffentlicht

Ähnliche Themen

Farben im Kalender

Hintergrundfarbe des aktuellen Tages

neue Katgeorien bei Aufgaben lassen sich nicht speichern

Kalender Einträge - Höhe/Größe der Schrift bzw. Balken

Kalender Synchronisation funktioniert nur in eine Richtung