wieder mal CSS anpassen - Kalenderfarben

K.Achim · July 30, 2021 at 11:41 AM

Moin allerseits.

Nutze TB v78.12.0 auf diversen Rechnern mit Win 10/64 und 8.1/64 und möchte Farben in der Kalenderansicht ändern.

Habe hier und im Camp-Firefox viel zu dem Thema gefunden, leider tu' ich mich schwer bei der Anwendung des "Inspectors".

Konkret geht es um die Hintergrundfarben der Tage außerhalb des aktuellen Monats. Aktuell sind diese leicht grau hinterlegt und setzen sich für mich nicht stark genug vom Weiß des aktuellen Monats ab, weswegen ich die Grautöne für Wochentage und Wochenenden jeweils ein, zwei Nuancen dunkler gestalten würde.

Eine modifizierte userchrome.css ist bereits vorhanden, nur welche Einträge wären in diesem Fall für mein Vorhaben nötig?

Ich hoffe da mal ganz frech auf Eure Unterstützung

Danke und bleibt gesund

Achim

edvoldi · July 30, 2021 at 11:55 AM

Hallo K.Achim,

bitte testen:

CSS

/*   Letzter und kommender Monat in mehrwöchiger und Monatsansicht   */ 
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"],    
    .calendar-month-day-box-other-month[relation="past"],
    .calendar-month-day-box-other-month[relation="future"]    {
    background: #ffffff !important;
    }
    
/*   ---------------------------------------------------------   */
    
/*   Resttage in mehrwöchiger und Monatsansicht   */
    .calendar-month-day-box-date-label,
    .calendar-month-day-box-current-month {
    background: #eeeeee !important; 
    }
    
/*   ---------------------------------------------------------   */

Display More

Farben muss Du noch anpassen.

Gruß

EDV-Oldie

MSFreak · July 30, 2021 at 11:56 AM

Schaue mal ob du was davon gebrauchen kannst

CSS

/* Farbe Adressbuch Detailansicht */
#CardViewInnerBox {
background-color: #e8edf2;color: black !important; }


