Menübereich farblich anpassen

dharkness21

Zitat von imebro

Was meinst Du dharkness21 mit dem Verfassenfenster?

Das Fenster in dem Du neue E-Mails verfasst.

Grisu2099

Zitat von dharkness21

Wie sieht denn Dein Verfassen-Fenster aus?

...und die internen Seiten (Einstellungen, Konten-Einstellungen etc...)?

dharkness21

Zitat von Grisu2099

Einstellungen

Du meinst das ↓?

Grisu2099

Ja, aber nicht so eckig...

dharkness21

Zitat von Grisu2099

Ja, aber nicht so eckig...

Wo ist denn das Icon von Auf Mobilgerät exportieren geblieben?

Grisu2099

Als ich das angepaßt habe, gabs den Button noch nicht...

Muß ich bei Gelegenheit noch mal ran...

imebro

Also diese Seiten sehen bei mir... sagen wir... klassisch aus.

Und so ist es für mich auch OK. Mir ging es eher um den oberen Teil... also die Menüs. Aber da ich die Farben an die Systemfarben angepaßt hatte, wiederholen sich die Farben in den internen Seiten auch an ein paar Stellen, wie Ihr seht.

Grüße,
imebro

Sehvornix

Wenn die jeweiligen Anpassungen die hier gezeigt werden einen gemeinsamen Nenner haben, dann mMn doch immer wieder weg vom s. g. Flatdesign, hin zur bis vor einiger Zeit üblichen klaren Erkennbarkeit der GUI-Bedienelemente und schlicht mehr Kontrast. Für mich ein weiteres klares Indiz, dass Flatdesign ein Irrwg ist und nichts, aber auch gar nichts mit 'Form follows function' zu tun hat. Die nächste Iteration von Flatdesign sind vermutlich weiße Button mit weißer Schrift auf weißem Grund o. s. ä.. Oder Fensterrahmen, die man gefühlt 1 cm neben dem gerade noch optisch auszumachenden Rahmen mit der Maus 'virtuell' greifen muss.

Ist ja eigentlich logisch, dass sich die Einstellungsdialoge auch anpassen lassen. Trotzdem neu für mich. Danke dafür und gerne mehr davon.

</OT>

dharkness21

Zitat von Sehvornix

Danke dafür und gerne mehr davon.

Inwiefern mehr davon?

imebro

Hallo nochmal,

hmmm... ich habe den Betrag von Dir Sehvornix nicht so wirklich verstanden. Was genau möchtest Du damit sagen?
Und... die Frage von dharkness21 würde mich auch interessieren.

Ich jedenfalls bin sehr froh mit meinem Design, welches ich nun im TB habe.
Wahrscheinlich ist diese Frage auch einen neuen Thread wert (oder eben nicht).

Und zwar fiel mir heute Morgen die Frage ein "könnte ich jetzt aus meinem neuen Design auch ein Theme erstellen?".
Das würde mich interessieren und wenn ja, wie man das macht. Aber ich kann gerne auch einen neuen Thread dazu erstellen.

Grüße,
imebro

graba

Zitat von imebro

Aber ich kann gerne auch einen neuen Thread dazu erstellen.

Das empfehle ich auch.

imebro

Danke graba
Ich habe HIER jetzt einen neuen Therad dazu erstellt.

Falls jemand von hier dort auch nochmal helfen mag... sehr gerne

Grüße,
imebro

DarkCorri53i

Zitat von dharkness21

Du meinst das ↓?

Hallo dharkness,

könntest du mir deinen Code für die Einstellungen in Beitrag #83 verraten, wäre supi. Hast du die Konten-Einstellungen farblich auch so verändert wie die Einstellungen? Wenn ja wäre der Code auch willkommen.

Gruß

Markus

dharkness21

Zitat von DarkCorri53i

könntest du mir deinen Code für die Einstellungen in Beitrag #83 verraten, wäre supi. Hast du die Konten-Einstellungen farblich auch so verändert wie die Einstellungen? Wenn ja wäre der Code auch willkommen.

Den baue ich gerade neu auf, der ist ein wenig groß geworden, das geht auch mit weniger CSS-Voodoo, dann kann ich ihn Dir gerne zukommen lassen.

imebro

