Menübereich farblich anpassen

imebro · November 3, 2024 at 9:27 AM

Hallo,

ich hatte gestern mit Hilfe aus dem Forum schon mein Thunderbird farblich angepaßt und zwar im Bereich der Reiter / Tabs. Dazu habe ich jetzt auch im Verzeichnisbaum noch Linien, wodurch dieser Bereich wesentlich übersichtlicher ist. Danke dafür nochmals an alle Helfer

Nun würde ich gerne auch den Bereich über den Reitern / Tabs noch farblich anpassen. Also da wo steht "Datei, Bearbeiten, Ansicht.........".

Und darüber gibt es ja noch einen Bereich, wo Dinge stehen wie "Abrufen, Verfassen, Chat....."etc.

Mit welchem Code kann ich die Farben dieser beiden Bereiche ändern und ggf. auch das Aussehen der entspr. Tabs?

Hier mal ein Screenshot davon, wie es im Moment aussieht:

Grüße,

imebro

Grisu2099 · November 3, 2024 at 9:51 AM

CSS

#toolbar-menubar {
		border-bottom: 1px solid black !important;
		background-color: red !important;
	}
	#unifiedToolbarContainer {
		border-bottom: 1px solid black !important;
		background-color: blue !important;
	}

Du solltest übrigens dringend deinen Posteingang aufräumen und die Mails in Ordner unterhalb "Öokale Ordner" verschieben. Über 20.000 Mails im Posteingang können zu Problemen führen...

imebro · November 3, 2024 at 10:41 AM

Grisu2099
Danke Dir und habe Dir soeben auch eine PN geschrieben bezüglich Deiner Anmerlung...

Grüße,
imebro

dharkness21 · November 3, 2024 at 10:51 AM

Quote from imebro

und ggf. auch das Aussehen der entspr. Tabs?

Das sind keine Tabs, das sind Button bzw. Toolbarbutton und die lassen sich so ↓ anpassen.

CSS

/* Menü vom Hauptfenster und von Viewsource anpassen. */
#mail-menubar > menu,
#viewSource-main-menubar > menu {
    background-color: #905B46 !important;
    color: #FFF !important;
}
#mail-menubar > menu:hover,
#viewSource-main-menubar > menu:hover {
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

/* Button und Toolbarbutton von #unifiedToolbar anpassen. */
#unifiedToolbar > toolbarbutton {
    background-color: #EEE8AA !important;
    color: #000 !important;
}
#unifiedToolbar > toolbarbutton:hover {
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

#unifiedToolbarContent > li > div > button {
    background-color: #905B46 !important;
    color: #FFF !important;
}
#unifiedToolbarContent > li > div > button:hover {
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

Display More

imebro · November 3, 2024 at 10:53 AM

...habe jetzt diesen Bereich an meine Farbgebung angepaßt und auch die Schriftfarbe noch verändert.

Offenbar kann man jedoch für das mittlere Menü (Datei, Bearbeiten, Ansicht...) keine Fettschrift verwenden. Ich habe es mit folgendem Code versucht, der ja eigentlich korrekt ist:

font-weight: bold !important;

Die Schrift bleibt dort jedoch normal und wird nicht fett.

Und... was müsste ich tun, um zwischen den Einträgen "Datei, Bearbeiten, Ansicht" einfach eine weiße Trennlinie einzufügen?

Grüße,

imebro

dharkness21 · November 3, 2024 at 11:01 AM

Quote from imebro

Offenbar kann man jedoch für das mittlere Menü (Datei, Bearbeiten, Ansicht...) keine Fettschrift verwenden. Ich habe es mit folgendem Code versucht, der ja eigentlich korrekt ist:
font-weight: bold !important;
Die Schrift bleibt dort jedoch normal und wird nicht fett.

Hm, das funktioniert hier ohne die geringsten Probleme.

imebro · November 3, 2024 at 11:18 AM

Danke auch Dir dharkness21

Ich hatte schon den Code von Grisu2099 genommen und damit konnte ich die Hintergrundfarben dieser beiden Menüs schon verändern. Habe es dann selbst erweitert mit den entspr. Schriftfarben, was auch funktioniert.