/* Farbe letzter und kommender Monat in mehrwöchiger und Monatsansicht */ 
.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],
.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"],    
.calendar-month-day-box-other-month[relation="past"],
.calendar-month-day-box-other-month[relation="future"]    {
 background: #2A2A2E !important;}
 
  
/* Farbe Wochenende */
#day-view .calendar-header-container[weekend="true"],  
#day-view .calendar-event-column-linebox[weekend="true"] {
 background: #424242  !important;}
#week-view .calendar-header-container[weekend="true"],
#week-view .calendar-event-column-linebox[weekend="true"] { 
 background: #424242  !important;}
    
/* Farbe Wochenende in mehrwöchiger und Monatsansicht */
.calendar-month-day-box-day-off.calendar-month-day-box-current-month,
.calendar-month-day-box-date-label[weekend="true"] {
 background: #424242 !important;}
.calendar-month-day-box-other-month,
.calendar-month-day-box-date-label{
 background: #606064 !important;}
    
    
/* Kalendertag "Heute" deutlicher durch Rahmen und Farbe hervorheben */
.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 #9FA3D9!important;}
 
 
/* Aktueller Tag in mehrwöchiger und Monatsansicht */ 
.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: #606064 !important;}


/* Kalendertag "selektierter Tag" */
.calendar-month-day-box-current-month[selected="true"],
.calendar-month-day-box-day-off[selected="true"],
.calendar-month-day-box-other-month[selected="true"] {
 background-color: #6E6E6E !important;}
 
 
/* Rahmen um die Tagestermine löschen */
.calendar-month-day-box .calendar-month-day-box-item[allday="true"],
.calendar-color-box {
border-color: transparent !important;
box-shadow: none !important;}

Display More

Bei der dunklen Theme sieht es bei mir so aus

K.Achim · July 30, 2021 at 2:31 PM

Das ging ja schnell, herzlichen Dank

Habe auch schon eine Weile mit Euren Vorschlägen gebastelt und komme schon fast zu meinem Begehr, wenn ich es so mache:

CSS

/* Farbe letzter und kommender Monat in mehrwöchiger und Monatsansicht */ .calendar-month-day-box-other-month[relation="past"],.calendar-month-day-box-other-month[relation="future"]    { background: #bbbbbb !important;}

/* Farbe letzter und kommender Monat in mehrwöchiger und Monatsansicht Label*/ .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"]	{   background: #656565 !important;}

/* Farbe Wochenende in mehrwöchiger und Monatsansicht */
.calendar-month-day-box-day-off.calendar-month-day-box-other-month,.calendar-month-day-box-date-label[weekend="true"] { background: #9f9f9f!important;}

Die Farben sind allerdings noch nicht fix. Und was ich bisher nicht hinbekommen habe, die Label an den "other-month"- Wochenenden unabhängig von den restlichen "other-month"-Wochentagen einzufärben.

Werde noch ein wenig damit spielen müssen.

Habt mir schonmal sehr geholfen

Danke und Gruß

Achim

edvoldi · July 30, 2021 at 2:39 PM

Quote from K.Achim

Und was ich bisher nicht hinbekommen habe

Meinst Du so etwas?

CSS

/*   Wochenende in mehrwöchiger und Monatsansicht   */
    .calendar-month-day-box-day-off.calendar-month-day-box-current-month,
    .calendar-month-day-box-date-label[weekend="true"] {
    background: #f7ffe3 !important; 
    }
    
/*   ---------------------------------------------------------   */

Gruß

EDV-Oldie

K.Achim · July 30, 2021 at 3:21 PM

Leider nein, das färbt die Wochenendtage, nicht den "Kopf"

Ich versuche es mal zu verdeutlichen. Im folgenden Bild hat Punkt (1) und (3) nach meinem Code die gleiche Farbe und ich kann diese nicht unabhängig voneinander einstellen. Eigentlich möchte ich jedoch alle Hintergründe an den Punkten (1) - (4) unabhängig behandeln können...

Mir ist aber gerade eben noch ein Problem aufgefallen. Der aktuelle Tag hat bei mir einen roten Rahmen, der markierte Tag bekommt einen gelben Hintergrund. Letzteres wird nicht bei den von mir an den gemäß Code eingegrauten Tagen angewendet. Gibt es da auch eine Lösung für?

Danke und Gruß

Achim

edvoldi · July 30, 2021 at 3:52 PM

Meinst Du das so?

CSS

/*   Letzter und kommender Monat in mehrwöchiger und Monatsansicht   */ 
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"]    {
    background: yellow !important;
    }    
    .calendar-month-day-box-other-month[relation="past"],
    .calendar-month-day-box-other-month[relation="future"]    {
    background: red !important;
    }

Gruß

EDV-Oldie

K.Achim · July 30, 2021 at 3:53 PM

Noch ein Problem festgestellt: In der Ansicht "mehrere Wochen" wirkt sich der Code nicht aus...

Edit: sehe grad Deine Antwort, prüfe ich

K.Achim · July 30, 2021 at 4:00 PM

Quote from edvoldi

Meinst Du das so?

Leider nein, auch so werden die Kopfdaten an Wochentagen und and Wochenenden gleich eingefärbt, in diesem Falle gelb...

Grüßle

edvoldi · July 30, 2021 at 4:03 PM

So sieht das mit dem Code bei mir aus:

Gruß

EDV-Oldie

K.Achim · July 30, 2021 at 4:11 PM

Hier noch eine besonders hübsche Demo

Gruß

Achim

edvoldi · July 30, 2021 at 4:29 PM

Scheinbar unterscheidet der Kalender in der "Mehrere Wochen" Ansicht nicht zwischen alten und neuen Monat.

Der Code heißt überall

Code

.calendar-month-day-box-current-month

Gruß

EDV-Oldie

K.Achim · July 30, 2021 at 7:21 PM

Kein Problem, im Wesentlichen funktionierts ja und ich kann damit leben. Hier jetzt nochmal mein aktueller Code, der auch alle Tage wieder gelb selektieren kann.

CSS

/* Farbe letzter und kommender Monat in Monatsansicht*/
.calendar-month-day-box-other-month[relation="past"],.calendar-month-day-box-other-month[relation="future"]    { background: #e1e1e1 !important;}

/* Farbe letzter und kommender Monat in Monatsansicht Label*/
.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"]    {   background: #c3c3c3 !important;}

/* Kalendertag "selektierter Tag" */
.calendar-month-day-box-current-month[selected="true"],.calendar-month-day-box-day-off[selected="true"],.calendar-month-day-box-other-month[selected="true"] { background-color: #fdfddb !important;}

Also Danke Euch nochmal

Gruß

Achim

bananovic · July 31, 2021 at 5:35 PM

Jetzt möchte ich auch meinen Senf dazugeben. Ich habe in die userChrome.css Einträge aufgenommen, die die nicht mehr funktionierende Erweiterung CalendarTweaks ersetzten, und zwar mit den gleichen Farben.

CSS

/*******************************************************************/
/* KALENDER (Lightning) - Ersatz für CalendarTweaks ab TB 78 */
/*******************************************************************/

/* Header für den heutigen Tag in allen Kalenderansichten rosa */
#day-view calendar-day-label[relation="today1day"],
#week-view calendar-day-label[relation="today"],
#multiweek-view calendar-day-label[relation="today"],
#month-view calendar-day-label[relation="today"],
.calendar-month-day-box-date-label[relation="today"] {
    background-color: #FFC0C0 !important;
    border: none !important; 
}

/* Heutiger Tag im Minikalender rosa */
.minimonth-day[today="true"] {
   background-color: #FFF0F0 !important;
   border-color: #FFA0A0 !important;
}

/* Die einzelnen Zeilen im Tageskalender mit verschiedenen Gelbtönen 
für Tagesansicht und Nachtansicht */
#day-view .calendar-event-column-linebox[off-time="true"] {
   background-color: #F5F0DE !important;
}
#day-view .calendar-event-column-linebox:Not([off-time="true"]) {
   background-color: #FFFAE8 !important;
}

/* Die einzelnen Zeilen im heutigen Tag im Wochenkalender mit 
verschiedenen Gelbtönen für Tagesansicht und Nachtansicht */
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"] {
   background-color: #F5F0DE !important;
}
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]) {
   background-color: #FFFAE8 !important;
}

/* Heutiger Tag, wenn nicht ausgewählt, im Monatskalender und Mehrwochenkalender rosa */
#multiweek-view calendar-month-day-box[relation="today"]:Not([selected="true"]),
#month-view calendar-month-day-box[relation="today"]:Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}

/* Die einzelnen Zeilen im heutigen Tag, wenn nicht ausgewählt, im Wochenkalender mit 
verschiedenen Rosatönen für Tagesansicht und Nachtansicht */
#week-view .calendar-event-column-header[relation="today"]:Not([selected="true"]),
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]):Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"]:Not([selected="true"]) {
   background-color: #F5E6E6 !important;
}

