Internet

Lesezeichensymbol ändern in der Lesezeichensymbolleiste im Firefox




Zugegeben es ist nur eine optische Spielerei, aber manch ein User möchte gerne das eine oder andere Lesezeichensymbol ändern. Mir persönlich gefällt zum Beispiel das aktuelle Webseiten Symbol von ebay nicht. Also habe ich mir im Internet das alte Webseiten Symbol gesucht, und es in der Lesezeichensymbolleiste gegen das aktuelle ausgetauscht.

So sieht das aktuelle ebay Symbol mit dem Standardtext der Webseite in der Lesezeichensymbolleiste aus:

Lesezeichensymbol ändern

 

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

Hinweis:
Bei diesen CSS Codes geht es ausschließlich um das Standard Webseiten Symbol einer Webseite!

Und hier mal eine Erklärung wie man das mit dem CSS Code zum Ändern des Symbols machen muss.

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

Dann im Ordner chrome die userChrome.css Datei öffnen.

In diese Datei tragen wir nun folgenden CSS Code ein:

/* ebay Symbol geändert */

/* Damit wird der Text und das alte Symbol ausgeblendet */
#PlacesToolbarItems > toolbarbutton[label="ebay"] >.toolbarbutton-text,
#PlacesToolbarItems > toolbarbutton[label="ebay"] > image {
display: none !important;
}

/* Damit wird das neue Symbol eingefügt */
#PlacesToolbarItems > toolbarbutton[label="ebay"] {
background: url("data:image/gif;base64,R0lGODlhEAAQAPQaAAAAAEpzAD0AuUkA3ACWMQDcSUncALkAAJYAYrkAerl6AP8AAP9zSP9rj/+qAP+qJf+4SP//AI7U//+xscDAwNT/1NT/4//U1P/j1P/78P///////wAAAAAAAAAAAAAAACH5BAEAABsALAAAAAAQABAAAAVg4CaOZGmeaHpqrCayGwuQmiCwFUFoBmFRrdotwmAEeD7NZMFECAY3SEBXyFyYmsNCIBEoIg9CwXVdHM43AUPD2IkuWowmwVU7HITKq8FE21gFeSJAQS0ZMTAqiouMjSUhADs=") no-repeat !important;
background-position: center !important;
width: 20px !important;
}

/* Damit wird bei hover mit der Maus der Hintergrund hellgrau */
#PlacesToolbarItems > toolbarbutton[label="ebay"]:hover{
background-color: lightgrey !important;
}

(Dazu am besten den Text kopieren und in die userChrome.css wieder einfügen)

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

Sollte das Symbol bei hover mit der Maus nicht genau mittig sein, dann muss der Wert width:20px etwas angepasst werden.

Dann die Datei userChrome.css schließen und den Firefox neu starten. Dadurch wird der CSS Code aktiviert.

Und so sieht das dann mit dem neuen Webseiten Symbol von ebay in der Lesezeichensymbolleiste ohne Text aus:

Hinweis:
Der obige Code bezieht sich nur auf die User, die sich generell nur die Symbole ohne Text in der Lesezeichensymbolleiste anzeigen lassen. Darum muss erst noch dem Symbol per Rechtsklick..Eigenschaften ein beliebiger Namen geben werden. Und diesen Namen dann im Code unter label wieder einfügen. In meinem Beispiel habe ich den Standardtext von ebay ausgetauscht und den Namen ebay genommen.

Lesezeichensymbol ändern

 

Wer sich allerdings auch den Namen neben dem Symbol anzeigen lässt, der muss dazu diesen Code verwenden:

/* ebay Symbol geändert */

/* Damit wird das alte Symbol ausgeblendet */
#PlacesToolbarItems > toolbarbutton[label="ebay"] > image {
display: none !important;
}

/* Damit wird das neue Symbol eingefügt */
#PlacesToolbarItems > toolbarbutton[label="ebay"] {
background:
url("data:image/gif;base64,R0lGODlhEAAQAPQaAAAAAEpzAD0AuUkA3ACWMQDcSUncALkAAJYAYrkAerl6AP8AAP9zSP9rj/+qAP+qJf+4SP//AI7U//+xscDAwNT/1NT/4//U1P/j1P/78P///////wAAAAAAAAAAAAAAACH5BAEAABsALAAAAAAQABAAAAVg4CaOZGmeaHpqrCayGwuQmiCwFUFoBmFRrdotwmAEeD7NZMFECAY3SEBXyFyYmsNCIBEoIg9CwXVdHM43AUPD2IkuWowmwVU7HITKq8FE21gFeSJAQS0ZMTAqiouMjSUhADs=") no-repeat !important;
font-size:14.5px!important;
padding-left:25px!important;

