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
Tab farbe ändern für Active, hover
-
- 102.*
- Windows
-
Tapo -
18. Mai 2023 um 21:12 -
Geschlossen -
Erledigt
-
- Hilfreichste Antwort
Hallo,
bitte probieren:
CSS
Alles anzeigen/* ---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; } -
-
Hallo,
ich dachte wenn man Yellow als Farbe eingibt ist es auch Yellow ?
CSS
Alles anzeigen/* ---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; }
wiso ist das kein Yellow sondern GreenYellow ?
-
Hast du noch anderen Code, sodass zwei Regeln auf das gleiche Element zugreifen?
-
sodass zwei Regeln auf das gleiche Element zugreifen?
Wobei die letzte normalerweise gewinnt.
-
Es sieht tatsächlich etwas seltsan aus.
-
Weil der andere (hellblaue) Hintergrund noch durchscheint schätze ich.
Probiere mal:
CSS
Alles anzeigen/* ---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; } -
Ja, jetzt kann man von Gelb reden.
-
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.
-
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)
-
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.
-
Weil der andere (hellblaue) Hintergrund noch durchscheint schätze ich.
Probiere mal:
CSS
Alles anzeigen/* ---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; }mit disem Code passt es.
Danke.
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 ?
-
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?
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.
-
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
Alles anzeigen.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 } -
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.
-
och Danke.
das hier hatte ich vergessen
-
das hier hatte ich vergessen
Wenn Du etwas an den Start bringst, solltest Du vielleicht in kürzeren Abständen hierein schauen.
-
Community-Bot
3. September 2024 um 21:00 Hat das Thema geschlossen.