/* Ausgewählten Eintrag in allen Kalenderansichten mit einem Rahmen versehen */
calendar-event-box[selected="true"],
calendar-month-day-box-item[selected="true"] {
    border: 1px solid !important;
}

/*******************************************************************/

Display More

Wessix · February 18, 2023 at 7:01 PM

Quote from bananovic

Jetzt möchte ich auch meinen Senf dazugeben. Ich habe in die userChrome.css Einträge aufgenommen, die die nicht mehr funktionierende Erweiterung CalendarTweaks ersetzten, und zwar mit den gleichen Farben.

CSS

/*******************************************************************/
/* KALENDER (Lightning) - Ersatz für CalendarTweaks ab TB 78 */
/*******************************************************************/

/* Header für den heutigen Tag in allen Kalenderansichten rosa */
#day-view calendar-day-label[relation="today1day"],
#week-view calendar-day-label[relation="today"],
#multiweek-view calendar-day-label[relation="today"],
#month-view calendar-day-label[relation="today"],
.calendar-month-day-box-date-label[relation="today"] {
    background-color: #FFC0C0 !important;
    border: none !important; 
}

/* Heutiger Tag im Minikalender rosa */
.minimonth-day[today="true"] {
   background-color: #FFF0F0 !important;
   border-color: #FFA0A0 !important;
}

