Internet

Firefox dem aktiven Tab einen farblichen Hintergrund geben




Bis zur Firefox Version 56 war es möglich den Tabs mit Hilfe einer Erweiterung wie zum Beispiel TabMixPlus oder dem Classic Theme Restorer (und anderen) einen farblichen Hintergrund zu geben, um sie besser auseinander halten zu können.

Das ist seit der Firefox Version 57 nicht mehr möglich, da Mozilla dafür (zumindest noch) keine Schnittstelle mehr zur Verfügung stellt.

Aus diesem Grund muss man jetzt diese optischen Änderungen am Firefox mit einer userChrome.css Datei erstellen.

Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

userchrome-css erstellen

In unserem Beispiel soll nun der aktive Tab zum besseren Erkennen eine andere Hintergrundfarbe bekommen.

 

Standardmäßig haben die Tabs alle einen grauen Hintergrund, und nur der aktive Tab einen hellgrauen mit einen Rahmen.

In unserem Beispiel geben wir dem Hintergrund des aktiven Tabs die Farbe orange.

Dazu gehen wir in den Profilordner vom Firefox, öffnen den dort angelegten Ordner chrome, und klicken dann auf die Datei: userChrome.css und öffnen sie.

Dann fügen wir diesen CSS Code in die Datei ein:

/* Aktiver Tab Schrift fett + schwarz */
.tabbrowser-tab[selected="true"]{
font-weight:bold;
color: black!important;
}

/* Aktiver Tab Hintergrund orange */
.tab-background[selected="true"]{
background: orange!important;
}

Damit man später noch genau weiß was der jeweilige Code bedeutet, sollte man sich über dem CSS Code einen aussagekräftigen Hinweis erstellen.

Dazu schreibt man vor dem Text erst einen Slash und einen Stern /* dann die Beschreibung der Funktion…und als Abschluss schreibt man diesmal erst den Stern und dann das Slashzeichen */

Die Zeichen vorher und nachher bedeuten, dass der Text auskommentiert ist, und somit keinen Einfluss auf den CSS Code haben.

Die CSS Bezeichnungen sind immer in englischer Sprache.

Sollte schon ein anderer Code in der userChrome.css vorhanden sein, dann schreibt man den neuen Code einfach unten drunter.

Hier mal ein Beispiel wie das bei einem schon vorhandenen Code aussieht.

Nachdem wir den Code eingetragen haben, schließen und speichern wir die Datei userChrome.css.

Sollte der Firefox noch geöffnet sein bitte schließen und neu starten, denn erst nach einem Neustart wird der CSS Code aktiviert.

Danach sieht der aktive Tab dann so aus.

 

Die Hintergrundfarbe für den Tab (orange) bzw. die Textfarbe (black) kann man beliebig austauschen.

Wenn man keine Fettschrift möchte reicht es aus, einfach den Eintrag font-weight:bold; aus dem Code zu entfernen.

Hier mal eine Seite mit diversen Farbcodes.

Farbcodes

Weitere Seiten mit Farbcodes lassen sich mit der jeweils eingestellten Suchmaschine im Browser finden.

Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte:

userChrome.css aufräumen

Vorteil dadurch, es ist alles viel übersichtlicher und man findet schneller mal etwas wieder.

 

Mehr anzeigen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.