Tab farbe ändern für Active, hover

Tapo · May 18, 2023 at 9:12 PM

Hallo,

welches CSS muß man nutzen damit die Tabs in der Farbe geändert werden kann.

Active tabs, hover Tabs und die blaue Linie bei den activen Tab 2 Pixel groß an staat 1 pixel.

Danke

Bastler · May 18, 2023 at 10:34 PM Best Answer

Hallo,

bitte probieren:

CSS

/* ---Linie ueber aktivem Tab--- */
.tab-line {
height: 2px !important;
}

/* ---inaktive Tabs--- */
.tabmail-tab:not([selected]) {
background-color: lightgray !important;
}

/* ---Tab Mousehover--- */
.tabmail-tab:not([selected]):hover {
  background-color: coral !important;
}

/* ---aktiver Tab--- */
.tab-background[selected="true"] {
-moz-appearance: none !important;
background-color: lightblue !important;
}

Display More

Tapo · May 18, 2023 at 11:00 PM

Danke.

Tapo · May 21, 2023 at 1:34 PM

Hallo,

ich dachte wenn man Yellow als Farbe eingibt ist es auch Yellow ?

CSS

/* ---inaktive Tabs--- */
.tabmail-tab:not([selected]) {
background-color: lightgray !important;
}

/* ---Tab Mousehover--- */
.tabmail-tab:not([selected]):hover { 
  background-color: yellow !important;
}

/* ---aktiver Tab--- */
.tab-background[selected="true"] {
-moz-appearance: none !important;
background-color: lightblue !important;
}

Display More

wiso ist das kein Yellow sondern GreenYellow ?

milupo · May 21, 2023 at 2:25 PM

Hast du noch anderen Code, sodass zwei Regeln auf das gleiche Element zugreifen?

dharkness21 · May 21, 2023 at 2:35 PM

Quote from milupo

sodass zwei Regeln auf das gleiche Element zugreifen?

Wobei die letzte normalerweise gewinnt.

milupo · May 21, 2023 at 2:46 PM

Es sieht tatsächlich etwas seltsan aus.

Zitronella · May 21, 2023 at 2:57 PM

Weil der andere (hellblaue) Hintergrund noch durchscheint schätze ich.

Probiere mal:

CSS

/* ---inaktive Tabs--- */
.tabmail-tab:not([selected]) {
background-color: lightgray !important;
}

/* ---anderen (hellblauen) Hintergrund entfernen wenn über Tab gehovert wird---*/
.tabmail-tab:hover .tab-background{
background:transparent!important;
}

/* ---Tab Mousehover--- */
.tabmail-tab:not([selected]):hover { 
  background-color: yellow !important;
}

/* ---aktiver Tab--- */
.tab-background[selected="true"] {
-moz-appearance: none !important;
background-color: lightblue !important;
}

Display More

milupo · May 21, 2023 at 3:11 PM

Ja, jetzt kann man von Gelb reden.

Bastler · May 21, 2023 at 3:27 PM

Quote from milupo

Hast du noch anderen Code, sodass zwei Regeln auf das gleiche Element zugreifen?

Hallo,

mit Sicherheit, siehe Beiträge Historie, da wird eine Menge additives Stückwerk sein.

Hallo Tapo , stelle einmal Dein gesamtes Werk hier ein, damit die sachkundige Gemeinde nach überflüssigen

oder sich gegenseitig behindernden Einträgen sehen kann.

Zitronella · May 21, 2023 at 3:32 PM

Nur zur Info: Ich habe natürlich keinen weiteren Code benutzt, und die Unterschiede sind glaub klar ersichtlich.

Allerdings scheint der Themenersteller wirklich noch was anderes zu nutzen, denn die Schriftfarbe ist bei ihm weiß in den Tabs anstatt dunkel (wie bei mir)

Zitronella · May 21, 2023 at 4:45 PM

Wenn die Linie über dem gehoverten gelben Tab auch noch farblich angepasst werden soll, dann diesen Code noch dazu:

CSS

