Symbole Individuell anpassen in der LZ-Sidebar

BarbaraZ-

Moin,

ich möchte gerne die Symbole in der LZ-Symbolleiste individuell anpassen.

Die "Ordner gelb" habe ich mittlerweile deaktiviert.

Ich möchte gerne je Ordner einen individuelle Buchstaben zufügen.

z. B. für den Ordner Privat: Den Buchstaben P

Für den Ordner Gesundheit: Den Buchstaben G

Die Unterordner folgen im zweiten Schritt. Erst mal eine Fleißarbeit für mich die Buchstaben hier individuell zuzuordnen.

2002Andreas

Zitat von BarbaraZ-

z. B. für den Ordner Privat: Den Buchstaben P

Das Icon musst du dir dann austauschen.

CSS

#PlacesToolbarItems > toolbarbutton[label="Privat"] > image {
  display: none !important;    
}
    
#PlacesToolbarItems > toolbarbutton[label="Privat"]::before {
  margin-right: -2px !important; 
  margin-left: 0px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/Cloud.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

Alles anzeigen

BarbaraZ-

Leider klappt es nicht. So sieht mein CSS-Code aus.

CSS

#PlacesToolbarItems > toolbarbutton[label="Privat"] > image {
display: none !important;
}

#PlacesToolbarItems > toolbarbutton[label="Privat"]::before {
margin-right: -2px !important;
margin-left: 0px !important;
content: '' !important;
display: block !important;
width: 19px !important;
height: 15px !important;
background-image: url("file:///F:/FavIcons/Letter-P-icon.png") !important;
background-repeat: no-repeat !important;

background-position: 0px 0px !important;
background-size: 15px 15px !important;
}

Alles anzeigen

So rufe ich diese über die UserChrome.css auf:

2002Andreas

Zitat von BarbaraZ-

So rufe ich diese über die UserChrome.css auf:

Funktioniert hier einwandfrei per Import Regel.

Ist denn das alte Icon weg?

Wenn ja, dann könnte dein Pfad nicht stimmen zu deinem Icon

BarbaraZ-

Es passt alles. Pfad richtig und die alten sind weg. Hier Standard. Hatte ich vorher schon geregelt.

harff182

Ich mach das nach dem Schema:

CSS

/*     APOD */
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label=APOD] {
    list-style-image: url('../icons/apod.png') !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important; 
    background-position: 4px 2px !important; /*x y*/
}

2002Andreas

Zitat von BarbaraZ-

die alten sind weg

Ich meinte nur das eine alte Icon von dem Ordner Privat.

Standard:

Ohne das Icon:

Das Icon wird damit ausgeblendet:

CSS

#PlacesToolbarItems > toolbarbutton[label="Privat"] > image {
   display: none !important;
}

BarbaraZ-

Nein, das Icon wird nicht entfernt mit dem Code.

harff182 Ich werde es nachher mal probieren.

Bin jetzt erst Mal weg. Bis später.

2002Andreas

Zitat von BarbaraZ-

Nein, das Icon wird nicht entfernt mit dem Code.

Dann überprüf bitte mal deine Import-Regel ganz genau.

Oder trag den Code zwecks Test mal direkt in die userChrome.css ein.

2002Andreas

Zitat von harff182

Ich mach das nach dem Schema:

Viele Wege führen nach Rom

Bei deinem Code kannst du dir die letzten 3 Reihen sparen.

So geht es auch:

Code

#PlacesToolbarItems > .bookmark-item[label="Privat"] image {
  padding: 0 0 16px 16px;
  background-image: url("..//Icons/1.gif");
}

BarbaraZ-

Ich habe es jetzt so in die UserChrome.css eingebunden:

CSS

/*     Privat */
#PlacesToolbarItems > toolbarbutton[label="Privat"] > image {
 display: none !important;
}

 #PlacesToolbarItems > .bookmark-item[label="Privat"] image {
  padding: 0 0 16px 16px;
  /*margin-right: -2px !important; 
  margin-left: 0px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;*/
  background-image: url("file://F:/FavIcons/Letter-P-icon.png") !important;
  
 }