background-position:5px 6px!important;
}

/* Damit wird bei hover mit der Maus der Hintergrund hellgrau */
#PlacesToolbarItems > toolbarbutton[label="ebay"]:hover{
background-color: lightgrey !important;
}

(Dazu am besten den Text kopieren und in die userChrome.css wieder einfügen)

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

Die obigen Werte sind evtl. noch etwas anzupassen.

Auch hier wieder den Firefox neu starten zur Aktivierung des CSS Codes.

Und so sieht das dann mit dem neuen Webseiten Symbol von ebay in der Lesezeichensymbolleiste mit Text aus:

Mit den beiden obigen Codes lässt sich selbstverständlich jedes Webseiten Symbol in der Lesezeichensymbolleiste austauschen. Dazu einfach nur unter label den neuen Namen eingeben, und ein passendes Symbol bei background eintragen. In meinem Beispiel handelt es sich um einen base64 Code, den man nur austauschen muss.

Auf dieser Seite im Internet kann man online ein Symbol in diesen base64 Code umwandeln lassen.

Bild in base64 umwandeln

Man kann aber auch ein vorhandenes eigenes Icons auf dem PC verwenden, oder sich eins aus dem Internet suchen, und downloaden, dann wird einfach der Name des Icons und der Speicherpfad auf dem PC davon alternativ vom base64 Code zwischen die beiden „“ eingetragen.

Dann würde der Eintrag in etwa so aussehen:

background: url("file:///C:/Users/Name/Ordner Name/Name der Datei") !important;

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.

Lesezeichensymbol ändern

Nach jeder Änderung in der userChrome.css Datei diese schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.

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

Danach noch einen Neustart vom Browser machen, und das Webseiten Symbol hat wieder das Standard Symbol der Webseite.

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

userChrome.css aufräumen

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

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

Hinweis:

Wer obige Änderung gemacht hat, den könnte evtl. auch dieser Beitrag interessieren, wo ich mal beschrieben habe, wie man die Symbole auch in einem Tab ändern kann:

Webseitensymbol im Tab ändern

LED Strip,TV LED Hintergrundbeleuchtung RGB 2M/6.56ft LED Streifen Für 40 bis 60 HDTV USB LED TV Beleuchtung mit 24keys Remote, LED Fernseher Beleuchtung
167 Bewertungen
LED Strip,TV LED Hintergrundbeleuchtung RGB 2M/6.56ft LED Streifen Für 40 bis 60 HDTV USB LED TV Beleuchtung mit 24keys Remote, LED Fernseher Beleuchtung*
von E-kingdom international company limited
  • 【Funktionsanwendungen】: USB LED Strip, vor allem für Hintergrund-TV-Dekoration verwendet, anpassen Sie Ihr Haus mit lebendigen LED baute die schöne Heimkino-Bereich---【ProdSG Passed】
  • 【Multicolor & Modes Auswahl】: LED Strip, gesteuert über IR-Fernbedienung, mit 24 Tasten Fernbedienung, hat 16 Farben und 4 dynamische Modi, dimmbar.
  • 【Entlastet die Augenbelastung】: TV Hintergrundbeleuchtung, Verringerung der Augenbelastung durch Unterschiede in der Bildhelligkeit verursacht, schafft eine schöne Bias-Beleuchtung beim Fernsehen oder Spielen
  • 【Einfach und praktisch】: LED Streifen, 180 DEGREE faltbar. Starkes doppelseitiges Klebeband mit einfach zu reißender Konstruktion, reinigen Sie die Oberfläche, bevor Sie das Band montieren
  • 【Sichere und einfache Installation】: LED fernseher beleuchtung,USB 5V, 4 * 50cm / 1,64ft für jeden Streifen, lang genug für die meisten TV und Computer-Monitor.
Prime Preis: € 13,99 Jetzt auf Amazon kaufen*
Preis inkl. MwSt., zzgl. Versandkosten

 

Tags
Mehr anzeigen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Auch interessant

Close