Új hozzászólás Aktív témák

• #13493 Sk8erPeter nagyúr sz.balazs.95 #13492

  Új Válasz 2015-05-21 22:00:33 #13493

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Sk8erPeter

  nagyúr

  válasz sz.balazs.95 #13492 üzenetére

  Hát az egészen biztos, hogy nálad van valami szintaktikai hiba valahol, mert most csak a Te kedvedért felraktam ezt a Stylish-t, belemásoltam az általam előbb írt kódot egy prohardver.hu-ra vonatkozó stíluslapba, és azonnal működött.

  Szerk.:
  Dobd be ide a CSS-kódodat: http://csslint.net/. Ha valahol errort ír, akkor azt javítsd ki (warningot az !important használata miatt is írhat, ez ignorálható, ha szükség van rá).

  [ Szerkesztve ]

  Sk8erPeter

• #13513 Sk8erPeter nagyúr sz.balazs.95 #13492

  Új Válasz 2015-05-25 15:01:52 #13513

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Sk8erPeter

  nagyúr

  válasz sz.balazs.95 #13492 üzenetére

  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

Új hozzászólás Aktív témák