Kategorien farblich hervorheben

Naturfreund · May 12, 2020 at 8:59 PM

Um Rückfragen vorzubeugen, bitten wir um folgende Angaben:

Thunderbird-Version: 68.8
Lightning-Version: 68.8
Betriebssystem + Version: Windows 10 Home
Google-Kalender mit "Provider for Google-Calendar" (ja/nein): ja
Google- oder sonstiger Kalender mit WebDAV / CalDAV (ja/nein/was genau):
Eingesetzte Antivirensoftware: Windows Defender
Firewall (Betriebssystem-intern/Externe Software):

Hallo zusammen,

wenn ich einer Kategorie eine Farbe zuweisen, so erscheinen Termine in dieser Kategorie nur mit einem Balken in dieser Farbe ganz rechts.

Ich möchte den farblichen Balken aber nicht nur ganz rechts, sondern über die gesamte Fläche des Termins. Wie kann ich das bewerkstelligen?

Besten Dank

Gerhard

edvoldi · May 12, 2020 at 9:07 PM

Hallo Naturfreund,

Quote from Naturfreund

Ich möchte den farblichen Balken aber nicht nur ganz rechts, sondern über die gesamte Fläche des Termins. Wie kann ich das bewerkstelligen?

~~Das kann man nicht ändern.~~

Teste einmal diesen Code.

CSS

.calendar-event-box-container[categories~="kategoriename"] {   
background: #3cb371 !important; 
}
.calendar-event-box-container[categories~="kategoriename"] {
text-align:center !important;
border: 2px solid blue !important;
}
calendar-category-box[categories~="kategoriename"] {
    display: none !important;
}

Gruß
EDV-Oldi

Naturfreund · May 12, 2020 at 9:42 PM

Hallo EDV-Oldie,

ich habe den Code im Thunderbird-Profil in userChrome.css eingefügt, aber es hat sich nichts geändert - auch nicht nach dem Neustart des Rechners.

Besten Gruß

Gerhard

edvoldi · May 12, 2020 at 9:50 PM

Hast Du denn schon andere Codes in Thunderbird einfügen?

Naturfreund · May 12, 2020 at 10:00 PM

Nur die folgenden:

edvoldi · May 12, 2020 at 10:12 PM

Entschuldigung, ich habe vergessen dabei zu schreiben, das Du natürlich kategoriename durch den Namen Deiner Kategorie ersetzen muss, den Namen aber kleinschreiben.
Wenn Du das für mehrere Kategorien brauchst, musst Du auch für jede Kategorie so ein Code erstellen.

Z.B. für Urlaub

Code

[categories~="urlaub"]

Gruß
EDV-Oldi

Naturfreund · May 12, 2020 at 10:44 PM

Es funktioniert nach wie vor nicht. Muss ich möglicherweise in Zeile 6 "blue" durch "red" ersetzen?

Naturfreund · May 13, 2020 at 12:02 AM

Guten Morgen EDV-Oldie,

mir ist zwischenzeitlich ein anderer Gedanke gekommen, den ich auch schon umgesetzt habe: Ich habe einen neuen Kalender erstellt, den ich "Geburtskalender" genannt habe und ihm die Farbe rot zugewiesen.

Herzlichen Dank für Deine Hilfe

Gerhard

edvoldi · May 13, 2020 at 10:32 AM

Quote from Naturfreund

Es funktioniert nach wie vor nicht. Muss ich möglicherweise in Zeile 6 "blue" durch "red" ersetzen?

Die Farben kannst Du natürlich selber auswählen.
Hast Du denn jedes mal nach einer Änderung Thunderbird neu gestartet, am besten noch mit leeren des Scriptcaches?

Quote from Naturfreund

Ich habe einen neuen Kalender erstellt,

Das ist so wie so die bessere Lösung.
Aber auch im Geburtstagskalender habe ich 4 Kategorien.
Da mir die Kalenderfarben wichtig sind vergebe ich für die Kategorien kleine Bildchen.

Gruß
EDV-Oldi

kardio · January 14, 2022 at 5:20 PM