/* Die einzelnen Zeilen im Tageskalender mit verschiedenen Gelbtönen 
für Tagesansicht und Nachtansicht */
#day-view .calendar-event-column-linebox[off-time="true"] {
   background-color: #F5F0DE !important;
}
#day-view .calendar-event-column-linebox:Not([off-time="true"]) {
   background-color: #FFFAE8 !important;
}

/* Die einzelnen Zeilen im heutigen Tag im Wochenkalender mit 
verschiedenen Gelbtönen für Tagesansicht und Nachtansicht */
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"] {
   background-color: #F5F0DE !important;
}
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]) {
   background-color: #FFFAE8 !important;
}

/* Heutiger Tag, wenn nicht ausgewählt, im Monatskalender und Mehrwochenkalender rosa */
#multiweek-view calendar-month-day-box[relation="today"]:Not([selected="true"]),
#month-view calendar-month-day-box[relation="today"]:Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}

/* Die einzelnen Zeilen im heutigen Tag, wenn nicht ausgewählt, im Wochenkalender mit 
verschiedenen Rosatönen für Tagesansicht und Nachtansicht */
#week-view .calendar-event-column-header[relation="today"]:Not([selected="true"]),
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]):Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"]:Not([selected="true"]) {
   background-color: #F5E6E6 !important;
}

/* Ausgewählten Eintrag in allen Kalenderansichten mit einem Rahmen versehen */
calendar-event-box[selected="true"],
calendar-month-day-box-item[selected="true"] {
    border: 1px solid !important;
}

/*******************************************************************/

Display More

Kanne es sein das einiges von dem oben aufgeführten nicht mehr funktioniert, probiere die einzelnen Anpassungen durch um die UserChrome.css besser zu verstehen aber einiges hat in Version 102 anscheinend keinen Effekt mehr. Kann das sein. Gibt es irgendwo eine Art Referenz über die editierbaren Elemente?

graba · February 18, 2023 at 7:14 PM

Wessix

Kleiner Hinweis: Diese Webseite: Zitate verwenden

bananovic · February 19, 2023 at 8:00 PM

Quote from Wessix

Kanne es sein das einiges von dem oben aufgeführten nicht mehr funktioniert, probiere die einzelnen Anpassungen durch um die UserChrome.css besser zu verstehen aber einiges hat in Version 102 anscheinend keinen Effekt mehr. Kann das sein. Gibt es irgendwo eine Art Referenz über die editierbaren Elemente?

In TB102 hat sich einiges geändert. Um eine Optik wie in CalendarTweaks zu erzielen, muß der Code geändert werden. Er lautet jetzt wie folgt:

CSS

/*******************************************************************/
/* KALENDER (Lightning) - Ersatz für CalendarTweaks ab TB 78 */
/*******************************************************************/

/* Header für den heutigen Tag in allen Kalenderansichten rosa */
#day-view .day-column-today .day-column-heading,
#week-view .day-column-today .day-column-heading,
#multiweek-view calendar-day-label[relation="today"],
#month-view calendar-day-label[relation="today"],
.calendar-month-day-box-date-label[relation="today"] {
    background-color: #FFC0C0 !important;
    color: black !important;
    font-weight: normal !important;
}

/* Heutiger Tag im Minikalender rosa */
.minimonth-day[today="true"] {
   background-color: #FFF0F0 !important;
   border-color: #FFA0A0 !important;
}

/* Die Zeile unter heutiger Tag im Tageskalender weiß */
#day-view .allday-events-list {
   background-color: #FFFFFF !important;
}

/* Die einzelnen Zeilen im Tageskalender mit verschiedenen Gelbtönen 
für Tagesansicht und Nachtansicht */
#day-view .multiday-hour-box {
   background-color: #FFFAE8 !important;
}
#day-view .multiday-hour-box-off-time {
   background-color: #F5F0DE !important;
}

