star-button tauschen

alpha-nbg

Hallo,

für das bookmarken einer Seite wird beim Firefox so ein "Stern" Symbol benutzt. Bis zur Version 28 war das Symbol noch in der Adresszeile und ich konnte es mit dem css bezeichner "#star-button" tauschen.

CSS

#star-button{
list-style-image: url("file:///C:/Users/root/icons/grau.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}


#star-button:hover{
list-style-image: url("file:///C:/Users/root/icons/blau.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}


#star-button[starred="true"] {
list-style-image: url("file:///C:/Users/root/icons/gelb.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

Alles anzeigen

Beim Firefox 29 funktioniert das nicht mehr. Weiss jemand, wie ich dieses Icon beim Firefox 29 tauschen kann?

[Blockierte Grafik: http://abload.de/img/starbuttonzjymg.png]

Gruß,
Armin

Bernd.

Weil es diesen Starbutton nicht mehr gibt.

Tip: besser wäre es, Bilder als Base64 einfügen:
http://www.motobit.com/util/base64-decoder-encoder.asp

Bsp

Zitat

.tab-throbber
{
list-style-image: url(data:image/png;base64,<bildercode>) !important;
width: 16px;
height: 16px;
}

Neu:

Zitat

#bookmarks-menu-button .toolbarbutton-icon
{
list-style-image: url(data:image/png;base64,<bildercode>) !important;
width: 16px;
height: 16px;
}

alpha-nbg

vielen Dank für den Tipp, funktioniert leider noch nicht. Wenn ich den code so eintrage

CSS

#bookmarks-menu-button .toolbarbutton-icon
{
list-style-image: url(data:image/png;base64,<bildercode>) !important;
width: 16px;
height: 16px;
}

verrschwindet das star icon. Es wird also schon mal das richtige icon angesprochen. Sobald ich aber die Base64 daten reinkopiert habe, wird wieder der Stern angezeigt.

CSS

#bookmarks-menu-button .toolbarbutton-icon
{
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAflJREFUeNqkU81rE0EUfzM76c6u+R+U5NZexFahai3SD8WWbdqkPWpE
bWma2JTdpIdSCl6FQvFQ8E+onoS0fkDBo9hCz714t4IeTNjd7IfvLbqkSZRKHzyGmff7/d7HzLAw
DOE8Jr79OIGrV64ZQogKZ7wXBQ8939v3fX/z8OjAJVD/5QEFrYJ+EzH9eOQi5o3neSZLp9M5Xddf
aZoGilAAieA4Dti2/Rn9LoJ9qcqa1OQNVVUBRYCqdmzEOPYWG7w++IUxdklKCbhGQVSGRqMBmGUH
QmgIReT1CzpglRGGzHVdCILgp2g2mxeTyWQcoJWAWBVlmWWchYlE4hQ56h339Xo9KVSpMspKpbca
gXvUHmIwzjll6xigpkngqVQqoGC7kyiJ/GmrPU4Je/v6PD4yOnKMbUQH/+PEGRsf/cQnJu+tj98Z
iwZ3VjJhc3M5GLo1tMaxldel5dL28O3hM4kQxsgY8CB//xlyP4rf8yhUqpaGE8u/f/fh1LRbjWYx
PZOB+YUnz3G7Ed1GS/yhVbV8JD/a233bIULkmew0LC4tbuK2Gl9nW5LHZsX0wyCcr9V2YxEiZ2ez
UCgWiGy2EniXShesVeulMWXEfWew7GJpqYPcrYJYZMUsu0EYFBV8RMvlp1vdyNGDO/n+9V+/9QV9
JvTy3wC/BBgA1PlC7RdrytcAAAAASUVORK5CYII=) !important;
width: 16px;
height: 16px;
}

Alles anzeigen

Der base64 code funktioniert aber, weil er sich mit einem base64 decoder wieder in das Bild zurückverwandel lässt.

Endor

Testen:

CSS

/* AGENT_SHEET */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {


#bookmarks-menu-button .toolbarbutton-icon
{
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAflJREFUeNqkU81rE0EUfzM76c6u+R+U5NZexFahai3SD8WWbdqkPWpEbWma2JTdpIdSCl6FQvFQ8E+onoS0fkDBo9hCz714t4IeTNjd7IfvLbqkSZRKHzyGmff7/d7HzLAwDOE8Jr79OIGrV64ZQogKZ7wXBQ8939v3fX/z8OjAJVD/5QEFrYJ+EzH9eOQi5o3neSZLp9M5XddfaZoGilAAieA4Dti2/Rn9LoJ9qcqa1OQNVVUBRYCqdmzEOPYWG7w++IUxdklKCbhGQVSGRqMBmGUHQmgIReT1CzpglRGGzHVdCILgp2g2mxeTyWQcoJWAWBVlmWWchYlE4hQ56h339Xo9KVSpMspKpbcagXvUHmIwzjll6xigpkngqVQqoGC7kyiJ/GmrPU4Je/v6PD4yOnKMbUQH/+PEGRsf/cQnJu+tj98ZiwZ3VjJhc3M5GLo1tMaxldel5dL28O3hM4kQxsgY8CB//xlyP4rf8yhUqpaGE8u/f/fh1LRbjWYxPZOB+YUnz3G7Ed1GS/yhVbV8JD/a233bIULkmew0LC4tbuK2Gl9nW5LHZsX0wyCcr9V2YxEiZ2ezUCgWiGy2EniXShesVeulMWXEfWew7GJpqYPcrYJYZMUsu0EYFBV8RMvlp1vdyNGDO/n+9V+/9QV9JvTy3wC/BBgA1PlC7RdrytcAAAAASUVORK5CYII=) !important;
width: 16px;
height: 16px;
}


}

Alles anzeigen

So funktioniert es hier und sieht so aus, aus dem Stern wird ein schwarzes Herz:
[Blockierte Grafik: http://i.imgur.com/9VNqKZT.png]
Mfg.
Endor

alpha-nbg

hab ich getestet, ich habe alles rausgeschmissen aus der userChrome.css und nur noch deinen code reinkopiert. Dann wird bei mir gar kein icon mehr angezeigt.

UserChrome.css:

CSS

/* AGENT_SHEET */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {


#bookmarks-menu-button .toolbarbutton-icon
{
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAflJREFUeNqkU81rE0EUfzM76c6u+R+U5NZexFahai3SD8WWbdqkPWpEbWma2JTdpIdSCl6FQvFQ8E+onoS0fkDBo9hCz714t4IeTNjd7IfvLbqkSZRKHzyGmff7/d7HzLAwDOE8Jr79OIGrV64ZQogKZ7wXBQ8939v3fX/z8OjAJVD/5QEFrYJ+EzH9eOQi5o3neSZLp9M5XddfaZoGilAAieA4Dti2/Rn9LoJ9qcqa1OQNVVUBRYCqdmzEOPYWG7w++IUxdklKCbhGQVSGRqMBmGUHQmgIReT1CzpglRGGzHVdCILgp2g2mxeTyWQcoJWAWBVlmWWchYlE4hQ56h339Xo9KVSpMspKpbcagXvUHmIwzjll6xigpkngqVQqoGC7kyiJ/GmrPU4Je/v6PD4yOnKMbUQH/+PEGRsf/cQnJu+tj98ZiwZ3VjJhc3M5GLo1tMaxldel5dL28O3hM4kQxsgY8CB//xlyP4rf8yhUqpaGE8u/f/fh1LRbjWYxPZOB+YUnz3G7Ed1GS/yhVbV8JD/a233bIULkmew0LC4tbuK2Gl9nW5LHZsX0wyCcr9V2YxEiZ2ezUCgWiGy2EniXShesVeulMWXEfWew7GJpqYPcrYJYZMUsu0EYFBV8RMvlp1vdyNGDO/n+9V+/9QV9JvTy3wC/BBgA1PlC7RdrytcAAAAASUVORK5CYII=) !important;
width: 16px;
height: 16px;
}


}

Alles anzeigen

Ergebnis:
[Blockierte Grafik: http://abload.de/img/starbuttonweg7dkt9.png]

Was mir aufgefallen ist, bei dir scheint das Symbol in der Adresszeile plaziert zu sein, bei mir ist es direkt auf der Toolbar, wo es mir eigentlich auch besser gefällt. Kann das damit zusammenhängen?

Endor

So der funktioniert jetzt hoffentlich.
Damit werden beide angesprochen, der Stern und der Listenbutton daneben

Habe es nur in Stylish getestet:

CSS

/* AGENT_SHEET */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url-prefix(chrome://browser/content/browser.xul){
#main-window #bookmarks-menu-button{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgVJREFUeNqkU89LVFEU/u5903McGQ1sbLCpCJohXWQxaYNCIEm0EImWLYYIhn5Af4AboT+hXSZSWbRo1caNLVoUDCSBY1JUGqGSTC+1hpmmsfvO7dznDKjNE6IL33vfvfc73z33nPegtYbf+Hq/9yrjtt++F7ubQSl73S2+zOjdDKTfZn48ecuOnZcNhwc97qeT9VNPhWRj60hgfzsMDP8nA1epO6HOC6C1Zx4Mz4+felBPGzAPZ6JvQrvquCbVBXJ5NQg7GgX9fOOJ7OgxwAqm82Mn05AWhAzkhGXN8lbaMyCiiy19V5oajiTBRpxXK2jlEUjRZpqVHCKX7rFwFQIV/Fp43lWYnjpqDISppBDixPJY99TezkMRe18LNHGg5tsJq1puzkoQTyU2nAJ+vF10DmRenePYmVoNZmKZ6YH57KdJI5CNCW6Ry0ZqE8xlKIHKyjrmswuTHDxgYnYWcfb0cO4m/eZbWc18KG2HaAKVLRiN0dbtwtJod2pPWxyq8I5Pdk11PBhOxQ8IROJYutuT8m1jSaFfhoLQGw4HlFGaW/RgOFUcWGEbxbLq9zUIt8eGqPgZleV1OHNf3h+8/KLHwHCzptV3hCNtQ3//ENWx9nRQOw973dFriRs87dgi6zBr3x6fcVefnNVbY2ttrK0lq++PjMKOj66ZEa/y19sM/mf8EWAAMf8CuW99jq0AAAAASUVORK5CYII=") !important;
-moz-image-region: rect(0px 0px 0px 0px) !important;}



#main-window #bookmarks-menu-button> .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnklEQVQ4ja2T3QnEIBCEbTWFXCHpIS2klP1RUFYtYu5J70KEk5wPH7ojDjiMLsYI7/0jQghwqgoieozz3oOIcG4Hdvea4twOEBGY+WMwe7lxMzAz1FpRa0UppfOttdXM7gZPuBioKkRkyOhsfQZ/G6jqdIFad9aGmFKCmcHMkHNGzrnPTWv7lNKaDERkYZVn3jv8TCEEMHNHRC7zL/0NHMAyzmxr8WkAAAAASUVORK5CYII=") !important;
-moz-image-region: rect(0px 0px 0px 0px) !important;}

}

Alles anzeigen

Sieht dann so aus:
[Blockierte Grafik: http://i.imgur.com/iXj72SB.png]

Mfg.
Endor

alpha-nbg

Jetzt funktioniert es

die Zeile
-moz-image-region: rect(0px 16px 16px 0px) !important;
war scheinbar noch erforderlich.

[Blockierte Grafik: http://abload.de/img/starbuttonfunktionierzgf9n.png]

Jetzt ist noch die Frage wie ich für die unterschiedlichen Zustände Link gesetzt oder nicht gesetzt ein unterschiedliches Icon reinbekomme. Beim alten Firefox ging das mit
[starred="true"]
Ich schätze mal dass ist jetzt ein anderer Befehl.

aborix

Funktioniert noch genauso, aber nur beim ersten Code durchführen:

Code

#main-window #bookmarks-menu-button[starred="true"] {
list-style-image:  ...  }

alpha-nbg

Funktioniert :klasse:
Vielen Dank für eure Hilfe

Gruß,
Armin

Bernd.

Ich hatte offensichtlich vergessen, dass der b64-Code eine Zeile sein muss, bei komplexen Bildern kann das sehr lang werden. Sorry.

Das mit moz-rect ist auch sone Sache, die mich hat verzweifeln lassen. Ich hatte auch nicht weiter in die omni.ja geschaut von Firefox, um zu sehen, dass es eine Grafik mit zwei Bildern ist. :roll:

Sorry!

alpha-nbg

kein Problem Da bin ich durch ausprobieren draufgekommen, dass kein return im base64 code sein darf. Ich habe auch einen encoder gefunden, der gleich alles in einer Zeile ausgibt. http://www.base64-image.de/
War trotzdem eine super Hilfe, ich wäre nie alleine auf die richtigen Bezeichner oder auf die Idee mit dem base64 gekommen.

Ich glaube es sind genau genommen sogar 3 Bilder, weil beim bookmarken so eine Animation abgespielt wird und da ist auch immer noch der Stern zu sehen. Weiss der Teufel wie man die austauscht. Die Animation lässt sich aber auch abschalten, die brauch ich jetzt nicht unbedingt

Gruß,
Armin