Firefox Navigations-Symbolleisten Button-Icons anpassen

codejunky

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.

boardraider

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

codejunky

Vielen Dank, aber was müsste ich denn in die Userchrome.css eingeben um ein Button-Icon zu verändern?

pcinfarkt

... einen in sich geschlossenen und syntaxmäßig akzeptierten css- Schnipsel mir eineindeutiger Ansprache, Zuordnung und deinem auffindbaren oder codierten Wunsch-Icon (Image). :wink:

codejunky

Zitat von pcinfarkt

... einen in sich geschlossenen und syntaxmäßig akzeptierten css- Schnipsel mir eineindeutiger Ansprache, Zuordnung und deinem auffindbaren oder codierten Wunsch-Icon (Image). :wink:

:shock: :-?? Geht es vielleicht etwas genauer? :?

pcinfarkt

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.

[1] http://www.pcwelt.de/forum/1076686-post84.html ff

codejunky

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?

boardraider

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.

codejunky

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:

CSS

/* "geschlossene Tabs Wiederherstellen Button" Icon verändern */
#geschlossene Tabs Wiederherstellen Button
{
list-style-image : url("file://C:/Bilder/button.gif") !important;
}

boardraider

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.

codejunky

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.

boardraider

Kopiere den URL in deinen Browser und prüfe, ob du das Bild siehst.

codejunky

Zitat von boardraider

Kopiere den URL in deinen Browser und prüfe, ob du das Bild siehst.

Ja, ich sehe das Bild und 24 x 24 Pixel müsste doch ok sein, oder?
Leider sehe ich das Icon in der Toolbar immernoch nicht.

boardraider

Wie bindest du den Code ein? userChrome.css oder über Stylish?

codejunky

Ich benutzte Userchrome.css

Kashmir

Musst du unbedingt ein Button dafür haben?
geht doch auch über das Kontextmenü vom TMP.....

pcinfarkt

//
Kashmir,
... und braucht man unbedingt TMP? :shock:

codejunky

B²T:
Hab die Lösung jetzt fast gefunden:

CSS

/* 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;
}

Alles anzeigen

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:)

CSS

#btn_undoclose [buttonover="true"]
{
list-style-image : url("file://C:/Dokumente und Einstellungen/Pascal/Anwendungsdaten/Mozilla/Firefox/Profiles/e8d89dn3.default/tba.png") !important;
}

codejunky

Kann mir jemand helfen?

boardraider

Quelle: codejunky

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.