/*#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label=Privat] {
    list-style-image: url('file:///F:/FavIcons/Letter-P-blue-icon.png') !important;
    }*/

Alles anzeigen

Leider klappt es nicht.

Ich werde morgen mal meine ganzen CSS Code deaktivieren und dann Stück für Stück zuschalten.

Der Fehler muss sich doch finden lassen.

Melde mich dann wieder.

Bis hierhin erst einmal Danbke für Eure Hilfe.

FuchsFan

Zitat von 2002Andreas

Bei deinem Code kannst du dir die letzten 3 Reihen sparen.

Und es müssen zusammenhängende Namen vergeben werden, also keine Leerzeichen. Auch Sonderzeichen, wie Klammern, verhindern die Anzeige. Ansonsten o.k.

2002Andreas

Zitat von BarbaraZ-

Leider klappt es nicht.

Teste bitte auch mal diesen Code.

Sollte es damit funktionieren, dann passt der Pfad zu deinem Icon nicht.

CSS

#PlacesToolbarItems > toolbarbutton[label="Privat"] > image {
display: none !important;
}

#PlacesToolbarItems > toolbarbutton[label="Privat"]::before {
margin-right: -2px !important;
margin-left: 0px !important;
content: '' !important;
display: block !important;
width: 19px !important;
height: 15px !important;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABc0lEQVQ4jY2Tv0sCYRjHv/1CSCE0Ca6hDK+h+bYagya3htrNZ7IayqG8KAjkcCgwRF+IFIsKT2gIdYkooSXfKcea7994WvL8cSfXF77Ly/v9vD+e5wH6xDnVhxEKX7aUWaOu+4+rKQBjo/bZEoLZbd2v17KTu6WUZ1jTyAYs3raTSv59BQACh5W5qb3yHRKFmCPIOdUnBDORZAA2YKksN5R86yKYaawBwETyZgtUfHQ9mUiylDwAAADl6nUzZDRLOLgPAwCo+IJ4cR1CWEwkbUvJzNwDLJtfJ/MVuQAAIaN+Pa1X4wCAHXEKKpyhG+qamQduoJqdTKTyeQQAQaO57dfNBwBAohBDovgMor8U98JCWDYganZWI5X2BwDMnDeigXTtBwAQz6tIiG8QSRbCctgd8BQNpKtOgJv//QQhLNY0sj0M8PzEfhFJG+JexrqzjMPqQpyN9ObdSP2QAYCjlUvurewCcciv17Lj+x7D5KZR4/wLuJ4hbG0bKogAAAAASUVORK5CYII=") !important;
background-repeat: no-repeat !important;
background-position: 0px 0px !important;
background-size: 15px 15px !important;
}

Alles anzeigen

So sollte das dann aussehen:

Zitat von FuchsFan

Ansonsten o.k.

Danke

FuchsFan

Zitat von BarbaraZ-

Leider klappt es nicht.

Wenn mich nicht alles täuscht, dann fehlt in Zeile 14 vor dem F der dritte Schrägstrich.

grisu2099

BarbaraZ- : In deinem Code aus #11 fehlt in Zeile 14 ein /

Teste bitte mal diese Zeile: background-image: url("file:///F:/FavIcons/Letter-P-icon.png") !important;

2002Andreas

Zitat von FuchsFan

der dritte Schrägstrich.

Laut Code aus Beitrag Nr.3 war er vorhanden.

Trotzdem hat es nicht funktioniert.

Es könnte ja auch der kompl. Pfad nicht stimmen

Darum mein Vorschlag mit dem base64 Code.

BarbaraZ-

grisu2099 Das mit dem fehlenden / war nur ein Versuch. Beim richtigen Aufruf ist es natürlich drin.

grisu2099

Hast du denn den Pfad nochmal genau überprüft?

FuchsFan

Zitat von 2002Andreas

Es könnte ja auch der kompl. Pfad nicht stimmen

Genau, sonst müsste es ja funktionieren, auf jeden Fall mit base64.

2002Andreas

Zitat von FuchsFan

auf jeden Fall mit base64

So ist es.

Klappt es damit, stimmt der Pfad nicht

Oder der Name der css Datei passt nicht überein mit dem der Import Regel.