Anpassen der Darstellung der Orange Firefox-Menüschaltfläche

Werden Sie es satt, die orangefarbene Firefox-Menüschaltfläche zu betrachten? Die Benutzeroberfläche von Firefox ist vollständig anpassbar. Sie können also die Farbe, den Text und andere Eigenschaften der Firefox-Menüschaltfläche ändern, um Ihren eigenen Look zu erstellen.

Um das Erscheinungsbild der Firefox-Menüschaltfläche zu ändern, bearbeiten wir die Datei userChrome.css. Mit dieser Datei können Sie das Erscheinungsbild von Firefox sowie dessen Funktionalität ändern.

Bevor wir uns mit der Bearbeitung der Datei userChrome.css beschäftigen, installieren wir ein Add-On mit dem Namen ChromEdit Plus, mit dem wir die Datei problemlos bearbeiten und im richtigen Format speichern können. Klicken Sie auf den folgenden Link, um zur ChromEdit Plus-Webseite zu gelangen.

http://webdesigns.ms11.net/chromeditp.html

Klicken Sie auf der Seite auf die Schaltfläche Zu Firefox hinzufügen.

Die folgende Meldung wird möglicherweise angezeigt. Klicken Sie auf Zulassen, um die Installation des ChromEdit Plus-Add-Ons fortzusetzen.

HINWEIS: Seien Sie sehr vorsichtig mit dem, was Sie bei der Installation von Erweiterungen und anderer Software zulassen. Wenn Sie sich bezüglich des Produkts nicht sicher sind oder dem Unternehmen nicht vertrauen, installieren Sie es nicht. Wir haben ChromEdit Plus getestet und als sicher und zuverlässig befunden.

Das Dialogfeld Softwareinstallation wird angezeigt. Klicken Sie auf Jetzt installieren, das möglicherweise nicht verfügbar ist, bis ein Countdown abgeschlossen ist.

HINWEIS: Sie können die Dauer des Countdowns über die Schaltfläche Installieren ändern. Wir empfehlen jedoch nicht, ihn zu deaktivieren.

Sie müssen Firefox neu starten, um die Installation abzuschließen. Klicken Sie im Popup-Dialogfeld auf Jetzt neu starten.

Nach dem Neustart von Firefox wird rechts neben dem Adressfeld die Schaltfläche ChromEdit Plus hinzugefügt. Klicken Sie darauf, um das ChromEdit Plus-Fenster zu öffnen.

Es gibt standardmäßig drei Registerkarten im ChromEdit Plus-Fenster. Wir bearbeiten die Datei userChrome.css, die sich auf der ersten Registerkarte befindet. Wenn die Registerkarte leer ist, kopieren Sie den folgenden Text, fügen Sie ihn auf die Registerkarte userChrome.css ein und klicken Sie auf Speichern. Dadurch erhalten Sie eine Standarddatei userChrome.css.

@namespace-URL ("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
# appmenu-button
Hintergrund: #orange! wichtig;

# appmenu-button dropmarker: vor
Inhalt: "Firefox"! wichtig;
Farbe: #FFFFFF! wichtig;

# appmenu-button .button-text
Anzeige: keine! wichtig;

Möglicherweise haben Sie bereits eine userChrome.css-Datei. In diesem Fall befindet sich bereits Text auf der Registerkarte userChrome.css. Kopieren Sie den gesamten Text mit Ausnahme der ersten Zeile, der @namespace-Zeile, und fügen Sie ihn irgendwo nach der @namespace-Zeile ein. Wenn Sie behalten möchten, was Sie bereits haben, können Sie den obigen Text am Ende der Datei einfügen.

WICHTIG: Stellen Sie sicher, dass alle Anführungszeichen in userChrome.css NICHT intelligente Anführungszeichen sind, einschließlich der Anführungszeichen in der Zeile @namespace. Sie sollten gewöhnliche, direkte Zitate sein. Wenn es sich um intelligente Anführungszeichen handelt, hat die Datei keinerlei Auswirkungen auf das Erscheinungsbild von Firefox.

Klicken Sie auf Neustart, um Firefox mit der neuen oder überarbeiteten Datei userChrome.css neu zu starten.

In diesem Beispiel ändern wir die Hintergrundfarbe in ein Dunkelblau und ändern den Text „Firefox“ in „How-To-Geek“..

Um die Hintergrundfarbe zu ändern, ändern Sie den Text "#orange" in der Zeile "background" im Abschnitt "# appmenu-button" in eine andere Farbe. Verwenden Sie dazu den Hex-Farbcode oder den HTML-Farbcode. Zum Beispiel haben wir ein dunkles Blau mit dem Hex-Farbcode # 2C4362 gewählt.

HINWEIS: Um den Hex-Farbcode für eine gewünschte Farbe herauszufinden, lesen Sie unsere Artikel zum Ermitteln von Hex-Farbcodes aus dezimalen RGB-Farben, zum Auswählen von Farben an einer beliebigen Stelle auf dem Bildschirm und zum Ermitteln von Farbcodes in mehreren Formaten.

Um den Text auf der Schaltfläche zu ändern, ändern Sie den Text „Firefox“ in der Zeile „Inhalt“ im Abschnitt „# appmenu-button dropmarker: before“ in den gewünschten Text, beispielsweise „How-To-Geek“. Wir haben nach dem Text ein Leerzeichen eingefügt, um mehr Platz zwischen dem Text und dem Dropdown-Pfeil auf der Schaltfläche zu haben.

Sie können auch die Farbe des Texts ändern, indem Sie die Zeile „Farbe“ im selben Abschnitt „# Appmenu-Button dropmarker: before“ ändern. Wir haben die Textfarbe als weiß (#FFFFFF) hinterlegt, aber Sie können sie in etwas Hellgrau (# F2F2F2) oder ähnliches ändern.

Klicken Sie auf Speichern und dann auf Neu starten, damit die Änderungen wirksam werden.

Der Button ist jetzt dunkelblau und sagt "How-To-Geek".

Sie können der Schaltfläche zusätzlich zum Ändern der Hintergrundfarbe ein Hintergrundbild hinzufügen. Wir haben ein Bild mit dem How-To-Geek-Favicon auf der linken Seite und einem transparenten Hintergrund erstellt, sodass die dunkelblaue Hintergrundfarbe durchscheint. Um Ihrer Schaltfläche ein Hintergrundbild hinzuzufügen, fügen Sie die folgende Zeile zum Abschnitt "# appmenu-button" hinzu, und ändern Sie den Pfad in den Anführungszeichen in die Position Ihres Bildes auf Ihrem Computer. Belassen Sie die "Datei: ///" im Pfad.

Hintergrundbild: URL ("file: /// C: /Users/Lori/Pictures/htg_background.png")! Important;

Klicken Sie erneut auf Speichern und neu starten.

Nun ist unser Button fertig.

Sie können die Firefox-Menüschaltfläche auch anpassen, indem Sie sie in ein Symbol konvertieren. Wir haben auch viele andere Tipps und Optimierungen veröffentlicht, um Firefox optimal zu nutzen.