Miért is fontos a bővítmény CSS kód módosítása?

Munkáink során szinte mindig előfordul, hogy egy – egy bővítmény alap, gyári css-e elüt a kívánt sablon megjelenésétől, elrendezésétől. Egyszerűen szólva, kilóg a lóláb, hogy az nem gyárilag van ott. Ilyenkor jön az a megoldás, hogy módosítani kell a bővítmény CSS-ét. Ez egyszerű, hiszen megtaláljuk könnyen a bővítmény könyvtárát és benne a .css fájlokat. Azonban amikor frissítünk, akkor ezek felülíródnak és a módosításainknak annyi egyből.

Elvégzett projektjeinknél törekszünk arra, hogy a jövőbeli frissítéseket megkönnyítsük, így úgy oldjuk meg ezen CSS kódok megadását, hogy azok a bővítmény frissítése után is megmaradjanak. nézzük hát, miként is lehet!

Bővítmény CSS kódjának felülírása

Egyszerűbb a megoldás, mint gondolnánk. Nincs más dolgunk, mint megkeresni a sablonunk azon id vagy class értékét, amibe a konkrét tartalom (amit a bővítmény megad) és az általunk módosított megoldást a sablonunk style.css-ébe beszúrni, a következőképp.

#tartalomebbeazidbevan .bovitmenyclass-azonosito .konkretelem { /*felulirt kod*/ }

Ez például a Contact Form 7 (Mint a legnépszerűbb bővítmény – Top10 lista) példáján az alábbi módon néz ki. Mondjuk példaként a beküldés gombon szeretnénk változtatni, akkor az alábbi módon tudjuk azt megtenni:

#content .wpcf7 input[type="submit"] { /*ide ami valtozzon*/ }

 Mi, micsoda és miért:

  • #content – Ebbe van az adott lap, page tartalma.
  • .wpcf7 – Egy ilyen class azonosítójú div-et szúr be a Contact Form 7, ebbe vannak a bővítmény elemei.
  • input[type=”submit”] – Html-ben lévő input elem, a végén pedig megadva, hogy a beküldő gomb

Ha ezen megoldás alapján módosítjuk (írjuk felül) akkor az némileg (nagyon picivel) nagyobb CSS-t fog eredményezni, viszont így szabadon lehet frissíteni a bővítmény. Persze arra ügyeljünk, hogy frissítés után ellenőrizzük, teszteljük az oldalunk, mivel olyan eset is előfordulhat, hogy a bővítmény class és id értékei megváltoznak, például ha nevet vált a bővítmény vagy csak, mert úgy gondolja a készítő.

 

Kérdésed van? Várjuk hozzászólásban vagy a kapcsolatban!