Was ist denn der Unterschied zwischen seinem und Deinem Code?
Ich sehe, dass Du auch "hover" mit berücksichtigt hast. Das bedeutet wohl (wie ich eben recherchiert habe), dass beim drübergehen mit der Maus sich die Farbe auch nochmal ändert...

Grüße,
imebro

dharkness21 · November 3, 2024 at 11:22 AM

Quote from imebro

Was ist denn der Unterschied zwischen seinem und Deinem Code?

Mein CSS-Schnipsel verändert nur die Menüschaltflächen, Button und Toolbarbutton, das CSS von Grisu verändert die kompletten Leisten.

imebro · November 3, 2024 at 11:26 AM

OK, verstehe...

Es könnte übrigens sein, dass bei mir Fettschrift im mittleren Menü (Datei, Bearbeiten, Ansicht...) deshalb nicht funktioniert, da dieses Menü ziemlich flach ist... also ich meine die Höhe ist nur geringfügig höher, als die Schrift.

Da müsste man wahrscheinlich die Höhe dieses Menüs ändern, damit Fettschrift funktioniert. Ist aber jetzt nur meine laienhafte Annahme

Grüße,
imebro

Grisu2099 · November 3, 2024 at 11:30 AM

Die Fettschrift funktioniert auch ohne Höhenänderung. Du hast nach jeder Änderung in der userChrome.css den TB neu gestartet? Sonst kann das nicht funktionieren.

dharkness21 · November 3, 2024 at 11:40 AM

Quote from imebro

Und... was müsste ich tun, um zwischen den Einträgen "Datei, Bearbeiten, Ansicht" einfach eine weiße Trennlinie einzufügen?

Da muss man leider ein wenig tricksen und die Farben nicht auf #mail-menubar > menu legen, sondern auf #mail-menubar > menu > label, das CSS sieht dann so ↓ aus.

CSS

#mail-menubar > menu > label,
#viewSource-main-menubar > menu > label {
    font-weight: bold !important;
    background-color: #905B46 !important;
    color: #FFF !important;
    padding: 1px 4px 3px 4px !important;
    margin: 0 !important;
}
#mail-menubar > menu:hover > label,
#viewSource-main-menubar > menu:hover > label {
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

#mail-menubar > menu::after,
#viewSource-main-menubar > menu::after {
    content: '|' !important;
    font-size: 19px !important;
    background: none !important;
    color: #F20 !important;
    margin: 0 2px 5px 2px !important;
}

Display More

Das vorherige CSS für #mail-menubar > menu und #viewSource-main-menubar > menu muss dabei entfernt werden und mit den Werten für font-size und margin wirst Du bei den ::after-Einträgen noch ein wenig spielen müssen.

imebro · November 3, 2024 at 11:41 AM

ja, ich starte den TB nach jeder Änderung der CSS-Datei immer wieder neu.

Habe jetzt auch Trennlinien im mittleren Menü hingzugefügt mit dem Code

border-right: 1px solid black !important;

...so langsam lerne ich ein bisschen dazu

Update:
ich sehe erst jetzt Deine Ergänzung dharkness21 . Im Moment hat es einfach mit den Trennlinien funktioniert. So wäre es für mich OK. Oder macht mir das irgendwas kaputt?

Im Moment teste ich mit beiden Codes. Also mit dem von Dir Grisu2099 und dem von dharkness21 .

Somit kann ich den Hintergrund nun farblich bearbeiten, aber auch die eigentlichen Tabs im mittleren und oberen Menü (Schaltflächen / Buttons).

Ich weiß natürlich nicht, ob ich mit beiden Codes in einer CSS-Datei ggf. etwas doppelt mache. Vielleicht kann man ja auch beides in einem Code zusammenfassen. Aber im Moment funktioniert es so ja. Ich teste soeben mit den Farben...

Grüße,
imebro

imebro · November 3, 2024 at 12:03 PM

jetzt sieht alles schon sehr gut aus... so gefällt es mir.
Werde am Ende mal einen Screenshot hier einstellen...

