Anpassen der Benutzeroberfläche von Firefox mit userChrome.css

Die Benutzeroberfläche von Firefox Quantum ist dank der Datei userChrome.css immer noch extrem anpassbar. Sie können diese Datei bearbeiten, um unerwünschte Menüelemente auszublenden, die Registerkartenleiste unter die Navigationssymbolleiste verschieben, mehrere Zeilen in der Lesezeichensymbolleiste anzeigen und andere Dinge tun, die normalerweise nicht möglich wären.

Wie das funktioniert

Die Datei userChrome.css von Firefox ist eine CSS-Datei (Cascading Style Sheet), die Firefox verwendet. Während Stylesheets normalerweise auf Webseiten angewendet werden, wird dieses bestimmte Stylesheet auf die Benutzeroberfläche von Firefox angewendet. Sie können das Erscheinungsbild und das Layout von allem ändern, was die Webseite iteslf umgibt. Sie können keine Funktionen hinzufügen. Sie können nur das ändern, was bereits vorhanden ist, um es zu ändern, auszublenden oder zu verschieben.

Das hat nichts mit Google Chrome zu tun. "Chrome" bezieht sich auf die Benutzeroberfläche des Webbrowsers, nach der Google Chrome benannt wurde.

Die Datei userChrome.css ist schon lange in Firefox vorhanden, wird jedoch mit Firefox Quantum immer wichtiger. Viele Verbesserungen, die zuvor durch Browser-Add-Ons vorgenommen werden konnten, können jetzt nur durch Bearbeiten der Datei userChrome.css durchgeführt werden.

Wo man Tweaks findet

Wenn Sie CSS-Code verstehen und wie die Benutzeroberfläche von Firefox entworfen wurde, können Sie Ihre eigenen Optimierungen erstellen, Sie können jedoch auch online nur Optimierungen finden. Wenn Sie eine bestimmte Änderung vornehmen möchten, hat wahrscheinlich schon jemand anderes herausgefunden, wie er das tun soll, und hat den Code geschrieben.

Hier sind einige Ressourcen, um Ihnen den Einstieg zu erleichtern:

Beispiel-Tweaks von userChrome.org: Eine kurze Liste interessanter Tweaks, die die Leistungsfähigkeit von userChrome.css demonstrieren.
Classic CSS Tweaks: Ein Repository von userChrome.css Tweaks des Autors der Classic Theme Restorer-Erweiterung, die nicht mehr unter Firefox Quantum funktioniert.
userChrome Tweaks: Eine Sammlung interessanter Firefox-Tweaks.
FirefoxCSS on Reddit: Dieses Subreddit ist eine Community zum Diskutieren von Optimierungen. Sie können das Subreddit durchsuchen, um die Einstellungen anderer Personen zu finden, sehen, was andere Benutzer teilen, und Sie können sogar nach Eingaben fragen, wenn Sie keine Änderungen finden, die Sie wirklich wollen.
Anleitung zum Bearbeiten des Kontextmenüs: Anweisungen zum Entfernen von Elementen aus dem Firefox-Kontextmenü und zum Ändern der Reihenfolge in der Liste aus dem FirefoxCSS-Subreddit.

Beachten Sie, dass ältere Versionen von Firefox eine andere Benutzeroberfläche hatten. Ältere UserChrome.css-Anpassungen, die Sie online finden, funktionieren möglicherweise nicht in Firefox 57 und höher, auch als Firefox Quantum bekannt.

Wenn Sie wissen, was Sie mit CSS tun, können Sie die Browser-Toolbox aktivieren, um den Chrome des Firefox-Browsers zu überprüfen. Auf diese Weise erhalten Sie die Informationen, die Sie zum Anpassen verschiedener Elemente der Browseroberfläche mit Ihrem eigenen CSS-Code benötigen.

So erstellen Sie Ihre userChrome.css-Datei

Die Datei userChrome.css ist standardmäßig nicht vorhanden. Wenn Sie also ein oder zwei Tweak-Dateien ausprobieren möchten, müssen Sie die Datei zuerst am entsprechenden Speicherort in Ihrem Firefox-Profilordner erstellen.

Um Ihren Firefox-Profilordner zu starten, klicken Sie in Firefox auf Menü> Hilfe> Informationen zur Problembehandlung.

Klicken Sie auf die Schaltfläche "Ordner öffnen" rechts neben dem Profilordner, um ihn zu öffnen. (Unter macOS oder Linux wird stattdessen eine Schaltfläche "In Finder anzeigen" oder "Open Directory" angezeigt. Die folgenden Anweisungen zeigen den Vorgang unter Windows, aber im Grunde ist es auf Mac und Linux derselbe. Sie verwenden lediglich eine Unterschiedlicher Dateimanager und Texteditor.)

