Mit einer „userChrome.css“-Datei kann man die Benutzeroberfläche von Firefox (Tabs, Adressleiste, Menüs etc.) völlig frei nach seinen Wünschen per CSS anpassen.
Da Mozilla diese Funktion standardmäßig deaktiviert hat, muss man sie zuerst freischalten. Hier ist die Schritt-für-Schritt-Anleitung:
1: „userChrome.css“ in Firefox aktivieren
- Öffne Firefox und gib about:config in die Adressleiste ein. Bestätige das Risiko.
- Suche den Schalter: „toolkit.legacyUserProfileCustomizations.stylesheets“
- Klicke doppelt darauf (oder auf den Pfeil-Button), um den Wert von „false“ auf „true“ zu ändern.
2: Den Profilordner finden
- Gib nun about:support in die Adressleiste ein.
- Suche in der Tabelle nach dem Punkt „Profilordner“ (unter „Allgemeine Informationen“).
- Klicke daneben auf den Button „Ordner öffnen“ (bzw. „Im Finder anzeigen“ bei macOS). Dein Datei-Explorer öffnet sich direkt in deinem aktuellen Firefox-Profil.
3: Den Ordner „chrome“ und die Datei erstellen
- Erstelle in diesem geöffneten Profilordner einen neuen Ordner und nenne ihn exakt:
chrome(alles kleingeschrieben). - Gehe in diesen neuen „chrome-Ordner“.
- Erstelle dort eine neue Textdatei.
- Benenne diese Datei um in:
userChrome.css
Wichtig für Windows-Nutzer: Achte darauf, dass die Datei nicht versehentlich userChrome.css.txt heißt. Du musst im Windows-Explorer unter „Ansicht“ die Option „Dateinamenserweiterungen“ aktiviert haben, um das .txt erfolgreich zu entfernen.
4: CSS-Code einfügen und testen
- Öffne die userChrome.css mit einem beliebigen Texteditor (z. B. Notepad/Editor).
- Füge zum Testen beispielsweise folgenden Code ein, um die Tableiste rot zu färben (nur um zu sehen, ob es klappt):
#TabsToolbar {
background-color: red !important;
}- Speichere die Datei ab.
- Starte Firefox komplett neu (schließen und wieder öffnen).
Wenn die Tableiste jetzt rot ist, wurde alles richtig gemacht! Nun kann man den Test-Code löschen und durch die CSS-Codes ersetzen, den man eigentlich nutzen möchte.