Hallo,
kann man die Icons der Lesezeichen in der Lesezeichen-Symbolleiste ändern?
Ich finde dafür zwar alte Addons, aber die funktionieren ab FF57 ja leider nicht mehr.
Geht das mit Photon überhaupt noch?
Icons in Lesezeichen-Symbolleiste ändern
-
Elkinator -
21. Januar 2018 um 13:05 -
Erledigt
-
wenn ich das rihtig verstanden habe, dann biste hier richtig.
-
es geht Elkinator wohl eher um die FavIcons der Lesezeichen, als um die Ordner ...oder ?
-
Ich wollte ja auch weg von den grauen Ordnern, aber mir hat es ja genügt einzelnen Ordnern ein eigenes Icon zu geben.
https://www.camp-firefox.de/forum/viewtopi…066177#p1066177 -
soweit ich es weiß, gibt es noch keinen Ersatz für Favicon Changer etc. als WebExtension.
-
Mit etwas Aufwand kann man jedem einzelnen Lesezeichen ein eigenes Icon vergeben über die userChrome.css.
In diesem Beispiel bekommt das erste Lesezeichen in der Lesezeichensymbolleiste ein neues eigenes Icon.
CSS
Alles anzeigen#PlacesToolbarItems > toolbarbutton:nth-child(1) > image { display:none!important} #PlacesToolbarItems > toolbarbutton:nth-child(1){ -moz-appearance:none!important; background: url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD///8AEiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//////8AEiP//wAc7v8AHO7/AB3v/wAc7v8AHO7/ABzu/wAc7v8AHO7/ABzu/wAd7/8AHe//ABzu/wAc7/8AHe//EiP//xIj//8SI////////09V//+6uv////////////9PVf//z87///////+ysv//EiP//5ub////////0tH//xIj//8SI///EiP///////9PVf///////xIj////////T1X///////8SI////////5qZ////////EiP//xIj//8TI///EiP//xIj////////T1X///////8TI////////09V////////EiP///////+amf/////////////S0f//EiP//xIj//8SI////////09V////////EiL///////9PVf////////////+6uv//EiP//7q6///v8P//0tH//xIj//8SI///EyP///////8SI///EiP//xIj//8SI///EiP///////8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//////////////////xIj//8SI///EiP//xMj////////EiP//xIj//8SI///EiP//xIj//8SI///EiP//9nZ//8SI///EiP//xMj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiL//9na//////////////////////////////////////////////////////////////////////////////////////////////////+r5/b/AAAA//372P//////R5K5/wAAAP/IiWb//////26v1f8AAAD/rGZE////////////////////////////qub1/wAAAP/+/Nj/qub2/wAAAP//////AAAA//782P8TcJ3//vzY/wAAAP///////////////////////////6rm9f8AAAD//vzY/6rm9v8AAAD//////wAAAP/+/Nj/AAAA//////8AAAD///////////////////////////9ur9b/AAAA/+PFov//////R5K6/wAAAP/JiWb//////wAAAP//////AAAA////////////////////////////AAAA//+p7/8AAAD/////////////////////////////////////////////////////////////////bq7V/wxKf///////rGZE/+PFov//////////////////////////////////////////////////////gAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") no-repeat !important; width:auto!important; padding-left:18px!important; margin-left:0px!important; margin-top:4px!important; background-position:3px 2px!important;} #PlacesToolbarItems > toolbarbutton:nth-child(1):hover{ background:lightblue url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD///8AEiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//////8AEiP//wAc7v8AHO7/AB3v/wAc7v8AHO7/ABzu/wAc7v8AHO7/ABzu/wAd7/8AHe//ABzu/wAc7/8AHe//EiP//xIj//8SI////////09V//+6uv////////////9PVf//z87///////+ysv//EiP//5ub////////0tH//xIj//8SI///EiP///////9PVf///////xIj////////T1X///////8SI////////5qZ////////EiP//xIj//8TI///EiP//xIj////////T1X///////8TI////////09V////////EiP///////+amf/////////////S0f//EiP//xIj//8SI////////09V////////EiL///////9PVf////////////+6uv//EiP//7q6///v8P//0tH//xIj//8SI///EyP///////8SI///EiP//xIj//8SI///EiP///////8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//////////////////xIj//8SI///EiP//xMj////////EiP//xIj//8SI///EiP//xIj//8SI///EiP//9nZ//8SI///EiP//xMj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiL//9na//////////////////////////////////////////////////////////////////////////////////////////////////+r5/b/AAAA//372P//////R5K5/wAAAP/IiWb//////26v1f8AAAD/rGZE////////////////////////////qub1/wAAAP/+/Nj/qub2/wAAAP//////AAAA//782P8TcJ3//vzY/wAAAP///////////////////////////6rm9f8AAAD//vzY/6rm9v8AAAD//////wAAAP/+/Nj/AAAA//////8AAAD///////////////////////////9ur9b/AAAA/+PFov//////R5K6/wAAAP/JiWb//////wAAAP//////AAAA////////////////////////////AAAA//+p7/8AAAD/////////////////////////////////////////////////////////////////bq7V/wxKf///////rGZE/+PFov//////////////////////////////////////////////////////gAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") no-repeat !important; width:auto!important; padding-left:18px!important; background-position:3px 2px!important; }Angesprochen werden die Lesezeichen durch die Zahl in diesem Eintrag dann: nth-child(1).
Aber Achtung, wenn man das Lesezeichen dann mal verschiebt bzw. ein weiteres davor setzt, muss die Zahl natürlich wieder angepasst werden.Unter background: url kann man dann sein eigenes Icon einfügen, entweder als base64 Eintrag, oder durch ein Icon von seiner Festplatte.
-
Ja, so wurde mir mit meinem ersten Lesezeichen (Link zu den gespeicherten Zugangsdaten) in der Lesezeichenleiste geholfen :klasse:
Und wenn den Wert hinter "margin-top" verändert, kann man das auch schön in der Höhe anpassen. -
Hallo 2002Andreas
Vielen Dank für den Code. Habe ich gleich mal eingesackt. :wink:
:klasse:
Mfg.
Endor -
Vielen Dank für den Code.
Hallo Endor...freut mich und war gern geschehen
-
soweit ich es weiß, gibt es noch keinen Ersatz für Favicon Changer etc. als WebExtension.
Es gibt jetzt den favicon-customizer: https://addons.mozilla.org/de/firefox/add…con-customizer/
-
Funktioniert, allerdings nur mit .png-Grafiken..
Immerhin... danke für den Tipp
-
Ich muss mich hier nochmal einklinken:
Wie bekomme ich es hin, dass der Hintergrund beim Hover der normale/standardmäßige ist, also der den andere Lesezeichen benutzen, die nicht ein neues Icon bekommen haben?
Mit folgendem Code geht es nicht:CSSbackground:auto!important; -
Nur ein Beispiel.
Damit hat dein 11 tes Lesezeichen das alte Logo von Youtube.CSS
Alles anzeigen#PlacesToolbarItems > toolbarbutton:nth-child(11) > image { display:none!important; } #PlacesToolbarItems > toolbarbutton:nth-child(11){ -moz-appearance:none!important; background: url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD///8AEiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//////8AEiP//wAc7v8AHO7/AB3v/wAc7v8AHO7/ABzu/wAc7v8AHO7/ABzu/wAd7/8AHe//ABzu/wAc7/8AHe//EiP//xIj//8SI////////09V//+6uv////////////9PVf//z87///////+ysv//EiP//5ub////////0tH//xIj//8SI///EiP///////9PVf///////xIj////////T1X///////8SI////////5qZ////////EiP//xIj//8TI///EiP//xIj////////T1X///////8TI////////09V////////EiP///////+amf/////////////S0f//EiP//xIj//8SI////////09V////////EiL///////9PVf////////////+6uv//EiP//7q6///v8P//0tH//xIj//8SI///EyP///////8SI///EiP//xIj//8SI///EiP///////8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//////////////////xIj//8SI///EiP//xMj////////EiP//xIj//8SI///EiP//xIj//8SI///EiP//9nZ//8SI///EiP//xMj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiL//9na//////////////////////////////////////////////////////////////////////////////////////////////////+r5/b/AAAA//372P//////R5K5/wAAAP/IiWb//////26v1f8AAAD/rGZE////////////////////////////qub1/wAAAP/+/Nj/qub2/wAAAP//////AAAA//782P8TcJ3//vzY/wAAAP///////////////////////////6rm9f8AAAD//vzY/6rm9v8AAAD//////wAAAP/+/Nj/AAAA//////8AAAD///////////////////////////9ur9b/AAAA/+PFov//////R5K6/wAAAP/JiWb//////wAAAP//////AAAA////////////////////////////AAAA//+p7/8AAAD/////////////////////////////////////////////////////////////////bq7V/wxKf///////rGZE/+PFov//////////////////////////////////////////////////////gAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") no-repeat !important; background-position: center !important; width: 25px; } #PlacesToolbarItems > toolbarbutton:nth-child(11):hover{ background: lightgrey url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD///8AEiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//////8AEiP//wAc7v8AHO7/AB3v/wAc7v8AHO7/ABzu/wAc7v8AHO7/ABzu/wAd7/8AHe//ABzu/wAc7/8AHe//EiP//xIj//8SI////////09V//+6uv////////////9PVf//z87///////+ysv//EiP//5ub////////0tH//xIj//8SI///EiP///////9PVf///////xIj////////T1X///////8SI////////5qZ////////EiP//xIj//8TI///EiP//xIj////////T1X///////8TI////////09V////////EiP///////+amf/////////////S0f//EiP//xIj//8SI////////09V////////EiL///////9PVf////////////+6uv//EiP//7q6///v8P//0tH//xIj//8SI///EyP///////8SI///EiP//xIj//8SI///EiP///////8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//////////////////xIj//8SI///EiP//xMj////////EiP//xIj//8SI///EiP//xIj//8SI///EiP//9nZ//8SI///EiP//xMj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiL//9na//////////////////////////////////////////////////////////////////////////////////////////////////+r5/b/AAAA//372P//////R5K5/wAAAP/IiWb//////26v1f8AAAD/rGZE////////////////////////////qub1/wAAAP/+/Nj/qub2/wAAAP//////AAAA//782P8TcJ3//vzY/wAAAP///////////////////////////6rm9f8AAAD//vzY/6rm9v8AAAD//////wAAAP/+/Nj/AAAA//////8AAAD///////////////////////////9ur9b/AAAA/+PFov//////R5K6/wAAAP/JiWb//////wAAAP//////AAAA////////////////////////////AAAA//+p7/8AAAD/////////////////////////////////////////////////////////////////bq7V/wxKf///////rGZE/+PFov//////////////////////////////////////////////////////gAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") no-repeat !important; background-position: center !important; width: 25px!important; }Das Icon musst du dir natürlich jeweils anpassen, und auch die Position dann selber raussuchen und anpassen.
-
Danke dir.
Das habe ich alles verstanden, nur ich will dieselbe Hoverfarbe wie bei nicht geänderten Icons. -
dieselbe Hoverfarbe
Ist doch im Code enthalten...lightgrey -
Bei mir wird mit lightgrey eine andere Farbe angezeigt
Ich verwende auch ein Theme. Liegt es daran?
Gibt es da kein auto-Befehl, der sich diese Hoverfarbe zieht? -
testerer
Teste einmal diesen CSS-Code, und berichte ob dieser bei dir besser funktioniert.
Hier in diesem Beispiel wird das Lesezeichen mit dem Namen YouTube mit demjenigen Icon von Andreas ersetzt.CSS
Alles anzeigentoolbarbutton.bookmark-item[label^="YouTube"] > image{ visibility: hidden; } toolbarbutton.bookmark-item[label^="YouTube"]{ background: url('data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD///8AEiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//////8AEiP//wAc7v8AHO7/AB3v/wAc7v8AHO7/ABzu/wAc7v8AHO7/ABzu/wAd7/8AHe//ABzu/wAc7/8AHe//EiP//xIj//8SI////////09V//+6uv////////////9PVf//z87///////+ysv//EiP//5ub////////0tH//xIj//8SI///EiP///////9PVf///////xIj////////T1X///////8SI////////5qZ////////EiP//xIj//8TI///EiP//xIj////////T1X///////8TI////////09V////////EiP///////+amf/////////////S0f//EiP//xIj//8SI////////09V////////EiL///////9PVf////////////+6uv//EiP//7q6///v8P//0tH//xIj//8SI///EyP///////8SI///EiP//xIj//8SI///EiP///////8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//////////////////xIj//8SI///EiP//xMj////////EiP//xIj//8SI///EiP//xIj//8SI///EiP//9nZ//8SI///EiP//xMj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiL//9na//////////////////////////////////////////////////////////////////////////////////////////////////+r5/b/AAAA//372P//////R5K5/wAAAP/IiWb//////26v1f8AAAD/rGZE////////////////////////////qub1/wAAAP/+/Nj/qub2/wAAAP//////AAAA//782P8TcJ3//vzY/wAAAP///////////////////////////6rm9f8AAAD//vzY/6rm9v8AAAD//////wAAAP/+/Nj/AAAA//////8AAAD///////////////////////////9ur9b/AAAA/+PFov//////R5K6/wAAAP/JiWb//////wAAAP//////AAAA////////////////////////////AAAA//+p7/8AAAD/////////////////////////////////////////////////////////////////bq7V/wxKf///////rGZE/+PFov//////////////////////////////////////////////////////gAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==') no-repeat !important; background-size: 16px !important; background-position-x: 4px !important; background-position-y: 2.5px !important; } toolbarbutton.bookmark-item[label^="YouTube"]:hover{ background-color: var(--toolbarbutton-hover-background) !important; }
Sollte dann so aussehen -> siehe Screenshot
[attachment=0]firefox_2019-02-25_14-34-28.png[/attachment]
Angesprochen werden die Lesezeichen durch die Zahl in diesem Eintrag dann: nth-child(1).
Aber Achtung, wenn man das Lesezeichen dann mal verschiebt bzw. ein weiteres davor setzt, muss die Zahl natürlich wieder angepasst werden.
Ich würde das persönlich anders lösen, da man die Lesezeichen auch mittels der label Eigenschaft selektieren kann (ergo dem Lesezeichennamen), was dann auch das ständige Anpassen der Zahl im CSS-Code überflüssig macht, wenn das jeweilige Lesezeichen verschoben werden sollte.
Also ergo so:CSS
Alles anzeigentoolbarbutton.bookmark-item[label^=""] > image{ visibility: hidden; } toolbarbutton.bookmark-item[label^=""]{ background: url('') no-repeat !important; background-size: 16px !important; background-position-x: 4px !important; background-position-y: 2.5px !important; } toolbarbutton.bookmark-item[label^=""]:hover{ background-color: var(--toolbarbutton-hover-background) !important; }
Bei label dann nur noch den Lesezeichennamen eintragen, welchen man gerne abändern möchte, und bei url den base64-Code des gewünschten Icons ergänzen. -
ergo dem Lesezeichennamen
Hallo macko..das ist generell so richtig, aber nur wenn die Lesezeichen auch einen Namen haben. Wenn man sich nur die Icons anzeigen lässt, funktioniert das so ja nicht.
Ich pers. gebe den Lesezeichen einen Namen/Buchstaben, und lasse den dann per CSS einfach wieder ausblenden:
ZitatAlles anzeigen#PlacesToolbarItems > toolbarbutton[label="yt"] >.toolbarbutton-text,
#PlacesToolbarItems > toolbarbutton[label="yt"] > image {
display: none !important;
}#PlacesToolbarItems > toolbarbutton[label="yt"] {
background: url(.....)
#PlacesToolbarItems > toolbarbutton[label="yt"]:hover{
background-color: lightblue !important;
} -
das ist generell so richtig, aber nur wenn die Lesezeichen auch einen Namen haben. Wenn man sich nur die Icons anzeigen lässt, funktioniert das so ja nicht.
Ja natürlich, aber damit einem auf der Lesezeichenleiste nur Icons ohne Titel angezeigt werden, muss dafür auch nicht zwangsweise der Titel des Lesezeichens gelöscht werden. Denn der Lesezeichentitel kann ja, wie du schon selbst sagst, mittels CSS ausgeblendet werden (und bei Bedarf auch bei hover wieder eingeblendet werden), womit dann auch das zeitaufwendige, manuelle Editieren jedes einzelnen Lesezeichens nicht mehr notwendig ist.Und ich denke, wenn man ja schon eine CSS-Anpassung nutzt, um die Icons auf der Lesezeichen-Symbolleiste zu ändern, dann kann man auch im gleichen Zug auch die Lesezeichentitel per CSS ausblenden lassen, falls denn dies gewünscht ist.