Einige User möchten vor die Einträge in allen Menüs bzw. dem Kontextmenü gerne vor jedem Eintrag zusätzlich ein eigenes Icon haben. Hier möchte ich mal beschreiben, wie man diese Icons durch einen CSS – Code selber zusätzlich einbinden kann.

Firefox – Eigenes Icons einbinden in den verschiedenen Menüs

 

So sieht das standardmäßig ohne Icons aus:

ohne-icon

Bis zur Firefox Version 56 war es möglich, solche Änderungen durch diverse Erweiterungen zu erreichen.

Das eine oder andere ist seit der Firefox Version 57 nicht mehr möglich, da Mozilla dafür (zumindest noch) keine Schnittstelle mehr zur Verfügung stellt.

Aus diesem Grund muss man jetzt optischen Änderung am Firefox mit einer userContent.css bzw. einer userChrome.css Datei erstellen.

Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

userChrome.css erstellen



Wichtiger Hinweis:
User die bereits eigene Icons durch einen base64 Code eingefügt haben, müssen das ab der Firefox Version 69 ändern. Ab der Version 69 akzeptiert der Firefox diese Art der Einbindung von Icons aus Sicherheitsgründen nicht mehr. Das bedeutet, sie müssen alle entsprechenden Codes ändern.

Besonders betroffen sind Nutzer, die eine portable Version vom Firefox auf einem Stick nutzen. Wer dann weiterhin eigene Icons benutzen möchte, der muss diese dazu im Firefox Profil hinterlegen.

Firefox – Eigenes Icons einbinden in den verschiedenen Menüs

Und hier mal eine Erklärung wie man das mit dem neuen CSS – Code dann machen muss, bzw. welche Möglichkeit Nutzer einer portablen Version haben.

Als erstes gehen wir dazu in den Profilordner vom Firefox, und öffnen den dort selber angelegten Ordner chrome.

Im Ordner chrome muss ein weiterer Unterordner mit dem Namen Icons erstellt werden.

So sieht das dann aus:

ordner-icons

Alle Icons die man benutzen möchte, müssen in dem neuen Ordner Icons hinterlegt sein.

Zur genaueren Übersicht kann man den Icons auch gleich den passenden Namen geben, oder eine beliebige andere Bezeichnung. Ich habe mal die Nummer 1 gewählt im Beispiel.

Alle Icons die man benutzen möchte müssen die Größe 16 x 16 haben.

So sieht das dann aus:

icon-im-ordner

Weiterer Vorteil durch den neuen Ordner Icons ist, bei einer Profilsicherung werden die Icons abenfalls gesichert.

Firefox – Eigenes Icons einbinden in den verschiedenen Menüs

Ich beschreibe hier mal als Beispiel, wie man dem Eintrag Alles auswählen im Rechtsklick Kontextmenü ein eigenes Icon zusätzliches geben kann.

Nachdem man ein beliebiges Icon im Unterordner Icon hinterlegt hat, öffnet man im Ordner chrome die userChrome.css Datei.

In diese Datei tragen wir nun dafür folgenden neuen CSS Code ein:

/*Icon für Alles auswählen*/

menuitem[label="Alles auswählen"] {
-moz-appearance: none !important;
background: url("file:./Icons/1.gif") no-repeat !important; /*Pfadangabe Ordner Icons*/
background-position: 5px 2px !important;
}

So sieht das dann in der userChrome.css Datei aus:

css-1-code

Wenn man diesen Code eingetragen hat, und geht dann mit der Maus (hover) auf den Eintrag Alles auswählen, dann fehlt die Hintergrundfarbe dieses Eintrages.

Es wird noch ein weiterer CSS – Code für den Hovereffekt benötigt.

Dieser Eintrag sieht dann so aus:

/*Icon für Alles auswählen - hover*/

menuitem[label="Alles auswählen"]:hover {
-moz-appearance: none !important;
background: red url("file:./Icons/1.gif") no-repeat !important; /*Pfadangabe Ordner Icons*/
background-position: 5px 2px !important;
color: white !important;
}

Zur besseren Erkennung habe ich als Hintergrund die Farbe rot genommen, und dem Text noch die Farbe weiß gegeben.

Alle Farben können beliebig ausgetauscht werden. Man kann auch für jedes weitere Icon welches man einfügt, eine komplett andere Farbzusammenstellung benutzen.

Will man die Standardfabe für hover vom Firefox nutzen, dann lauten der Eintrag dafür:

/*Icon für Alles auswählen - hover*/

menuitem[label="Alles auswählen"]:hover {
-moz-appearance: none !important;
background-color: var(--toolbarbutton-hover-background) !important;
background-position: 5px 2px !important;
}

So sieht das dann damit aus:

hover-grau

So sieht das dann mit beiden Einträgen in der userChrome.css Datei aus:

css-beide-codes

Hinweis:
Alle angegebenen Werte können individuell angepasst werden. Wer keine Hintergrundfarben möchte, der braucht nur den jeweiligen Eintrag hinter background wieder entfernen.

Zusätzlicher Hinweis für Firefox ab Version 68:

Dann muss die Bezeichnung im Pfad:

background: url(„file:./Icons/1.gif“)

um einen Punkt . und ein Slash / erweitert werden:

background: url(„file:..//Icons/1.gif“)

Firefox – Eigenes Icons einbinden in den verschiedenen Menüs

Damit man später noch genau weiß was der jeweilige CSS Code bedeutet, sollte man sich über dem CSS – Code einen aussagekräftigen Hinweis erstellen.

Dazu schreibt man vor dem Text erst einen Slash und einen Stern /* dann die Beschreibung der Funktion…und als Abschluss schreibt man diesmal erst den Stern und dann das Slashzeichen */

Die Zeichen vorher und nachher bedeuten, dass der Text auskommentiert ist, und somit keinen Einfluss auf den CSS Code bzw. seine Funktion hat.

Keine Produkte gefunden.

Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.

Und so sieht das dann mit dem eigenen Icon aus:

mit-icon

Und so bei hover mit der Maus auf den Eintrag:

hover-rot

Möchte man eines Tages diese Änderung nicht mehr nutzen, dann reicht es aus, den CSS Code in der userChrome.css einfach wieder zu löschen.

Danach noch einen Neustart vom Browser machen, und das Icon wird nicht mehr angezeigt.

Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte:

userChrome.css aufräumen

Vorteil dadurch, es ist alles viel übersichtlicher und man findet schneller mal etwas wieder.

Dieser Tipp kann bzw. sollte auch auf die Datei userContent.css angewandt werden.

(Diese Datei wird für optische Änderungen an Webseiten, bzw. allen Firefox Seiten die mit about beginnen benötigt)

Share.