/* Die einzelnen Zeilen in der Timebar grau bzw. weiß einfärben */
#day-view .multiday-hour-box.multiday-timebar-time {
   background-color: #FFFFFF !important;
}
#day-view .multiday-hour-box.multiday-timebar-time.multiday-hour-box-off-time {
   background-color: #D9D9D9 !important;
}

/* Die einzelnen Zeilen im heutigen Tag im Wochenkalender mit 
verschiedenen Gelbtönen für Tagesansicht und Nachtansicht */
#week-view .day-column-today .multiday-hour-box {
   background-color: #FFFAE8 !important;
}
#week-view .day-column-today .multiday-hour-box-off-time {
   background-color: #F5F0DE !important;
}

/* Heutiger Tag, wenn nicht ausgewählt, im Monatskalender und Mehrwochenkalender rosa */
#multiweek-view calendar-month-day-box[relation="today"]:Not([selected="true"]),
#month-view calendar-month-day-box[relation="today"]:Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}

/* TB 102: Die einzelnen Zeilen im heutigen Tag, wenn nicht ausgewählt, im Wochenkalender mit 
verschiedenen Rosatönen für Tagesansicht und Nachtansicht */
#week-view .day-column-today:not(.day-column-selected) .allday-events-list,
#week-view .day-column-today:not(.day-column-selected) .multiday-hour-box {
   background-color: #FFF0F0 !important;
}
#week-view .day-column-today:not(.day-column-selected) .multiday-hour-box-off-time {
   background-color: #F5E6E6 !important;
}

/* Ausgewählten Eintrag in allen Kalenderansichten mit einem Rahmen versehen */
calendar-event-box[selected="true"],
calendar-month-day-box-item[selected="true"] {
    border: 1px solid !important;
}

/* Hintergrund des Wochennummer-Feldes ausschalten */
.calendar-month-day-box-week-label[relation="today"] {
  opacity: 1 !important;
}

/* Die Kategorie-Box wieder breiter machen, wie in TB 91.
Dann muß man das Reminder-Icon nach links verschieben */
.calendar-category-box {
width: 7px !important;
}
.reminder-icon,
.item-recurrence-icon {
padding-right: 7px !important;
}

Display More

futterkohl · February 21, 2023 at 7:30 PM

Kann mir jemand sagen, mit welchem Code ich den Rahmen um ganztägige Termine wegbekomme? Bisher hat bei mir

/* Rahmen um die Tagestermine löschen */

calendar-month-day-box calendar-month-day-box-item[allday="true"]

.calendar-color-box {

border-color: transparent !important;

box-shadow: none !important;

gegriffen, scheint nach dem Update von 78 auf 102 nicht mehr zu funzen...

edvoldi · February 21, 2023 at 7:51 PM

Hallo futterkohl,

ich benutze schon ewig diesen Code dafür.

CSS

/*   Rahmen um die Tagestermine löschen   */

.calendar-month-day-box .calendar-month-day-box-item[allday="true"],
.calendar-color-box {
border-color: transparent !important;
box-shadow: none !important;
}

Gruß

EDV-Oldie

futterkohl · February 21, 2023 at 7:59 PM

Quote from edvoldi

Hallo futterkohl,
ich benutze schon ewig diesen Code dafür.

Glaube bei mir fehlte einfach nur mittendrin irgendwo ein Punkt egal habe Deinen kopiert, läuft, danke

wieder mal CSS anpassen - Kalenderfarben

Thunderbird 153.0.3 veröffentlicht

Thunderbird 153.0.3 ESR veröffentlicht

Thunderbird 140.13.0 ESR veröffentlicht

Similar Threads

Total verändertes Theme ; zeigt her Eure Themes

Form udn Farben der Ordner

Textfarbe von Mailtext anpassen (Ubuntu Dark Theme)

Nach Update auf 78: Symbolleisten und Anpassen-Menü im Nachrichten-Fenster verschwunden

Tab anpassen über CSS

68.6.0 - Schriftgröße beim Drucken anpassen [erl.]