/* ---Linie über Tab wenn  gehovert wird--- */
.tab-line:not([selected="true"]) {
background-color: #ffcd00!important;}

sähe dann so aus:

Farbe kannst zb. auf https://www.color-hex.com/color/ffcd00 aussuchen und dann entsprechend ändern.

Tapo · May 21, 2023 at 10:00 PM

Quote from Zitronella

Weil der andere (hellblaue) Hintergrund noch durchscheint schätze ich.

Probiere mal:

CSS

/* ---inaktive Tabs--- */
.tabmail-tab:not([selected]) {
background-color: lightgray !important;
}

/* ---anderen (hellblauen) Hintergrund entfernen wenn über Tab gehovert wird---*/
.tabmail-tab:hover .tab-background{
background:transparent!important;
}

/* ---Tab Mousehover--- */
.tabmail-tab:not([selected]):hover { 
  background-color: yellow !important;
}

/* ---aktiver Tab--- */
.tab-background[selected="true"] {
-moz-appearance: none !important;
background-color: lightblue !important;
}

Display More

mit disem Code passt es.

Danke.

Quote from Bastler

Hallo Tapo , stelle einmal Dein gesamtes Werk hier ein, damit die sachkundige Gemeinde nach überflüssigen
oder sich gegenseitig behindernden Einträgen sehen kann.

naja könnte ein wneig lang werden der Post.

da ich das alles in einzelnen CSS Dateien aufgeteilt habe wie zb: tab.css, eMail_Liste.css usw

aber was die Tab betreffen habe ich nur den CSS aus dem Post #4 genommen.

aber es passt ja jetzt mit dr Farbe.

Soll ich trotzdem komplettes CSS posten ?

Bastler · May 21, 2023 at 10:26 PM

Quote from Tapo

da ich das alles in einzelnen CSS Dateien aufgeteilt habe wie zb: tab.css, eMail_Liste.css usw

D.h. es werden die einzelnen CSS Dateien mit dem Import-Befehl eingelesen?

Quote from Tapo

aber was die Tab betreffen habe ich nur den CSS aus dem Post #4 genommen.

Dann kontrolliere selbst, ob in den anderen CSS Dateien nicht noch einmal verwendete Bezeichner angesprochen werden.

Die Methode mit einzelnen Dateien kann auch ein Fallstrick sein.

Eine Suche auf Duplikate mit Strg + F im Editor ist so Datei übergreifend nicht möglich.

Tapo · May 21, 2023 at 10:34 PM

Quote from Bastler

D.h. es werden die einzelnen CSS Dateien mit dem Import-Befehl eingelesen?

ja so in der Art sieht meine "userChrome.css"

Quote

@import "css/Allgemein.css";

@import "css/eMail_Liste.css";

@import "css/Menüleiste.css";
@import "css/Toolbarbuton.css";

ok werde ich alles durchsuchen.

Tapo · May 22, 2023 at 4:27 PM

Hallo,

so ich habe komplett aufgeräumt und es lag tatsächlich irgendwo an mein CSS.

jetzt hätte noch eine Frage was die Tabs betreffen.

Da wo ich die Pfeile hingemacht habe die kleinen Striche sollen noch weg.

ich weis leider nicht wie man diese Striche nennt deswegen die Pfeile

und hier mein CSS.

CSS

.tab-background {   
    background-color:transparent !important;
    border-radius: 4px 4px 0 0 !important;
    }

.tab-background[selected] {
      background-color:#f9f9fa !important;
    border-top:3px solid #00feff !important;
    }
    
.tab-label[selected] {
    font-weight:700 !important;
    color:#0c0c0d !important;
    }

.tabmail-tab:hover .tab-background:not([selected=true]) {
  border-top:3px solid #00feff !important;
}

.tab-line {
    display:none !important
    }

Display More

Bastler · May 22, 2023 at 4:31 PM

Quote from Tapo

Da wo ich die Pfeile hingemacht habe die kleinen Striche sollen noch weg.

Hallo,

versuche folgendes Paket, zum Entfernen der Trennlinien zwischen den Tabs

CSS

/* ---Tab Trennstriche ausblenden--- */
.tabmail-tab::after,
.tabmail-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: unset !important;
  width: unset !important;
}

Wenn allerdings auch die Rahmenstücke der Tabs selbst, beidseitig der Tabs zusätzlich weg sein sollen, dann:

CSS

/* ---Tab Border beidseitig unsichtbar--- */
.tab-background {
  border-left: 0 !important;
  border-right: 0 !important;
}

Obige Zeilen können auch zu Deinem Code ab Zeile 3 hinzugefügt werden, müssen nicht unbedingt separat geschrieben stehen.

Es wird ja die Klasse .tab-background schon angesprochen.

Tapo · May 28, 2023 at 1:39 PM

och Danke.

das hier hatte ich vergessen

Bastler · May 28, 2023 at 2:17 PM

Quote from Tapo

das hier hatte ich vergessen

Wenn Du etwas an den Start bringst, solltest Du vielleicht in kürzeren Abständen hierein schauen.

Tab farbe ändern für Active, hover

Tapo May 18, 2023 at 11:00 PM

Community-Bot September 3, 2024 at 9:00 PM

Thunderbird 154.0 veröffentlicht

Thunderbird 153.1.0 ESR veröffentlicht

Version 140.14.0 ESR behebt Sicherheitslücken

Similar Threads

Menüleiste bestimmten Eintrag farbig verändern

Scrollbalken inkl Pfeile ändern ?

CSS "even and odd" Regeln

CSS in TB 102.1.0 ohne Funktion (1)

TB 91.7.0 (64-Bit) - schliessen, kleiner usw andere Farbe

Fensterlayout der Nachrichtenvorschau Schriftfarbe gleich Hintergrundfarbe