Farbige Ordnersymbole


  • Das Bild ist aus #16. Geschlossene Ordnersymbol allerdings gespiegelt.

    Ergebnis
    [attachment=0]Unbenannt-8.png[/attachment]
    Code komplett

    CSS
    .bookmark-item[container="true"]{
    	list-style-image:  url(' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0IxNUY5NjNFRkY0MTFFN0EwMjNCOEY1NDJGNTM0MUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0IxNUY5NjRFRkY0MTFFN0EwMjNCOEY1NDJGNTM0MUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQjE1Rjk2MUVGRjQxMUU3QTAyM0I4RjU0MkY1MzQxRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQjE1Rjk2MkVGRjQxMUU3QTAyM0I4RjU0MkY1MzQxRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpiI9NIAAAHKSURBVHjalFJNaxRBEH3VXT07u2MkKgREb4GA4CUQz8EfIAS95u7JS075CQEFvebsISd/gH8gCkogHuIxEAj5IAkJuonZzUz7umZ21w0k4DA1XTP95tWr1yU/P79c6vfKRecchMEbAs8cyO5MfQohfHw8934HN1z6++R48enzN0z5h0s/Bouzgy2c7X551Qt3J7i5fBOBfFub35iZfYbyzw7E53CaQ7QD7Uzj9LiLi6NNmKwEFqkjlVNh6KqO88WGFqj6e5i8X+DBoxcEtuvPLCA+o8IWizzE/ubb13req7Cx/tX690GRvFD1yLMMGhL/d6j37E6RtQtiJpB17lFCYZU0p5TZhQ+IZTeVIBGDK8ty1Xp12rTAle7avlxi/8c72M7F3pp54HyS1jYPnBZwgcFcQmEEPu15tqPEhSdUGKDjDojJMsskDnweptFUpESGXrnxM4kjK5tHrDkt5BqOp3CN4D+v5Nc4QUxnPDhKaeTHW0lGBI2+Gi/DkRh0ExtQ/Aecnupc/eLzaTocbEhsGjk0kIqiWiRtvC4Z1RX65SFxXZsdPT08WNnd3l6OVWXDEmOFVoejnAUzqZW3bcBGfY+qX57/Wv0rwAApZm2AlTI82wAAAABJRU5ErkJggg==') !important;
    	-moz-image-region: rect(0px 16px 16px 0px) !important;
    	margin-top: 1px !important;
    	}
  • Son Goku
    Danke für deine Unterstützung.
    Das ist ja ein irre lange url.
    Ich habe deine url genommen und in den Code aus # 2 eingefügt.
    Dort sind dann alle Ordnersymbole geändert.
    Vielleicht gibt es noch andere Möglichkeiten aber die kenne ich nicht bzw. bin zu blond.

  • Zitat

    Das ist ja ein irre lange url.


    naja ich kenn keine kürzeren als base64.

    Als Bild z.B. png, jpg könnte noch eingebunden werden, aber dafür mußte das Bild in passender grösse (wäre am besten) auf deiner HDD haben.aber wer sieht schon die lange url ;)

  • Hallo Liebe Community,
    ich hole diesen Thread nochmal hoch.
    Auch ich wollte Lesezeichen Ordner liegend und farbig haben, aber irgendwie wollte kein Code von euch funktionieren.
    Ich Habe Firefox Quantum 60.02 64Bit. Dieser Thread ist ja nun auch etwas älter.
    Nach Stunden des bastelns bin ich dennoch mit dem Ergebnis zufrieden.

    [attachment=0]Neuer Fuchs.jpg[/attachment]

    Ich habe keine Ordner Icons genommen (die waren nicht so gut erkennbar). Die Icons, wie oben im Bild gefallen mir auch besser.
    Am Beispiel vom Ordner "Allgemein":
    Das Bildchen auf http://www.iconarchive.com/ geholt und umgewandelt bei https://www.base64-image.de/
    Das ist der Code dazu:

    CSS
    toolbarbutton[class="bookmark-item"][label="Allgemein"][type="menu"][container="true"]{
     list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACy0lEQVR42mNkQAJ6xiYGYhISii+fP7t0+dy5uwx4gImVleqZY8duMyIL+oaG5jh7eU9mZWP7//TRo3lTOjsyPn348Addc2Vb+2QZefms+VOnaDCiS0YlpzSY2djUAw1huHL+fMP0nu5GZHm/wGCL0Li41deuX93QXlWVy6hrZKT25tWr58+fPPkMUxSbnt5iYWdf/e/fv6e5sTEyyJqjEpNWT588Mezg7l3HQWKMTp6eIW6+foUT21o9gYZ8AgkGRkUnu3h7z/n///+/nJhoZlyawQaY29p5AG3c/vXz5+MrF8yPVlRVdbK0dyjj5OJSAxrwf8OK5XZcrOx/sGkGGyAiJs5b3tLyiIubWwBZQoTtHoOewBaGM59yvrCwCn6YgUUz2AAQAQz5EDc/v6VAW9mYmJjAEqGypQwczF8ZPrxRY1j/IvbL5s07vfZu3XoYqwEgoKWnpwNMB0lAQ8S0lRnVU0wXmTC9ZWRgfMPE8PCHHsMBgdTPa5cs8di/Y/sxrAbAQKQ7q0FLDsdckd8sRr/ucTJ8/cXLsIczhOGnmDYDMEg+rV2yGGjIjuMYBqQEsFn2FHFsZmRiFGZ8w8jw5Czn6dV/g7+zSmna8fLzM8C8BjTk84bly332bN1yCG4AVPMOoGY+kGaG10z/oyf80Dz6kutpSl7+dllFRRuQAUDNDL9+/WJgZWX9Om/yZJPzp07eYHRS45Bd3ct9hUXwD0wzw8+P7K9FS56LgQwXFhXlTckv2AlMupa/fv58u3PjhnJDc/OYF0+f7Vs4fVoz2AWLYsUafd3/1TF//wfS/Kl05RePBac/w/0pIibGB3TJDik5OY0je/eW6Rkbx10+f273yvnzm+FhsChKrMFDn7WwbM0nFM3IhiTl5G4B0rZAb7xZNGOG9a1rV2+hxIKTCqfMvjvfn+DKwhycnExyCoqa796+eQjMP19AYgDjTzXtxT8cewAAAABJRU5ErkJggg==') !important;}

    Vielen Dank an Euch! :D

  • hi

    hoffe du hast alle relevante "Dateien" richtig in „Profi“ und „FX Ordner“ eingetragen

    Beispiel teste mal

    userChrome.css

    CSS
    toolbarbutton[class="bookmark-item"][label="Allgemein"][type="menu"][container="true"]{
     list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABc0lEQVR42mNkoBAwUmxAw7LHC/nYfsWhS2zYfIDp0MLk/wQNKJtz639ptArDmSc/4IJ//vxluH31FU5NZy7dZV/W5PYLboCyujjDj5+sKIrEhRHs33+gBv9lYHj69CPD7eu3pBbW2D+3i5/Lylg6++Z/cRl+hm9f/jF8fPeOoJ+ZWVkZzp04nfjr58/HQO4toAE3/guKcDG8f/cdrKAmVo3h2MPvRAVge8tyP8aSWTf+MzH/ZPj7h5lBV1+B4c17guEGBh/fv//15OEjU6AB1////PmRQUtTieHLT3aGf8TpZ3jy4OHxyTl6VowlM6////jxBYOltRHDi9f/iNL888cPhqePHqXPKTOfxVg889p/GSkeht8MvMCYIM761y+evZqcoyMOjkaQAfr6UgzPXvxjYGVjIqj5/79/DLdv3Fs1s8QkHGyAd9rEWH0rjwUfP/0iyvY/v3//3bmgxPLB5X1nwQYAsQVxwYYBTsAMoAhQbAAAAjCiCL9JqqgAAAAASUVORK5CYII=") !important;}
     -moz-image-region: rect(0px 16px 16px 0px) !important;
    }

    gruß

  • Hallo universum123,
    alle Codes sind in der userChrome.css gespeichert.
    Dein Code funktioniert auch, allerdings ist dann der Ordner "Allgemein", Blau. :klasse:
    Dankeschön für dein Feedback!

  • Hallo erst mal an alle,
    bin neu und muß mich erst mal zurecht finden.
    Habe eine frage an Andreas. wo kann man in diesen Code die Farben für den jeweiligen Ordner ändern. Ich habe für jeden Ordner von dem Code eine Copy gemacht und darunter neu eingefügt. Aber ich finde nicht wo man die Farbe ändern kann.
    Oliver

    Edit 2002Andreas
    Text in Klammercode gesetzt.

  • Hallo und Willkommen hier im Forum.

    Das geht mit dem Code auch nicht.

    In diesem Code ist jeweils ein Bild enthalten. Und dieses Bild/Icon ist ein gelber Ordner.

    Du musst wenn dann für jeden Ordner ein eigenes anderes Bild nehmen. Und dann auch noch jedem Ordner einen eigenen Namen vergeben.

  • Beispiel:

    Du gibst einem beliebigen Ordner den Namen: w

    Mit diesem Code hat er dann ein eigenes Icon, und der Buchstabe w wird auch wieder ausgeblendet.

    Du musst dabei testen, ob du evtl. den anderen Code erst wieder entfernen musst, da bin ich mir nicht sicher.

  • Wenn du das Original Icon behalten möchtest, und nur die Farbe davon ändern willst, dann geht das so:

    Beide Codes beziehen sich auf die Ordner in der Lesezeichensymbolleiste.