Nur zwei Hintergründe kann ich noch nicht selbst anpassen:

1) diesen hier (siehe Pfeil):

2) diesen hier (siehe Pfeil):

Dann hätte ich im Grunde alles fertig.

Und - wenn ich das so richtig sehe - wäre der Effekt all dieser Anpassungen über die "userChrome.css"-Datei dann genauso, als hätte ich ein eigenes Theme erstellt. Ist das richtig so?

Grüße,
imebro

dharkness21 · November 3, 2024 at 12:15 PM

Quote from imebro

1) diesen hier (siehe Pfeil):

Das wäre dann das ↓ CSS.

CSS

#tabs-toolbar {
    background-image: none !important;
    background-color: #27272A !important;
}

Quote from imebro

2) diesen hier (siehe Pfeil):

Das wäre dann das ↓ CSS.

CSS

#messageHeader {
    background-color: #F20 !important;
}

imebro · November 3, 2024 at 12:41 PM

Ich habe soeben versucht, beim 2. Code (siehe oben Nr. 2) per "hover" auch die Tabs/Buttons dort bei hover anders einzufärben.

Leider funktioniert das nicht. Ich sah es schon in der CSS-Datei, da das Wort "hover" dort nicht automatisch in oranger Schrift formatiert wurde, wie es bei anderen Codeteilen ist... Daher dachte ich mir schon, dass das wohl nicht funktionieren wird.

Was muss ich denn stattdessen eingeben, um die Buttons innerhalb dieses Bereiches anpassen zu können?

Grüße,
imebro

dharkness21 · November 3, 2024 at 1:08 PM

Quote from imebro

da das Wort "hover" dort nicht automatisch in oranger Schrift formatiert wurde

Schau ganz genau hin, nicht hover, sondern :hover.

imebro · November 3, 2024 at 2:44 PM

Danke dharkness21

Ich habe es jetzt korrekt eingegeben. Aber jetzt verändert sich beim hovern der komplette Hintergrund des ganzen Bereiches und nicht nur der Hintergrund der Tabs in diesem Bereich. Ich meine die Tabs "Antworten, Weiterleiten, Archivieren...". Siehe in Post #13 das zweite Foto.

Im Moment ändert sich beim hovern der Hintergrund ein kleines bisschen... vielleicht etwas mehr ins grau. Aber das kommt wahrscheinlich von einer anderen Einstellung her.

Grüße,
imebro

dharkness21 · November 3, 2024 at 3:09 PM

Quote from imebro

Ich meine die Tabs "Antworten, Weiterleiten, Archivieren...". Siehe in Post #13 das zweite Foto.

Das ist ja auch eine ganz andere Baustelle, die Button brauchen ihr eigenes CSS, das sähe dann so ↓ aus.

CSS

#starMessageButton,
#header-view-toolbar > toolbarbutton,
#header-view-toolbar > toolbaritem > toolbarbutton {
    background-color: #0082FC !important;
    color: #FFF !important;
}
#starMessageButton:hover,
#header-view-toolbar > toolbarbutton:hover,
#header-view-toolbar > toolbaritem > toolbarbutton:hover {
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

Display More

Grisu2099 · November 3, 2024 at 3:59 PM

Quote from imebro

Ich meine die Tabs "Antworten, Weiterleiten, Archivieren...

Bitte gewöhne dir die richtigen Begriffe an: Tabs sind nur die "Reiter" Kalender, Adreßbuch usw. Alles andere da oben sind Buttons oder Menüpunkte (Datei, Bearbeiten, Ansicht usw.). Das vereinfacht die Kommunikation erheblich...

imebro · November 3, 2024 at 4:56 PM

Danke dharkness21 für den Code. Habe es jetzt umgesetzt und hat super funktioniert.

Grisu2099 Da hast Du Recht. Ich werfe das irgendwie immer durcheinander... sorry

Danke auf jeden Fall für die super Hilfe...

Grüße,
imebro

Menübereich farblich anpassen

Thunderbird 153.0.3 veröffentlicht

Thunderbird 153.0.3 ESR veröffentlicht

Thunderbird 140.13.0 ESR veröffentlicht