Hallo nochmal in diesem Thread,

nachdem ich meine neue Optik in TB nun einige Zeit lang genutzt habe, fällt mir doch noch ein kleines Problem auf.
Ich habe mal einen Screenshot angehängt...

Wenn ich den Posteingang aktiviert habe, dann eine Email anklicke, um sie lesen zu können... dann aber z.B. auf eine leere Stelle in dieser Email klicke, dann verändert sich die Farbe der markierten Email in ein helles grau [#d4d3d8], siehe hierzu den roten Pfeil im Screenshot.

Hier würde ich dann gerne die gleiche Farbe einsetzen, die ich auch bei der ersten Markierung der Email nutze [#c30052]... die Farbe soll sich also nicht verändern, wenn ich aus dem Emailbereich rausklicke.

Leider habe ich in der "userChrome.css" nirgendwo eine Möglichkeit gefunden, wo ich diese Farbe hinterlegt habe, bzw. hinterlegen könnte.

Könnt Ihr da bitte nochmal helfen?

Hier mein aktueller Code der "userChrome.css":

CSS

/* ORDNERFARBEN: */
/* nicht neue, aber ungelesene Mails, wenn Posteingang NICHT markiert ist */
li.unread > .container > .name {
   color: maroon !important;
}
/* neue Mails, wenn Posteingang beim Start von TB NICHT ausgewählt (markiert) ist */
li.new-messages > .container > .name {
   color: #c30052 !important;
}
/* nicht neue, aber ungelesene Mails, wenn Posteingang markiert ist */
li.unread.selected > .container > .name {
   color: maroon !important;
}
/* neue Mails, wenn Posteingang beim Start von TB ausgewählt (markiert) ist */
li.new-messages.selected.current > .container > .name {
   color: #c30052 !important;
}
/* hellroter Hintergrund bei der ganzen Zeile der neu eingegangenen Email */
tr[data-properties~="new"] :where(td) {
    appearance: none !important;
    background-color: #ecd0de !important;
}

/* ========================================================================== */

/* ---Fuehrungslinien im Verzeichnisbaum 128.x--- */
li:not([data-server-type]) > .container div.twisty {
border-right: 1px solid #c30052 !important; /* Linie Dicke und Farbe */
margin-right: 8px !important;
margin-left: -8px !important;
margin-top: -16px !important; /* negativer schiebt Linie hoch */
} 
li:not([data-server-type]) > .container .icon::before {
content: '--' !important;
color: #c30052 !important;	/* Farbe der Querlinie */
margin-left: -9px !important;
}
li:not([data-server-type]) > .container div.twisty img.twisty-icon {
margin-bottom: -16px !important; /* negativer zieht Winkel Icon runter */
}

/* ========================================================================== */


/* AKTIVE Reiter (Tabs) >> Menü: "Posteingang, Kalender..." */
.tabmail-tab {
	border-radius: 1px 1px 0 0 !important;  
	min-height: 36px !important;
	max-height: 36px !important;
	padding: 0 !important; 
}

/* Hintergrundfarbe Reiter/Tabs (dunkelrot) */
.tabmail-tab[selected="true"] .tab-background {
	background-color: #c30052 !important;
	background-image: none !important;
}
/* Schriftfarbe  */
.tabmail-tab[selected="true"] .tab-text.tab-label {
	color: #ffffff !important;
}

/* Schriftfarbe */
.tabmail-tab:not([selected]) .tab-text.tab-label {
	color: #c30052 !important;
	/* font-weight: bold !important;  */ /* Schrift fett */
}

/* NICHT aktive Reiter (Tabs( >> Menü: "Posteingang, Kalender..." */
/* Hintergrundfarbe (mittelrot) */
.tabmail-tab:not([selected]) .tab-background {
	background-color: #ecd0de !important;
}

/* Farben und Linien der Ränder um die Reiter (Tabs) herum */
.tabmail-tab:not([selected]) {
	border-right: 1px solid #c30052 !important;
}

.tab-line {
	display: none !important;
}

/* Nicht aktive Tabs bei HOVER */
.tabmail-tab:not([selected]):hover .tab-background {
	background-color: #c30052 !important; 
}
/* Schriftfarbe */
.tabmail-tab:not([selected]):hover .tab-text {
	color: #FFFFFF !important;
}
	
/* ========================================================================== */	
	
/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-button {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 20px !important;
	height: 20px !important;
	/* margin: 0 3px 0 -3px !important; */
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-close-button {
	margin: 1px -1px 0px 0px !important;  /* oben, rechts, unten links */
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-button {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 20px !important;
	height: 20px !important;
	/* margin: 0 4px 0 -3px !important; */
}
	
/* ========================================================================== */
	
	
/***** mittleres Menü "Datei, Bearbeiten, Ansicht..." *****/
/* >> hier wird der Hintergrund re. NEBEN diesem Menü eingefärbt */
/* >> ebenso wird die Höhe des Menüs angepaßt */
#toolbar-menubar {
	background-color: #ecd0de !important;
	color: #c30052 !important;
	min-height: 28px !important;  /* Höhe dieses Menüs */
    max-height: 28px !important;
}
	
	
/***** mittleres Menü "Datei, Bearbeiten, Ansicht..." anpassen. *****/
/* >> Anpassung der Farben u. Hintergrund des eigentlichen Menüs */
#mail-menubar > menu,
#viewSource-main-menubar > menu {
	border-right: 1px solid #c30052 !important;
    background-color: #ecd0de !important;
    color: #c30052 !important;
}
/* Hintergrund bei hover */
	#mail-menubar > menu:hover,
	#viewSource-main-menubar > menu:hover {
    background-color: #c30052 !important;
    color: #FFFFFF !important;
}

/* ========================================================================== */
	
/***** oberes Menü (Abrufen, Verfassen, Chat... etc. *****/
/* >> hier wird der komplette Hintergrund (Container) des oberen Menüs eingefärbt */
#unifiedToolbarContainer {
	background-color: #c30052 !important;
}

