Internet

Tab Farben ändern im Firefox Browser



Wer gerne mit vielen Tabs im Browser arbeitet, für den wäre es evtl. ganz praktisch, wenn diese sich farblich besser unterscheiden würden. Gemeint ist damit der Unterschied zwischen gelesenen und ungelesenen Tabs, bzw. Tabs die im Hintergund aufgerufen werden. In der Standardansicht hat nur der aktive Tab einen helleren Hintergrund.

So sieht das mit den Tabs standardmäßig aus:

standard 1 - Tab Farben ändern im Firefox Browser

Tab Farben ändern im Firefox

Bis zur Firefox Version 56 war es möglich, solche Änderungen durch diverse Erweiterungen zu erreichen.

Das eine oder andere 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 optischen Änderung am Firefox mit einer userContent.css bzw. einer userChrome.css Datei erstellen.

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

userChrome.css erstellen

Und hier mal eine Erklärung wie man das mit dem CSS-Code dann machen muss.

Als erstes gehen wir dazu in den Profilordner vom Firefox, und öffnen den dort selber angelegten Ordner chrome.

Dann im Ordner chrome die userChrome.css Datei öffnen.

In diese Datei tragen wir nun folgenden CSS Code ein:

/* Aktiver Tab */

.tabbrowser-tab[selected] .tab-content {
background: red !important;
color: white !important;
}
/* Tab ungelesen */

.tabbrowser-tab[pending] .tab-content{
background: blue !important;
color: white !important;
}
/* Tab gelesen */

.tabbrowser-tab .tab-content {
background: green !important;
color: white !important;
}
/* Senkrechte Striche neben den Tabs weg */

.tabbrowser-tab::after, .tabbrowser-tab::before {
margin-inline-start: 0px!important;
border-left: 0px solid!important;
border-image:none!important;
border-image-slice: 0!important;
width: 0px!important;
box-sizing: border-box;
opacity: 0!important;
}

(Dazu am besten den Text kopieren und in die userChrome.css wieder einfügen)

So sieht der Code dann in der userChrome.css Datei aus:

css code - Tab Farben ändern im Firefox Browser

Hinweis:
Ich habe zwecks Vorschau mal kräftige Farben verwendet, die aber nach Belieben ausgetauscht werden können. Nach jeder Änderung muss dann der Firefox neu gestartet werden.



Damit man später noch genau weiß was der jeweilige CSS 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 bzw. seine Funktion hat.

Tab Farben ändern im Firefox

Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.

Und so sieht das dann mit den verschiedenen Tab Farben aus:

bunt - Tab Farben ändern im Firefox Browser

Aktiver Tab = rot
Gelesener Tab = grün
Ungelesener Tab = blau

Möchte man eines Tages diese Änderung nicht mehr nutzen, dann reicht es aus, den CSS Code in der userChrome.css wieder zu löschen.

Danach noch einen Neustart vom Browser machen, und die Farbe der Tabs hat wieder die Standardansicht.

2,80 EUR
[Updated Version] VICTSING Mini Maus kabellos Wireless Mouse, 2.4G Funkmaus, 2400 DPI 6 Tasten Optische Mäuse mit USB Nano Empfänger Für PC Laptop, Microsoft Pro, Office Home,Schwarz
2.532 Bewertungen
[Updated Version] VICTSING Mini Maus kabellos Wireless Mouse, 2.4G Funkmaus, 2400 DPI 6 Tasten Optische Mäuse mit USB Nano Empfänger Für PC Laptop, Microsoft Pro, Office Home,Schwarz
  • 1. Das Aussehen des Patents : Diese Maus durch die EU aussehen Zertifizierung, die Welt nur in VicTsing verkauft, der Rest von den Verkäufern sind gefälscht
  • 2. 2.4Gwireless Datenübertragung & 5 DPI Schalter und angepasste Funktion : 2,4 GHz Wireless - eine Erfahrung sicherer und präziser als das traditionelle FMRadioSystem mit einer erhöhten Arbeitsabstand bis 15 m. Es braucht nichtlaufwerk,Plug & Play. 5 DPI-Schalter (800, 1200, 1600, 2000, 2400) ändern Sie die Geschwindigkeit der Maus frei.

Wer jetzt noch den nicht aktiven Tabs eine andere Schriftart geben möchte, der kann das mit diesem CSS Code zusätzlich machen:

/* Inaktive Tabs Schrift kursiv */

.tabbrowser-tab:not([selected]) {
font-style: italic !important;
}

Tab Farben ändern im Firefox

Hat man die Einstellung im Firefox, dass sich Tabs im Hintergrund öffnen sollen, dann kann man diesen eine weitere Hintergrundfarbe mit diesem zusätzlichen CSS Code geben:

/* Tab der im Hintergrund geladen wurde ( wenn so eingestellt), und noch nicht aktualisiert wurde */

.tabbrowser-tab[notselectedsinceload] .tab-content {
background: yellow !important;
color: black !important;
}

Diese Tabs haben dann einen gelben Hintergrund. Erst wenn man so einen Tab anklickt und ihn dann noch aktualisiert, wird dieser ebenfalls grün(gelesen).

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

userChrome.css aufräumen

Dieser Tipp kann bzw. sollte auch auf die Datei userContent.css angewandt werden.

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

 

 

Tags
Mehr anzeigen

Schreibe einen Kommentar

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

Back to top button