Na, most végre lett egy kis időm, közben utánanéztem, úgy tűnik, az <img> tageknél a CSS-be rakott content:url(...) Firefoxnál nem működik az elvártak szerint a feltüntetett információk ellenére (és amúgy IE-nél sem) - úgy tűnik, ez egyelőre csak a Blink (/WebKit)-motornál működik jól (Chrome, Opera, Faszari). A többinél kifejezetten az img tagek esetén nem megy úgy Firefoxnál, ahogy korábban írtam.
Az általam korábban írt selector viszont ott is jó, tehát:
img[src="/design/icon-mail-yes.gif"]
illetve
img[src="/design/icon-mail-no.gif"]
ezek illeszkednek a Prohardvernél elhelyezett borítékikonokra.
Megtaláltam a megoldást is, ez alapján pedig működőképesre alakítottam, így már Firefoxnál is megy, tehát ez szükséges ahhoz, hogy az <img> tag src-attribútumában elhelyezett képeket le tudd cserélni CSS-sel:
img[src="/design/icon-mail-yes.gif"], img[src="/design/icon-mail-no.gif"] {
width: 0px;
height: 0px;
background: url("https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-06-16.png") no-repeat scroll 0% 0% transparent;
padding: 0px 0px 13px 17px;
}
Egy kis magyarázat:
- először is a képek szélességét és magasságát 0px-re állítod, hogy az eredeti, az img tag src-attribútumában elhelyezett kép eltűnjön
- beállítasz egy háttérképet (!) az elemnek, a kép a megadott URL-en található, beállítod, hogy ne ismétlődjön
- ezután pedig a padding segítségével be kell állítani egy kis helykitöltést, mégpedig lehetőleg pontosan akkorát, amekkora az eredeti kép, jelen esetben az eredeti kép(ek) 17x13 pixelesek - épp ezért úgy állítottam be a helykitöltést, hogy az alsó 13px-es legyen, a bal oldali pedig 17px (a padding sorrendje: fent-jobbra-lent-balra, óramutató járásával egyezően)
Ki is próbáltam, működik Stylish-nél.
Tehát a Stylish-nél felhasználandó kód (nyilván az URL-t cseréld le sajátra):
Firefoxnál:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("prohardver.hu") {
img[src="/design/icon-mail-yes.gif"], img[src="/design/icon-mail-no.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 13px 17px;
background: url("https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-06-16.png") no-repeat scroll 0% 0% transparent;
}
}
Blink-motornál (Chrome, Opera):
img[src="/design/icon-mail-yes.gif"],
img[src="/design/icon-mail-no.gif"] {
content:url(https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-06-16.png) !important;
}
Persze Blink-motornál is használhatod a korábbi kódot is, csak akkor a @namespace és @-moz-document részek nélkül.
(#13500) sz.balazs.95
"a fejléc keresősávjának a hátterét hogyan tudnám cserélni?"
A #ssearch .text label selector background-image property-jét kell megváltoztatnod.
Sk8erPeter