WordPress és a CSS

05 február 2017 / By Mavrák Richárd
CSS-poll

Köztudott, hogy egy weboldal készülhet HTML,  WordPress, Joomla és egyéb megoldásokkal is. Minden megoldásnak meg van a maga technikája, szépsége, buktatói, hátrányai. Ami biztos, hogy egyik sem működik és nem is alakítható CSS, vagyis stílus file nélkül (persze ez nem teljesen igaz, de ezt majd egy másik bejegyzésben kifejtem).

A CSS (angolul Cascading Style Sheets) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. Ezen kívül használható bármilyen XML alapú dokumentum stílusának leírására is, mint például az SVG, XUL stb.

css-selectors

A stílus file nélkülözhetetlen egy weboldal elkészítéséhez, akár HTML, akár WordPress oldalról beszélünk. Sok kezdő designer elakad, amikor egy előre elkészített alap sablont szeretne módosítani, átalakítani, mert nem tudja, hogy miként lehet módosítani a stílus file-t.

 

Miként tudjuk módosítani a CSS file-t, egy Word Press sablonban?

 

Minden Word Press oldalhoz tartozik egy CSS file is, legtöbb esteben a “Megjelenítés–>Szerkesztő” menüben találjuk mega a fő CSS sablonunkat.

 Stíluslap
    (style.css)

Amint megnyitjuk, láthatjuk, hogy ugyan olyan CSS kódokat tartalmaz, mint amit egy HTML mellé is készítünk. Itt lehetőségünk van átírni, amit szeretnénk, módosítani, majd a mentés gombbal alkalmazhatjuk is az új kódokat. A WordPress szerkesztők, bilderek általában külön lehetőséget biztosítanak, hogy class=”…” vagy id=”…” kódokat adjunk egy elemhez, de ha szeretnénk megtudni egy adott box, kép, modul, szöveg class vagy id elnevezést, böngészőnkben simán megnézhetjük. Jobb klikk és elem vizsgálata (megtekintése).

Több bilder is kínál egyedi CSS mezőt, ahova tetszőlegesen magunk is írhatunk kódokat, így elkerülhetjük, hogy a szerkesztőben kelljen módosítani az egész stílus file-t. Az tény, hogy csak akkor vágjunk bele a módosításokba, ha valóban értünk hozzá, mert ha akár egy “; pontosvesszőt” is kihagyunk, vagy egy { } nyitó és záró elemet, komolyan széteshet az egész sablonunk.

costomer css

Ha magunk adunk meg CSS kódokat a sablonunk szerkesztőjében, az felülírja a style.css kódjait, tehát ha pl. a sablon eredetileg float: left; de mi float: right; alkalmazunk, akkor jobbra fog igazodni minden. Aki ért a CCS kódíráshoz, tudja, hogy mindig az érvnyesül ami előrébb van.

A legutóbbi munkámban – Nádor Zsuzsa desig -és a jelenlegi – Reantik – készítésénél, nagyon sok CSS módosítást alkalmaztam mert a tervek sosem egyeznek meg pontosan a deafult vagy kész sablonok által nyújtott design elemekkel!

Mindig gondoljuk át, hogy mit szeretnénk módosítani és milyen elemet érint. Sokan kértek segítséget tőlem, mert nem vették figyelembe, hogy a class elemek komplett boxokat, blokkokat tudnak egyszerre mozgatni.

About The Author

Mavrák Richárd