Das ist so wie so die bessere Lösung.Aber auch im Geburtstagskalender habe ich 4 Kategorien.
Da mir die Kalenderfarben wichtig sind vergebe ich für die Kategorien kleine Bildchen.

Quote from edvoldi

Gruß
EDV-Oldi

Hallo EDV-Oldi,

gibts die Möglichkeit mit den kleinen Bildchen auch noch in Version 91.5 ?

Da hatte sich doch mal was geändert, oder? Finde jedenfalls nix mehr und die Zeilen ins userChrome.css zu schreiben ändert leider gar nix.

Danke und Gruss

Kardio

edvoldi · January 14, 2022 at 6:05 PM

Hallo kardio,

Quote from kardio

gibts die Möglichkeit mit den kleinen Bildchen auch noch in Version 91.5 ?

Ich habe zum Beispiel für die Kategorie "Geburtstag" diesen Code.

CSS

/*   Kategorie: Geburtstag   */
    .calendar-category-box[style="background-color: var(--category-geburtstag-color);"] {
    min-width: 15px !important;
    background-image:url("file:///C:/Dropbox/Chrome/Icons/gebw.png") !important;
    background-repeat: no-repeat !important;
    }

oder mit base64 Bild

CSS

    .calendar-category-box[style="background-color: var(--category-geburtstag-color);"] {
    min-width: 15px !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACTUlEQVR4Xq3RXUhTYRgH8P/ZmXmOH+mO7MNoOQwk6NTmR7GwiwrL8iKDiCireVdQGJEX86pidRFIRhdeCMWpLjMv8mI4b5SCECkcgtDWZqCxGZub05kf5+wJXrY16ePK3+Xz8Pzf5+HFtjPYXXLtFZ+y5/JoxHz1PRkvjZH5zFDEeFRRxOp2Gf+z+/QTt+3GxGbn6xi9CxD5F4i+xIh8YaKbryJkOjW0WVrT5f77cFufe3+3n15MZdjgfIqYmW8JmpzbZLXBGY32nR8mwXw9H6JjaztcMl/T7Ll49gAkkcNsEljeAPN9PobxqSir6XkdutxtKLYe8RSJx9g5HADsvTaqVB9qdJ1rMqAwWZdexOfpORx02pGzoQFvfWH4nyov1ZSnUw8AKvhWg8mAYAKMpRTokAGxSILdlMFz/yJWBAkzcSCcBFShFnxRcSsAsIB1XrDEVoGV7NqBOABNxf3jesz+TGLYDyxJEgplKiUL4tkAUjWEEwCvQ16VyFogbQ3La/gDEZDfQLeUiEbTsHAACAxi6dxTa6ANDlCx1Y+F6O+AdGpEiEVdqmRBDk9gSFsHr3LgCHmZUBDaSmok/42Jr4O9ZcFJ1SQSTCWArQK47QTT2OBAR1MZTILGekYhA92YVwU+9qLQzrq77l3tXmro1+jwAFFrX4haHn2ilocT5OwZp/pnq6xXUa8QcKEbWRwKlFpvuctrnB7biWZ9VZ1t68nTQQQGvepS6EMP8KYX/7Kj4qRcUvVAKbc+jlQ7Bsgs95NYeS8C3FEAp4zt9gv5lvx9cOlvNAAAAABJRU5ErkJggg==") no-repeat !important;
    }

Gruß

EDV-Oldie

kardio · January 15, 2022 at 11:57 AM

Hallo EDV-Oldie,

danke für die schnelle Antwort.

Habs in die userChrome.css reinkopiert und den Pfad und Kategorienamen (in Kleinbuchstaben) angepasst, leider passiert nischte.

In der alten Version klappte es ja sogar, Bilder vor den Text im Kalender zu bauen:

CSS

.calendar-event-box-container[categories~="xl"] {
height:34px !important;
border: solid #ffffff 1px !important;
padding-left: 35px !important;
padding-top: 4px !important;
background: #00ffc0 !important;
background-image: url("pics/xl.png") !important;
background-position: bottom left !important;
background-repeat: no-repeat !important;
font-weight: bold ;
}
calendar-category-box[categories~="xl"] {
display: none !important;
}

