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ő.
