Haben Sie es satt, auf die orangefarbene Firefox-Menüschaltfläche zu schauen? Die Benutzeroberfläche von Firefox ist vollständig anpassbar, sodass Sie die Farbe, den Text und andere Eigenschaften der Firefox-Menüschaltfläche ändern können, um Ihr eigenes benutzerdefiniertes Erscheinungsbild 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 eines Teils von Firefox sowie dessen Funktionalität ändern.
Bevor wir uns mit der Bearbeitung der Datei userChrome.css befassen, installieren wir ein Add-On namens ChromEdit Plus, mit dem wir die Datei einfach bearbeiten und im richtigen Format speichern können. Klicken Sie auf den folgenden Link, um zur ChromEdit Plus-Webseite zu gelangen.
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, was Sie bei der Installation von Erweiterungen und anderer Software zulassen. Wenn Sie sich über das Produkt nicht sicher sind oder dem Unternehmen nicht vertrauen, installieren Sie es nicht. Wir haben ChromEdit Plus getestet und festgestellt, dass es sicher und zuverlässig ist.
Das Dialogfeld Softwareinstallation wird angezeigt. Klicken Sie auf Jetzt installieren, was möglicherweise erst nach Ablauf eines Countdowns verfügbar ist.
HINWEIS: Sie können Ändern Sie die Länge des Countdowns auf der Schaltfläche Installieren Wir empfehlen jedoch nicht, es 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.
Das ChromEdit Plus-Fenster enthält standardmäßig drei Registerkarten. Wir werden die Datei userChrome.css bearbeiten, die sich auf der ersten Registerkarte befindet. Wenn die Registerkarte leer ist, kopieren Sie den folgenden Text, fügen Sie ihn in 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 verfügen Sie bereits über eine userChrome.css-Datei. In diesem Fall befindet sich bereits Text auf der Registerkarte userChrome.css. Kopieren Sie den gesamten obigen Text mit Ausnahme der ersten Zeile, der @ Namespace-Zeile, und fügen Sie ihn irgendwo nach der @ Namespace-Zeile in die Registerkarte 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 KEINE intelligenten Anführungszeichen sind, einschließlich der Anführungszeichen in der Zeile @namespace. Sie sollten gewöhnliche, gerade Anführungszeichen sein. Wenn es sich bei einem von ihnen um intelligente Anführungszeichen handelt, hat die Datei keinerlei Auswirkungen auf das Erscheinungsbild von Firefox.
Klicken Sie auf Neu starten, um Firefox mithilfe der neuen oder überarbeiteten Datei userChrome.css neu zu starten.
In diesem Beispiel ändern wir die Hintergrundfarbe in Dunkelblau und 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" mithilfe des Hex-Farbcodes oder des HTML-Farbcodes in eine andere Farbe. Zum Beispiel haben wir ein Dunkelblau mit dem Hex-Farbcode # 2C4362 gewählt.
HINWEIS: Informationen zum Hex-Farbcode für eine gewünschte Farbe finden Sie in unseren Artikeln zu Abrufen von Hex-Farbcodes aus dezimalen RGB-Farben , Auswahl von Farben von überall auf dem Bildschirm , und Abrufen 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 „Dropmarker für App-Menüschaltfläche: Vorher“ in den gewünschten Text, z. B. „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 Textes ändern, indem Sie die Zeile „Farbe“ im selben Abschnitt „Dropmarker für App-Menüschaltfläche: Vorher“ ändern. Wir haben die Textfarbe als Weiß (#FFFFFF) belassen, aber Sie können sie in etwas Hellgraues (# F2F2F2) oder ähnliches ändern.
Klicken Sie auf Speichern und dann auf Neu starten, damit die Änderungen wirksam werden.
Der Knopf ist jetzt dunkelblau und sagt "How-To Geek".
Sie können der Schaltfläche auch ein Hintergrundbild hinzufügen und die Hintergrundfarbe ändern. Wir haben ein Bild mit dem How-To-Geek-Favicon auf der linken Seite und einem transparenten Hintergrund erstellt, damit 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 zum Speicherort Ihres Bildes auf Ihrem Computer. Lassen Sie die "Datei: ///" im Pfad.
Hintergrundbild: URL ("Datei: /// C: /Users/Lori/Pictures/htg_background.png")! wichtig;
Klicken Sie erneut auf Speichern und neu starten.
Jetzt ist unser Button komplett.
Sie können die Firefox-Menüschaltfläche auch anpassen, indem Sie sie in ein Symbol konvertieren. Wir haben auch viele andere veröffentlicht Tipps und Optimierungen, um Firefox optimal zu nutzen .