Display More

Gibts da gar keine Möglichkeit mehr? Habe leider trotz intensiver Suche nichts brauchbares gefunden.

Gruss Kardio

edvoldi · January 15, 2022 at 1:10 PM

Hallo kardio,

Quote from kardio

In der alten Version klappte es ja sogar, Bilder vor den Text im Kalender zu bauen:

Die Bilder sind jetzt hinter dem Text zu sehen

.

Quote from kardio

Habs in die userChrome.css reinkopiert und den Pfad und Kategorienamen (in Kleinbuchstaben) angepasst, leider passiert nischte.

Hast Du auch einen Neustart mit löschen des Script Caches gemacht?
Oder besser noch einmal im Fehlerbehebungsmodus starten. und dann wieder normal.

Gruß

EDV-Oldie

kardio · January 15, 2022 at 8:08 PM

Im Entwicklerwerkzeuge-Modus zeigt er Änderungen immer sofort an. Da brauch ich nix neu starten oder Cache löschen.

Und ob die Bilder vor oder hinter dem Text sind ist mir auch wurscht, Hauptsache, sie werden überhaupt angezeigt.

Aber bitte abhängig von der Kategorie und nicht vom Kalender, ich werd hier noch wahnsinnig...

Gruss Kardio

dharkness21 · January 15, 2022 at 11:30 PM

Hallo kardio,

schau mal, ob Du damit ↓ etwas anfangen kannst.

CSS

.calendar-color-box {
    border-radius: 0 !important;
    border: 1px solid #B2B2B2 !important;
    background-image: none !important;
    padding: 2px !important;
}

.calendar-category-box {
    border-radius: 0 !important;
    min-width: 193px !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 0 -148px !important;
}
.alarm-icons-box,
.reminder-icon {
    margin: 2px -35px 0 0 !important;
}
.item-classification-box,
.reminder-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box {
    z-index: 100000 !important;
    color: #000 !important;
}
.item-time-label {
    margin-left: 2px !important;
}

Display More

dharkness21 · January 16, 2022 at 12:28 AM

Hier nun meine vorerst fertige Version.

CSS

.calendar-color-box {
    border-radius: 0 !important;
    border: 1px solid #B2B2B2 !important;
    background-image: none !important;
    padding: 2px !important;
}

.calendar-category-box {
    border-radius: 0 !important;
    min-width: 193px !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 0 -148px !important;
}
.item-classification-icon,
.reminder-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box {
    z-index: 100000 !important;
    color: #000 !important;
}
/* .alarm-icons-box {
    margin: 3px -40px 0 0 !important;
} */
.reminder-icon {
    margin: 3px -45px 0 0 !important;
}
.item-classification-icon {
    margin: 3px -25px 0 9px !important;
}
.item-time-label {
    margin-left: 2px !important;
}

Display More

kardio · January 16, 2022 at 8:34 AM

Guten Morgen,

bin mit meinem Grundstyling soweit zufrieden, eben die Bilder fehlen noch.

Wäre folgender Ansatz noch was?

Das man alle Felder, bei denen die Hintergrundfarbe die Farbe der Kategorie hat, das Hintergrundbild reinmacht???

Also codisch ausgedrückt so ungefähr:

CSS

.calendar-category-box[background-color=var(--category-meinekategorie-color)]{
margin:0 0 0 -10px !important;
min-width: 20px !important;
min-height: 20px !important;
height:34px !important;
border: solid #ffffff 1px !important;
padding-left: 20px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
background-image: url("pics/bild.png") !important;
background-position: bottom left !important;
background-repeat: no-repeat !important;
}

Display More

Bin jetzt nicht so der CSS-Spezi, funktioniert das mit Bedingungen so?

Hier mein aktueller Stand:

CSS

