einzelne Icons per CSS anpassen

Hallo,

ich würde gern einige einzelne Addon-Icons verändern, die sich in den verschiedenen Leisten befinden.

Zum einen geht es um ein Symbol von "Back To Top" (https://addons.mozilla.org/de/firefox/addon/back-to-top/), das sich in der Menüleiste befindet und diese unnötig verbreitert, da es zu groß ist (siehe 1. Leiste normal, 2. Leiste mit großem Symbol). Ich habe mir einen CSS-Code zusammengeschnipselt, mit dem ich es zwar schaffe, das einzelne Icon anzusprechen, leider wird es dabei aber nur in der Breite gestaucht, statt sich insgesamt zu verkleinern (siehe 3.):

#b2tTBUnicon {
width:16px !important;
height:16px !important;
}

Das leidige Problem mit zu großen Symbolen ist mir über die Jahre immer mal wieder begegnet und wenn ich nun einen Code hätte, mit dem ich diese effektiv ansprechen könnte, fände ich das schon super. Die Icon-ID habe ich mit DOM Inspector (https://addons.mozilla.org/de/firefox/add…inspector-6622/) und dem Hilfstool InspectorWidget (https://addons.mozilla.org/de/firefox/addon/inspectorwidget/) rausgefunden. Das Icon selbst in der xpi-Datei oder dem Profilordner zu ändern, wie ich es früher schonmal bei anderen Erweiterungen gemacht habe, hat in diesem Fall nicht funktioniert.

Das andere Icon, um das es mir geht, ist das von ReminderFox (https://addons.mozilla.org/de/firefox/addon/reminderfox/), das in den Addon-Einstellungen als "Anzeige" bezeichnet wird (ID: reminderFox-statusLabel). Es ist das Symbol, über das man mit Rechtsklick etwa in die Einstellungen, mit Linksklick in den erweiterten Kalender mit Terminen usw. kommt und das je nach Einstellung aktuelle Termine auch schriftlich ausgibt. Es befindet sich in einer Art "Rahmen", der wie eine Vertiefung wirkt (siehe 4.). Kann man diesen "Rahmen" entfernen, damit es wieder so aussieht, wie unter FF 3.6?

Danke und Grüße

FF 7.0.1

Hallo Andreas,

danke für deine Antwort. Ich habe deinen Vorschlag gerade ausprobiert, wird der Code mit Stylish jedoch aktiviert, verschwindet das Icon und ich kann es auch nicht wiederfinden :-??? Irgendwas scheint hier schiefzulaufen. Es handelt sich um ein Icon, das über Rechtsklick auf Leiste > Anpassen eingefügt und verschoben werden kann.

Ok, komisch, woran könnte es dann liegen? Ich fand es schon seltsam, dass Back To Top die von mir in der xpi-Datei geänderten Icons nicht bzw. nur bedingt angenommen hat. So konnte ich das Icon unter about:addons zwar verändern, das besagte in der Symbolleiste jedoch nicht. Hatte kurz überlegt, ob die Erweiterung so programmiert ist (oder auf eine neue "FF-Funktion" zurückgreift), die Standardsymbole auto-skaliert oder so.. Ist natürlich reine und ziemlich unbegründete Spekulation meinerseits, da ich von Progammierung nicht viel Ahnung habe.

Ich habe gerade nochmal mit DOM Inspector und InspectorWidget nachgesehen und auch hier bewege ich mich mit meinen Kenntnissen auf eher dünnem Eis. Die ID ist id="b2tTBUnicon". Da stehen noch andere Kategorien, willst du noch was bestimmtes wissen?

Werde gleich mal testen, ein anderes Icon zu verändern. Ein erster Versuch mit ReminderFox ist bereits fehlgeschlagen und das Symbol ist ebenfalls verschwunden..

Ich schiebe mal nach.. Muss das Icon denn eine bestimmte Endung haben, z.b. *.ico? Ich hantiere hier nämlich gerade mit png-Dateien.. Ein weiterer Test mit dem PageZipper-Icon verlief auch negativ (Icon verschwindet).

Ok, es funktioniert jetzt. Ich hatte irgendwie versäumt, die Dateiendung des Icons im Code zu erwähnen, echt peinlich :oops: Tut mir leid, dich damit aufgehalten zu haben. Die Lösung ist auf jeden Fall sehr schick. Darf ich trotzdem nochmal fragen, ob diese Methode Vorteile ggü. der hat, wo man über einen Code das Icon reskaliert?

Ok, dann bin ich ja erleichtert.

Zitat von 2002Andreas

Das Icon bleibt bei einem Update der Erweiterung auch erhalten.

Im Vergleich zur Methode "Icons in der xpi ersetzen" oder wenn man an einem bestimmten Icon hängt, macht das sicher Sinn. Ich werde auch sogleich deine Methode verwenden für die Erweiterungen, wo ich die Icons manuell getauscht habe, denn ich musste sie nämlich tatsächlich bei jedem Update wieder neu vergeben.

Aber wenn es einem nicht um das Icon selbst, sondern nur um die Größe geht, kann dann nicht der Ansatz einer Reskalierung ebenso sinnvoll sein oder habe ich hier einen Denkfehler? So könnten bestimmte Symbole z.B. schnell und unkompliziert per Code verändert werden (ohne sie erst extrahieren und bearbeiten zu müssen) und neue Designs des Autors würden nach einem Update sofort bemerkt :-??

Zitat von 2002Andreas

Als Spielerei könntest du das Icon auch wechseln lassen bei hover :wink:

hehe, das versuchen wir lieber an anderer Stelle

alles klar, dann versuche ich nochmal ein wenig zu spielen, kann ansonsten aber auch gut mit der externen-Bild-Methode leben. Die ist ja schon ziemlich klasse

Zitat von 2002Andreas

Wenn du einmal damit anfängst wirst du süchtig.....Achtung also :wink:

hehe, das kann ich mir denken. Es hat mich ja jetzt bereits gepackt

Dann erstmal vielen Dank dir an dieser Stelle und einen schönen Abend noch.

Grüße,
bluemule

Hallo,

da bin ich nochmal. Ich dachte, statt extra einen neuen Thread zu öffnen, hänge ich mich nochmal schnell hier ran.

Ich versuche gerade einige Icons mithilfe des obigen Codes zu ersetzen. Nun bin ich auf ein neues Problem gestoßen. Das ReminderFox-Symbol, das ich oben schon angesprochen habe, hat eine kleine Tücke.. Es exisitieren drei Versionen, die die Farbe des Icons je nach Situation ändern: 1. keine Termine, 2. Termine in nächster Zeit vorhanden und 3. aktueller Termin. Wenn ich das Symbol mit diesem Code verändere

#reminderFox-statusLabel {
list-style-image: url("file:///C:/noReminderBow.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important }

funktioniert das zwar, jedoch wird dem jew. Status nicht mehr Rechnung getragen, d.h. es verändert sich nicht mehr situativ. DOM Inspector zeigt mir für die drei Symbolvarianten die gleiche ID, aber jeweils einen anderen "status". Kann ich diesen Status oder irgendeinen anderen Wert so in den Code integrieren und dazu drei verschiedene Bilder angeben, damit es wieder funktioniert, wie es soll? :roll:

Genaugenommen würde ich gern id="reminderFox-statusLabel" verknüpfen mit je einem Eintrag für
status="noReminders" mit Bild "noReminderBow.png",
status="upcomingReminder" mit Bild "upcomingReminderBow.png" und
status="currentReminder" mit Bild "bow.png".

Ich muss jetzt nochmal weg und weiß daher nicht, ob ich heute noch dazu komme, zu antworten. In diesem Fall nochmal einen schönen Abend.

Danke + Grüße

Juhuu! Ich habe jetzt mithilfe deiner Anleitung etwas rumgebastelt und es hat funktioniert!! Das ist ja wirklich mal genial Vielen Dank nochmal und liebe Grüße, bluemule

Hier noch der Code:

#reminderFox-statusLabel[status="noReminders"] {
list-style-image: url("file:///C:/Dokumente und Einstellungen/xxx/icons Firefox/reminderfox/noReminderBow.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important }


#reminderFox-statusLabel[status="upcomingReminder"] {
list-style-image: url("file:///C:/Dokumente und Einstellungen/xxx/icons Firefox/reminderfox/upcomingReminderBow.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important }


#reminderFox-statusLabel[status="currentReminder"] {
list-style-image: url("file:///C:/Dokumente und Einstellungen/xxx/icons Firefox/reminderfox/bow.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important }