/***** oberes Menü: Button und Toolbarbutton von #unifiedToolbar anpassen. *****/
/* >> die Schaltfläche links und das Hamburgermenü rechts (3 Striche) */
#unifiedToolbar > toolbarbutton {
    background-color: #c30052 !important;
    color: #FFFFFF !important;
}
/* die beiden Schaltflächen li + re bei hover */
#unifiedToolbar > toolbarbutton:hover {
    background-color: #ecd0de !important;
    color: #c30052 !important;
}

/* Hintergrund und Schriftfarbe des oberen Menüs (Abrufen, Verfassen, Chat...) */
#unifiedToolbarContent > li > div > button {
    color: #FFFFFF !important;
}
/* Hintergrund und Schriftfarbe des oberen Menüs (Abrufen, Verfassen, Chat...) bei hover */
#unifiedToolbarContent > li > div > button:hover {
    background-color: #ecd0de !important;
    color: #c30052 !important;
}

/* ========================================================================== */

/* Hintergrund um das untere Menü herum (Posteingang, Kalender, Adressbuch...) */
#tabs-toolbar {
    background-image: none !important;
    background-color: #ecd0de !important;
}

/* ========================================================================== */

/* Hintergrund des Bereichs bei eingegangener Email --> "Von, An, Betreff" */
#messageHeader {
	border-bottom: 1px solid #c30052 !important;
	border-top: 1px solid #c30052 !important;
    background-color: #e6bfd2 !important;
	color: #000 !important;
}

/* ========================================================================== */

/* Hintergrund und Farbe der Buttons rechts bei "Antworten, Weiterleiten, Archivieren..." */
#starMessageButton,
#header-view-toolbar > toolbarbutton,
#header-view-toolbar > toolbaritem > toolbarbutton {
    background-color: #c30052 !important;
    color: #FFF !important;
}
#starMessageButton:hover,
#header-view-toolbar > toolbarbutton:hover,
#header-view-toolbar > toolbaritem > toolbarbutton:hover {
    background-color: #ecd0de !important;
    color: #c30052 !important;
}

/* ========================================================================== */

/*  :::: Zebrastreifen bei den Nachrichten im Posteingang ::::  */
/* background-image: gradient erzeugt einen Verlauf (einen weichen Übergang zwischen zwei 
oder mehr Farben) rein auf der Basis von HTML und CSS ohne Bild */
#threadTree tr:nth-child(2n) {
background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08))
/* background-image:linear-gradient(to bottom left, yellow, red) */
/* background-image:linear-gradient(0deg, yellow 5%, orange 70%) */
}
.tree-table  { 
 background-color: #f9e5ee !important;  
}


