Ordnericons der Firefox Symbolleiste ändern

Ein Besucher schaute sich gerade den „Firefox Lesezeichen-Symbolleiste mit Icons optimal nutzen“ Post an. Nicht weiter gewöhnlich aber eigentlich suchte dieser Besucher über Google, wie man die Icons der Ordner dieser Leiste ändern kann. Ich möchte diese Information jetzt ergänzen, da sie auch sehr praktisch sein kann.

Ihr braucht erstmal eine Icondatei, also ein 16x16px großes .ico File. Oder auch mehrere, wenn ihr jedem Lesezeichenordner ein eigenes Icon geben wollt.
Sucht euch zuerst die userChrome.css im Ordner %appdata%/Mozilla/Firefox/profile/[Zeichenkette]/chrome/. Wer nicht weiß, was %appdata% ist: Start->Ausführen->%appdata% und ihr landet in dem Ordner (der ist im Profilordner/Anwendungsdaten).
Wenn diese noch nicht existiert, gibt es eine userChrome-Example.css, benennt diese einfach um.
Öffnet die Datei und hängt ja, wie ihr es braucht, hinten einfach folgende Codeschnipsel ran:

Alle Lesezeichenordner haben ein Icon:

.bookmark-item[container="true"]{
list-style-image: url("file://c:/favicon.ico") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

Alle Ordner haben nun das unter c:/favicon.ico abgelegte Icon.
firefox-symbolleiste-ordner-icons-1

Einen bestimmten Ordner ein Icon geben:

.bookmark-item[container="true"][label="Loads"] {
list-style-image: url("file://c:/2.ico") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

Der Lesezeichenordner „Loads“ bekommt also das 2.ico.

Beide Codeschnipsel könnt ihr verbinden und damit die Lesezeichen-Symbolleiste persönlicher und übersichtlicher gestalten. Der Browser muss natürlich nach jedem Speichern der userChrome.css neu gestartet werden.

Beispiel:
firefox-symbolleiste-ordner-icons-3

Stand Januar 2016: die Technik funktioniert immernoch einwandfrei:
firefox-lesezeichenordner-neues-icon-zuweisen

21 Kommentare

  1. Am Anfang dieses Artikels ist ein weiterer Artikel verlinkt, „Firefox Lesezeichensymbolleiste mit Icons optimal nutzen„.
    Dort findest du auch die Lösung:
    Rechtsklick auf das Lesezeichen->Eigenschaften->Name löschen. Wenn das „Name“ Feld komplett leer ist dann bleibt auch nur das Icon übrig, so bekommst du dutzende Lesezeichen in die Leiste.
    Ich hab mit meinem 24″ Monitor 28 Lesezeichenicons und 11 Ordner (mit Namen) in der Leiste und die ist immernoch nicht voll 😉

  2. hallo, meine ganze Lesezeilenleiste ist verschwunden… warum weis ich nicht. nach dem Abschalten und wieder hochfahren des PC ist sie weg. „neuen Ordner anlegen geht auch nicht. „Häkchen“ gesetzt, was ich sehe alles okay… Danke und Grüße Doris

  3. Moin,

    Genialer Beitrag und ich würde es gerne noch mehr tunen!
    Mir fehlt die Variante:
    Alle Ordner mit dem gleichen Ordernamen wie das Icon ein Icon geben:
    z.B.
    .bookmark-item[container=“true“][label=ordername] {
    list-style-image: url(„file://c:/“ + ordnername „.ico“) !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important;
    }


    Achja, gibt es eine List wo man die Befehl von Firefox sich ansehen kann…?

  4. Interessante Idee mit dem Ordnernamen=Iconname. Leider hab ich nicht so recht eine Idee wie man das machen könnte weil es Variablen in diesem herkömmlichen Sinne in CSS nicht gibt. Und dafür bräuchte man ja Variablen oder halt irgendeine dynamische Erkennung des Ordnernamens.

    Was für „Befehle von Firefox“ meinst du?

  5. Hm, ganz Nett würde es gern verwenden nur leider fehlen mir beide angebenen Dateien. Der Ordner Crome fehlt ja schon. Daher denke ich, das noch ein Plugin nötig ist.
    Nur welches?

    MfG
    Sigie

  6. @6
    Zu Punkt 1: Schade
    Zu Punkt 2: Naja eig. haste es ja erklärt… Firefox arbeitet mit CSS nur woher weiß ich welche Atribute/Variablen Firefox benutzt oder überhaupt existieren?

  7. Hallo,
    wenn ich den Namen bei Eigenschaften des Symbols lösche, um also nur das Symbol anzuzeigen, dann hat doch „label“ in der userChrome.css keinen Wert mehr…
    Also kein Symbol

    Wie kriegt man das mit oben genannter Methode hin, dass nur Symbole angezeigt werden?

    Grüße
    stani

  8. Das Löschen des Namens eines Lesezeichens würde ich nicht über diese Datei machen sondern über den Browser mit den normalen Lesezeichen-Tools. Eigenschaften des Lesezeichens aufrufen (oder Rechtsklick -> Bearbeiten in Chrome) und dort einfach den Namen entfernen. Übrig bleibt nur das Icon des Lesezeichens. Siehe hier oder als Video hier

  9. Hallo!

    Wie füge dem Label „Lesezeichen verwalten“ (id=bookmarksShowAll) ein Icon hinzu?
    Das funktioniert leider nicht über „.bookmark-item[container=…“ weil es offensichtlich kein bookmark-item, sondern ein menuitem ist (?).

    LG, Jürgen

  10. Hallo Jürgen,
    ich habe leider keine konkrete Antwort für dich. Aber ich würde an deiner Stelle auf dieser Seite anfangen zu recherchieren. Es scheint, dass die meisten Elemente, also vielleicht auch Menüitems, verändert werden können und dass alles auf Basis von Webtechnologien (CSS, JS, XML) realisiert und somit editierbar ist. Ich kenne mich in dem Bereich aber nicht aus.
    Wenn du eine Lösung gefunden hast würde ich mich natürlich freuen, wenn du die Antwort hier oder per Mail teilst 😉

    PS: Jedenfalls enthält keine Datei in dem Ordner AppDataRoamingMozillaFirefox den Text „bookmarksShowAll“. Ebenso nicht in im Programmverzeichnis. Also das wird entweder irgendwie anders kodiert, funktioniert komplett anders oder lässt sich doch nicht ändern. Zeit-Aufwand-Nutzen-Verhältnis sollte man da abwägen 😉

  11. Danke für den Tipp – den ich als Laie leider nicht umsetzen konnte. Habe in Firefox\Profiles\wy1kxuh2.default einen Ordner „userChrome.css“ erstellt, was wohl schon falsch ist. Ich sollte ja eine Datei erstellen. Aber wie geht das? Es gibt ein Menü „Neues Element“, liegt dort die Lösung?

    Für einen Tipp wäre ich dankbar, denn jetzt würde ich das doch gern auch umsetzen…

  12. Du erstellst eine neue Textdatei, schreibst Inhalte hinein und speicherst die Datei mit „Speichern unter“ -> Dateityp „Alle Dateien (*.*)“, Dateiname „userChrome.css“.
    Zweiter Weg: Eine Textdatei erstellen und einfach nur die Dateiendung von .txt nach .css ändern. Dazu muss die Option „Erweiterungen bekannter Dateitypen ausblenden“ (Win7) deaktiviert sein, zu finden bei Windows Explorer -> Extras -> Ordneroptionen (Win7, oder im Startmenü unter „Ordneroptionen“) -> Ansicht.

  13. Hallo Hannes,
    danke für Deine schnelle und verständliche Antwort.Leider klappt es aber trotzdem nicht. Will hier nicht weiter Deine Zeit bemühen… Aber falls Du schnell meinen Fehler entdeckst, wäre ich für noch einen Tipp dankbar.
    Habe unter Firefox/Profiles/wy1kxuh2.default einen ordner „Chrome“ erstellt und darin eine Datei userChrome.css mit dem Text wie oben abgespeichert, also beginnend mit .bookmark-item…
    Mein Bildchen habe ich unter IrfanView auf 16×16 verkleinert und unter C als ico mit dem Namen earth gespeichert. Habe es gerade auch noch umbenannt in earth.ico.
    Aber leider bleiben die Ordner wie immer…

  14. Also, so viel kann da ja nicht falsch sein.
    1.) Ist der „chrome“ Ordner, den du erstellt hast, groß oder klein geschrieben? In meinem Artikel ist er klein geschrieben, überprüfe das bitte.
    2.) Schick mal bitte den Inhalt der Datei 1:1 hier als Kommentar, ich schau mal rüber.
    3.) Die Angabe des Pfades hast du in der Form

    ...le-image: url("file://c:/ordner/datei.ico") !import...

    angegeben und die Datei liegt auch definitiv dort?

  15. Ich habe es gerade extra nochmal gestet mit Windows 10 und Firefox 43, funktioniert alles noch.
    Also, Ordner: C:UsershanneAppDataRoamingMozillaFirefoxProfiles[asdf].defaultchrome
    Datei: userChrome.css
    Inhalt:

    .bookmark-item[container="true"]{
    list-style-image: url("file://c:/favs/net2.ico") !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important;
    }
    .bookmark-item[container="true"][label="Barketing"] {
    list-style-image: url("file://c:/favs/sets2.ico") !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important;
    }
    ...

    Icons unter C:/favs als .ico, 16×16, Firefox neustarten -> da sind die Icons!
    Müsste gehen.

  16. Ich kann´s nur nochmal betonen: Sehr nett, wie Du mir Unterstüt-zung gibst. Jetzt hat es mich ja doch gepackt…

    Also: Der Pfad ist C:UsersMartinAppDataRoamingMozillaFirefoxProfileswzg3kxbh5.defaultchrome

    Inhalt der Datei userChrom.css ist
    .bookmark-item[container=“true“]{list-style-image: url(„file://c:/favs/earth.ico“) !important;-moz-image-region: rect(0px 16px 16px 0px) !important;}

    Habe eben wie Du auch einen Ordner favs erstellt.

    In meiner Dateistruktur heißt C übrigens Windows8_OS (C:).
    Habe auch mal als Ziel Windows8_OS eingegeben… Ging auch nicht…
    Ob was mit dem Bild nicht stimmt? Unter Eigenschaften steht Symbol (.ico) und 16 x 16. Müsste also stimmern…

  17. früher konnte man Icons selbst setzen und sogar ganz eigene erstellen. warum wurde das nur abgeschafft. Der ganze komplizierte Zirkus, der hier beschrieben wird, ist doch albern. Mozilla sollte diese Möglichkeit das Icon zu ändern wieder in das Menü aufnehmen. Denn dummerweise gibt es auch Seiten ohne Icon und der Name ist meist zu lang.

Schreibe einen Kommentar