Wenn im angezeigten Ordner ein Ordner mit dem Namen „Chrome“ angezeigt wird, doppelklicken Sie darauf. Dies wird jedoch wahrscheinlich nicht der Fall sein, da dieser Ordner nicht von modernen Firefox-Versionen erstellt wird.

Um den Ordner zu erstellen, klicken Sie mit der rechten Maustaste in den rechten Bereich und wählen Sie Neu> Ordner. Nennen Sie es "Chrome", drücken Sie die Eingabetaste und doppelklicken Sie darauf.

Sie müssen Windows anweisen, die Dateierweiterungen anzuzeigen, falls Sie dies nicht bereits getan haben. Windows verbirgt standardmäßig Dateierweiterungen, um die Dinge zu vereinfachen. Dieser Schritt ist unter macOS oder Linux nicht erforderlich, da diese Informationen standardmäßig angezeigt werden.

Unter Windows 8 oder 10 können Sie einfach auf die Registerkarte "Ansicht" in der Multifunktionsleiste klicken und das Kontrollkästchen "Dateinamenerweiterungen" aktivieren, um sie sichtbar zu machen. Klicken Sie unter Windows 7 auf Organisieren> Ordner- und Suchoptionen, klicken Sie auf die Registerkarte "Ansicht" und deaktivieren Sie "Erweiterungen für bekannte Dateitypen ausblenden"..

Sie erstellen jetzt die Datei userChrome.css, die eigentlich nur eine leere Textdatei mit der Erweiterung .css anstelle der Erweiterung .txt ist.

Klicken Sie dazu mit der rechten Maustaste in den rechten Bereich und wählen Sie Neu> Textdokument. Nennen Sie es "userChrome.css" und entfernen Sie dabei die .txt-Dateierweiterung.

Windows weist Sie darauf hin, dass Sie die Dateierweiterung ändern. Dies kann bei bestimmten Dateitypen ein Problem sein. Klicken Sie auf "Ja", um Ihre Änderung zu bestätigen.

Erstellen Sie unter macOS oder Linux eine leere Textdatei mit demselben Namen.

So bearbeiten Sie die Datei userChrome.css

Sie können jeden Texteditor verwenden, um die Datei userChrome.css zu bearbeiten. Der in Windows enthaltene Notepad-Texteditor funktioniert einwandfrei. Wenn Sie einen leistungsfähigeren Texteditor mit mehr Funktionen wünschen, mögen wir Notepad++.

Um die Datei in Notepad zu bearbeiten, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Bearbeiten"..

Fügen Sie der Datei alle gewünschten Anpassungen hinzu, indem Sie sie kopieren und einfügen. Wenn Sie mehrere Anpassungen hinzufügen, müssen Sie sie alle in ihre eigenen Zeilen einfügen.

Wenn Sie fertig sind, speichern Sie die Datei, indem Sie auf Datei> In Editor speichern klicken.

Wenn Sie Ihre userChrome.css-Datei bearbeiten, müssen Sie alle geöffneten Firefox-Fenster schließen und Firefox neu starten, damit Ihre Änderungen wirksam werden.

Wenn Sie häufig zum "Chrome" -Ordner zurückkehren, um Ihre userChrome.css-Datei zu bearbeiten, möchten Sie möglicherweise eine Desktop-Verknüpfung für den Ordner erstellen oder den Ordner "Schnellzugriff" im Datei-Explorer hinzufügen.

Die Datei userContent.css

Firefox verfügt auch über eine userContent.css-Datei, die Sie bearbeiten können, und Sie stolpern möglicherweise über einige Verbesserungen, die besagen, dass sie für die userContent.css-Datei gelten.

Um diese Datei zu verwenden, erstellen Sie einfach eine Datei mit dem Namen "userContent.css" im selben Ordner wie Ihr Chrome-Ordner. Änderungen, die Sie in dieser Datei platzieren, wirken sich auf die internen "Inhaltsseiten" von Firefox aus, wie auf den Seiten "Neuer Tab" und "Optionen".

Hilfe, ich habe etwas kaputt gemacht!

Wenn Sie jemals ein Problem mit einem Tweak haben, können Sie es einfach aus Ihrer userChrome.css-Datei entfernen und Firefox neu starten. Wenn dies nicht funktioniert, können Sie die Datei userChrome.css vollständig löschen und den Browser neu starten, um alle Ihre Änderungen zu löschen und eine neue Firefox-Oberfläche zu erhalten.