Firefox Farbe und Form der Browser Tabs per userChrome.css Datei verändern - So funktioniert es!

21.02.2019 13:39 Uhr | Zeiram

Über die useChrome.css Datei kann man einige Veränderungen vornehmen und auch wenn vieles davon vielleicht nur Spielerei ist kann man aber auch die Optik verändern wenn man dies will. Wie man zum Beispiel mit der userChrome.css Datei Browser Reiter in Firefox in Form und Farbe neu gestalten kann zeigt dieser kurze Ratgeber.

Wie man die userChrome.css Datei ganz einfach anlegen kann haben wir in diesem Ratgeber bereits erklärt. Den Code den Ihr etwas weiter unten findet kopiert Ihr einfach in diese Datei ein. Habt Ihr dort bereits andere Skripte stehen kopiert Ihr dieses einfach darunter:

/* Tabs rund und farbig gestaltet */
#TabsToolbar .tabbrowser-tab{
background: lightblue !important;
border-radius: 80px !important;
border:none!important;
}

.tab-background[selected="true"] {
background: orange !important;
border-radius: 80px !important;
border:none!important;
}

.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;
}

.tab-line[selected=true] {
display:none!important
}

Danach speichert Ihr das userChrome.css File wieder ab und müsst darauf achten, dass die Dateierweiterung css erhalten bleibt. Wird diese wieder geändert wird das File nicht ausgelesen. Nach den Neustart sollten die Tabs des Browsers oben so aussehen wie auf dem folgenden Beispielbild:

Wer sich traut kann mit den Farben und Radius-Angaben experimentieren und so das Ganze noch an seine eigenen Ideen anpassen. Hat man zu viel experimentiert oder will die alte Optik einfach wieder herstellen muss man den zuvor einkopierten Code einfach wieder aus der Datei userChrome.css löschen.

Hinweis: Text zwischen den Zeichenfolgen /* und */ ist lediglich Info-Text damit man später weiß was der entsprechende Code macht. Diese Texte könnt Ihr wahlweise so ändern wie Ihr wollt, Ihr müsst nur die Markierung am Anfang und Ende stehen lassen, oder auch komplett entfernen.

Meinung des Autors

So kann man mit der userChrome.css die Optik der Reiter an Firefox Browser Tabs verändern.
Oben