Hey,
ich habe die Tab-Mix Plus Erweiterung für Firefox, welche über einen "geschlossene Tabs Wiederherstellen" Button in der Navigations-Symbolleiste verfügt. Ich wollte fragen ob es möglich ist den Icon dieses Buttons oder generell die der Firefox Buttons (Refresh, Home, etc.) zu verändern.
Firefox Navigations-Symbolleisten Button-Icons anpassen
-
codejunky -
6. Juli 2009 um 14:53 -
Erledigt
-
-
Ja das geht mit CSS via userChrome.css oder Stylish (Erweiterung). Es gibt auch fertige Lösungen in Form von Themes. Siehe dazu auf addons.mozilla.org
-
Vielen Dank, aber was müsste ich denn in die Userchrome.css eingeben um ein Button-Icon zu verändern?
-
... einen in sich geschlossenen und syntaxmäßig akzeptierten css- Schnipsel mir eineindeutiger Ansprache, Zuordnung und deinem auffindbaren oder codierten Wunsch-Icon (Image). :wink:
-
-
Gut. Ich kann höchstens noch einen ungepflegten und uralten Link [1] anbieten.
Vom Prinzip sollte ER aber noch gewisse Aha- Effekte hervorrufen können. -
Mhh... Leider hilft mir das nicht wirklich weiter. Was müsste ich denn eingeben, wenn ich nur das Icon für einen bestimmten Button (z.B. refresh) verändern möchte?
-
pcinfarkt vermerkte seinen Link oben mit ff. Im verlinkten Dokument finden sich weitere Links insbesondere bzgl. DOMInspector. Damit kannst du die ids der betreffenden Elemente bestimmen.
https://www.camp-firefox.de/forum/viewtopic.php?f=4&t=35355
In dem Thread sind unzählige Anwendungsbeispiele, eventuell auch für dich interessantes. -
Gut, ich bin jetzt soweit gekommen, dass ich etwas in der Richtung in die Userchrome.css schreiben muss.
CSS/* "geschlossene Tabs Wiederherstellen Button" Icon verändern */ #name des Buttons { list-style-image : url("file://C:/Bilder/button.gif") !important; }
Meine Frage ist jetzt nur: Wie finde ich heraus, wie der Button wirklich heißt? Ich kann ja wohl schlecht folgenes schreiben: -
Zitat
pcinfarkt vermerkte seinen Link oben mit ff. Im verlinkten Dokument finden sich weitere Links insbesondere bzgl. DOMInspector. Damit kannst du die ids der betreffenden Elemente bestimmen.
-
Erstmal vielen Dank für die Hilfe. Habe es jetzt soweit geschafft:
CSS/* geschlossene Tabs Wiederherstellen Button Icon verändern */ #btn_undoclose { list-style-image : url("file://C:/Dokumente und Einstellungen/Pascal/Eigene Dateien/Eigene Bilder/tb.png") !important; }
Leider habe ich jetzt folgenenes Problem: Das Icon verschwindet einfach. Der Button ist zwar noch anklickbar, halt nur ohne Bild. -
Kopiere den URL in deinen Browser und prüfe, ob du das Bild siehst.
-
-
Wie bindest du den Code ein? userChrome.css oder über Stylish?
-
Ich benutzte Userchrome.css
-
Musst du unbedingt ein Button dafür haben?
geht doch auch über das Kontextmenü vom TMP..... -
//
Kashmir,
... und braucht man unbedingt TMP? :shock: -
B²T:
Hab die Lösung jetzt fast gefunden:CSS
Alles anzeigen/* geschlossene Tabs Wiederherstellen Button Icon verändern */ #btn_undoclose { list-style-image : url("file://C:/Dokumente und Einstellungen/Pascal/Anwendungsdaten/Mozilla/Firefox/Profiles/e8d89dn3.default/tbp.png") !important; } #btn_undoclose [disabled="true"] { list-style-image : url("file://C:/Dokumente und Einstellungen/Pascal/Anwendungsdaten/Mozilla/Firefox/Profiles/e8d89dn3.default/tbd.png") !important; }
Leider gibt es immernoch 2 Probleme:
1.Wenn der Button disabled ist, dann befindet sich links von ihm eine Lücke.
[Blockierte Grafik: http://img194.imageshack.us/img194/3142/blamby.jpg]
2.Wenn man mit der Maus über den Button fährt, verschwindet er.
(Leider weiß ich nicht genau, was ich dafür eingeben soll; habs schon so probiert:) -
Kann mir jemand helfen?
-
Zitat von codejunky
1.Wenn der Button disabled ist, dann befindet sich links von ihm eine Lücke.
Nein, nicht ganz. Fahr mal mit der Maus über die Lücke, da erscheint ein Tooltip. Daran erkennst du, dass dort der eigentliche Button sitzt. Rechts davon (dein Icon) liegt der Dropmarker und dessen Icon hast du damit ersetzt.
Versuch mal den Code:
CSS#btn_undoclose toolbarbutton { list-style-image : url("xxx") !important; -moz-image-region: rect(0 16px 16px 0); }
Die Pixelwerte musst du dann entsprechend an deine Gegebenheiten anpassen. -