.calendar-category-box{
margin:0 0 0 -10px !important;
min-width: 20px !important;
min-height: 20px !important;
height:34px !important;
border: solid #ffffff 1px !important;
padding-left: 20px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.alarm-icons-box,.reminder-icon{
margin:0 0 0 0 !important;
}
.event-name-label,.item-time-label,.alarm-icons-box,.reminder-icon{
z-index:100000!important;
padding-left: 8px !important;
padding-bottom: 4px !important;
}
.calendar-item-flex{
padding:0!important;
background-color:lightblue !important;
}
.calendar-month-day-box-list-item{
margin:0!important;
}
.calendar-color-box{
border:none!important;
}
.event-name-label{
white-space:break-spaces!important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.item-time-label {
font-weight: bold !important;
}

Display More

Schönen Sonntag!

Gruss Kardio

dharkness21 · January 16, 2022 at 11:11 AM

Quote from kardio

bin mit meinem Grundstyling soweit zufrieden, eben die Bilder fehlen noch.

Ich habe mal ein wenig an Deinem CSS geschraubt, schau mal ob es Dir so gefällt.

CSS

.calendar-month-day-box-list-item {
    margin: 1px !important;
}
.calendar-color-box {
    border: solid 1px #000 !important;
}
.calendar-category-box {
    min-width: 20px !important;
    min-height: 26px !important;
    border-left: solid 1px #000 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 20px !important;
    margin: 0 0 0 -10px !important;
}

/* Für eine Kategorie. */
/* Der Pfad muss noch angepasst werden, es muss aber die gleiche Syntax verwendet werden. */
.calendar-category-box[style="background-color: var(--category-verschiedenes-color);"] {
    background-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/Bild50.gif") !important;
    background-position: bottom left !important;
    background-repeat: no-repeat !important;
}
/* 2te Kategorie zum Testen. */
.calendar-category-box[style="background-color: var(--category-gesch-uxe4-ft-color);"] {
    background-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/Bild7.png") !important;
    background-position: bottom left !important;
    background-repeat: no-repeat !important;
}

.item-classification-icon {
    margin: 0 -15px 0 0 !important;
}
.reminder-icon {
    margin: 0 -30px 0 0 !important;
}
.item-classification-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box,
.reminder-icon {
    z-index: 100000!important;
    padding-bottom: 4px !important;
}
.event-name-label,
.item-time-label {
    padding-left: 8px !important;
}
.calendar-item-flex {
    padding: 0 !important;
    background-color: lightblue !important;
}
.item-classification-icon,
.reminder-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box {
    z-index: 100000 !important;
    color: #000 !important;
}
.event-name-label {
    white-space: break-spaces !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.item-time-label {
    font-weight: bold !important;
}

Display More

P.S.:

Ich habe den Code auch noch ein wenig logisch sortiert und der besseren Übersicht wegen m.M.n. besser ausgerichtet.

dharkness21 · January 16, 2022 at 11:18 AM

So * sieht es derzeit mit dem ** CSS-Voodoo bei mir aus.

*

**

CSS

.calendar-month-day-box-list-item {
    margin: 1px !important;
}
.calendar-color-box {
    border-radius: 0 !important;
    border: 1px solid #B2B2B2 !important;
    background-image: none !important;
    padding: 2px !important;
}

.calendar-category-box {
    min-height: 24px !important;
    min-width: 195px !important;
    border-radius: 0 !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 0 -148px !important;
}
.item-classification-icon,
.reminder-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box {
    z-index: 100000 !important;
    color: #000 !important;
}
.event-name-label,
.item-time-label {
    padding-bottom: 2px !important;
}
.reminder-icon {
    margin: 4px -45px 0 0 !important;
}
.item-classification-icon {
    margin: 4px -25px 0 9px !important;
}
.event-name-label {
    white-space: break-spaces !important;
}
.item-time-label {
    margin-left: 2px !important;
}

Display More

P.S.:

Der farbige Rand um den Kalender ist die in den Kalendereinstellungen zugeordnete Farbe.

kardio · January 16, 2022 at 11:29 AM

Super, funktioniert alles wie gewünscht! Du bist der Beste!!!

Vielen Dank und einen schönen Sonntag!

Gruss Kardio

Kategorien farblich hervorheben

Thunderbird 153.0.3 veröffentlicht

Thunderbird 153.0.3 ESR veröffentlicht

Thunderbird 140.13.0 ESR veröffentlicht