/* =========================================================================== */

/* Erweiterung "Lightning Calendar Tabs": Den Hintergrund der Tabs farblich anpassen */

#calendar-view-box > arrowscrollbox {
    border-bottom: 1px solid #B2B2B2 !important;
}
.lightning-calendar-tabs-tabs-container > tabbox {
    max-width: 828px !important;
    margin: 0 !important;
}
.lightning-calendar-tabs-tabs-container > tabbox > tabs {
    max-width: 823px !important;
    border: 0 !important;
    border-right: 1px solid #B2B2B2 !important;
    border-left: 1px solid #B2B2B2 !important;
    background-image: none !important;
    padding: 0 0 0 1px !important;
}
.lightning-calendar-tabs-tabs-container > tabbox > tabs > tab {
    border: 1px solid #B2B2B2 !important;
    margin: 1px 1px 1px 0 !important;
}
.lightning-calendar-tabs-tabs-container > tabbox > tabs > tab.past {
    background-color: grey !important;
    color: #FFF !important;
}
.lightning-calendar-tabs-tabs-container > tabbox > tabs > tab.future {
    background-color: #c30052 !important;
    color: #FFF !important;
}
.lightning-calendar-tabs-tabs-container > tabbox > tabs > tab.current {
    background-color: #c30052 !important;
    color: #000 !important;
}
.lightning-calendar-tabs-tabs-container > tabbox > tabs > tab.future[label~="Januar"] {
    background-color: #ecd0de !important;
    color: #000 !important;
}
.lightning-calendar-tabs-tabs-container > tabbox > tabs > tab[selected="true"] {
    font-weight: normal !important;
    background-image: none !important;
    background-color: #c30052 !important;
    color: #FFF !important;
}
.lightning-calendar-tabs-tabs-container > tabbox > tabs > tab:hover,
.lightning-calendar-tabs-tabs-container > tabbox > tabs > tab[selected="true"]:hover {
    border: 1px solid #0082FC !important;
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

Alles anzeigen

Grüße,

imebro

imebro

hmmm... hat niemand von Euch ne Idee dazu oder war´s vielleicht gestern zu "feucht" beim Feiern?

Grüße und ein frohes neues Jahr für Euch Alle,

imebro

dharkness21

Zitat von imebro

hmmm... hat niemand von Euch ne Idee dazu oder war´s vielleicht gestern zu "feucht" beim Feiern?

Nicht so wirklich, bitte teste mal das ↓ Schnipsel.

CSS

#threadTree:not([:focus-within]) tr:nth-child(2n).selected {
    background: none !important;
    background-color: #c30052 !important;
}

Bastler

Zitat von imebro

dann aber z.B. auf eine leere Stelle in dieser Email klicke

Es ist wohl eine "leere Stelle" in der Zeile der Nachrichtenliste gemeint.
Es gibt beim Klicken in eine Zeile eigentlich keine bevorzugte leere Stelle.

Probiere folgenden Code, am besten unter Dein Paket mit den "Zebrastreifen". (Kausaler Zusammenhang zur Region.)

CSS

/* ---gwaehlte Nachricht in Nachrichtenliste--- */
#threadTree tr.selected,
#threadTree tbody .selected {
    background-image: none !important;
    background-color: #c30052 !important;
    color: #ffffff !important;
}

imebro

Danke Euch für die weitere Hilfe

dharkness21

Dein Code hat leider nichts verändert...

Bastler

Mit Deinem Code hat es funktioniert. Die Email bleibt nun weiterhin in der dunkelroten Farbe hinterlegt... genau so sollte es sein.

Danke und schöne Grüße,

imebro

Bastler

Zitat von imebro

Mit Deinem Code hat es funktioniert.

Das freut mich. Wenn in Deinem Thema alles getan ist, setze noch mit Doppelklick in das Kästchen auf "Erledigt"

Menübereich farblich anpassen

imebro 2. Januar 2025 um 12:29

Thunderbird 128.5.2 ESR veröffentlicht

Thunderbird 115.18.0 ESR veröffentlicht