Hogyan működik a CSS kód?
A css kód határozza meg, hogy melyik html elem (pl: gomb, div, szöveg, táblázat stb) hogyan nézzen ki: milyen legyen a színe, háttere, külső és belső margója, mit csináljon, ha ráviszed az egeret, hogyan nézzen ki mobilon stb.
Az esetek nagy részében nincs szükség arra, hogy css kódot írj, mert gyakorlatilag bármilyen wordpress sablonban, sőt még az alap sablon, alap blokkos szerkesztőjében egyszerű beállításokkal, csúszkákkal, színválasztókkal mindent meg tudsz határozni.
Mégis van pár olyan eset, amikor nem tudod beállítani, amit szeretnél, vagy olyan elem kinézetén szeretnél módosítani, amire a beállítások nem adnak lehetőséget. Ilyenkor jó tudni ezt a 10. nagyon alap, nagyon “basic” CSS beállítást.
Így néz ki egy css kód:
- Először meghatározzuk, hogy melyik elemnek (selector)
- melyik része (property)
- milyen legyen (value)
Az elemre hivatkozás részt úgy hívják, hogy selector. Ezután kapcsos zárójellel kezded, minden meghatározás után teszel egy pontosvesszőt, és zárod kapcsos zárójellel
Meghatározod, hogy az adott elem milyen része milyen legyen. Ha a pl. a menüsáv hátterét akarod feketére színezni, a selector után kapcsos zárójelbe azt írod: background, utána kettőspont, majd a szín hex formában, ami kettős-kereszttel kezdődik, #000000 (a 6 nulla a fekete)
Példa:
/*
itt van, hogy melyik elem.
Az elemek ID-ját és osztályát te adod meg
*/
#menusor
{
background: #000000;
}
/*
itt van, hogy milyen része,
a háttere, azaz background, milyen legyen,
#000000, azaz fekete*/
Mi az osztály?
A html kódban így néz ki: class=”valami”, a css-ben úgy hivatkozol rá, hogy teszel elé egy pontot: .valami
Mi az ID?
A html kódban így néz ki: id=”valami”, a css-ben úgy hivatkozol rá, hogy teszel elé egy kettős-kereszet: #valami
Mi a különbség az osztály és az azonosító között?
Egy elemnek csak egy ID-je lehet, de több osztálya is. Több elemnek nem lehet ugyanaz az azonosítója, de lehet ugyanaz az osztálya. Egy elemnek lehet azonosítója és osztálya is. Ha alap CSS ismeretekre van szükséged, akkor ez nem olyan fontos. Ami lényeges viszont, hogy az azonosító arra is jó, hogy oldalon belül tudjon navigálni a látogató.
Ha a CTA gombjaid mind a lap aljára, a megrendelés részhez viszik a látogatót, akkor a CSS-ben megadod a megrendelés blokk div-jének azonosítóját, pl “#rendel”
És a gombjaidnak mint ez lesz a linkje:
<a href="#rendel">Irány a megrendelés</a>Hogyan lehet osztály és azonosító nélkül hivatkozni elemre?
Ez pont az az eset, amikor nem kell egyéni CSS-t írni, hanem nézd meg, hogyan lehet beállítani a sablonod téma testreszabás menüjében.
Ha mégis muszáj globálisan megváltoztatnod olyan fő elemeket, mint linkek, bekezdések, gombok, akkor ezt kell tudni:
- a = minden hivatkozás
- p = minden szöveges bekezdés
- table = minden táblázat
- div = minden div
- button = minden gomb
- body = a teljes weboldal
- header = a fejléc (de nem minden esetben, nézd meg az elem vizsgálatánál)
- nav = a menüsor (de nem minden esetben, nézd meg az elem vizsgálatánál)
- footer = lábléc (de nem minden esetben, nézd meg az elem vizsgálatánál)
Példa:
a
{
color: red;
text-decoration: underline
}
/* minden link az oldaladon legyen piros színű, aláhúzott. De minden valamirevaló sablonban be lehet állítani a link színét*/Hogyan adsz meg osztályt és ID-t a Divi-ben?
Ha Divit használsz, akkor az azonosító vagy osztály az adott szakasz, sor, vagy modul szerkesztésél a “haladó” menüpontban lesz.
Ha nem Divit, vagy nem blokkos oldalépítőt használsz, akkor az adott sablon oldalszerkesztőjének HTML nézetében kell megadni, így
<div id="valami" class="valamilyen">Tartalom</div>Hová írod a CSS kódot?
A Divi lehetőséget ad arra, hogy az adott oldalhoz, vagy az adott posthoz adj meg külön css kódot. Ez a kód nyilvánvalóan csak arra az oldalra, bejegyzésre fog vonatkozni.
Ha olyan css kódot szeretnél írni, ami az egész weboldaladra vonatkozik, akkor Divi esetén: Vezérőpult > Divi > Téma beállítások.
Ha nem Divit használsz, akkor keress rá “sablonod neve + custom css” és rájössz hová kell írni.
A legtöbb wordpress sablon a testreszabás menüben ad egyéni css beírási lehetőséget.
(Ez az opció a Divinél is megvan, amit a téma testreszabás menüben írsz be, mint egyéni css-t, az pont ugyanaz, mintha a Divi > Téma beállítások > egyéni css-nél adod meg)
Mi van akkor, ha a sablonod semmilyen egyéni css lehetőséget nem ad?
Ha a sablon nem ad ilyen lehetőséget – bár ez elég valószínűtlen – akkor is van megoldás, telepítsd a Simple Custom Css plugint.
Hogyan tudod később nyomon követni, hogy melyik css kód mit csinál, mit miért írtál?
Ha sok kódot írsz, később esetleg elfelejtheted, hogy mit mikor miért írtál. Ezért érdemes egyéni megjegyzéseket, kommenteket tenni a kódba, magára a kódra ez nincs hatással, amíg /* és */ közé írod.
/* világosszürke színű legyen a hivatkozás */
.valami a
{color: #ebebeb;}1. Hogyan tudod meg, hogy melyik elemnek mi az azonosítója?
Meg kell nézni böngészőben, jobb gombbal kattintasz az adott elemre és azt választod, hogy “elem vizsgálata” (inspect element).
Meg fog jelenni a forráskód, és látni fogod, hogy mi az osztály és mi az azonosító neve. Ha a kódban ráviszed az egered, akkor a böngészőablakban felvillan a hozzá tartozó elem. Kimásolod az ID-t vagy a class-t, hivatkozol rá ponttal vagy kettős-kereszttel, és mehet a CSS kód.
2. Azt akarod, hogy ne legyen ott, ne látszódjon egy elem
Ez a leggyakoribb dolog, amiért egy Worpress user egyéni css-t használ. El kell tüntetni felesleges “powered by WordPress” és ehhez hasonló sorokat.
Megnézet az elem vizsgálatával, hogy mi az azonosító, és beírod kapcsos zárójelbe, hogy display: none; Így eltűnik az elem. Ha nem nem tűnne el, akkor írd mögé, hogy !important
Ha úgy akarod eltüntetni, hogy az elem helye megmaradjon, akkor: visibility: hidden.
#nav
{display: none !important;}
/*ez eltünteti a menüsort*/
#nav
{visibility: hidden;}
/*így nem látszik a menüsor, de az elem helye megmarad*/3. Át akarsz színezni egy elemet
Leggyakrabban a szöveg, a link, és a háttér színét szokás egyéni CSS-sel megváltoztatni. A Divi beállítások között találsz hex színkódokat, ha a te sablonod nem ad ilyen opciókat, akkor keress rá: hex color picker
A színeket így kell megadni: #ebebeb (ez egy világos szürke, a számsor előtt kettőskereszt)
#valami
{
background: #fcba03; /*ez a háttér színe*/
color: #ffffff; /*ez a betű színe*/
}4. Nagyobb belső térközt akarsz vagy túl nagy a belső térköz
Ez is egy gyakori eset, amiért agy wordpress felhasználó egyéni CSS-t használ. Belső térköznek, vagy belső margónak is nevezik a padding-et.
Ez az elem tartalma (mondjuk egy gomb szövege) és az elem szélei közötti belső távolság. Van fenti, lenti, jobb és bal értéke, azaz top, right, bottom, left.
Az esetek nagy részében pixelben szokás megadni, de %-van, és vh-ban is meg lehet adni. Ha most kezded a CSS-t, akkor maradj a pixeleknél.
- Ha egy számsorban adod meg mind a 4 értéket, és nem egyformák az értékek, akkor a sorrend ez: top, right, bottom, left.
- Ha csak egy értéket adsz meg, akkor minden oldalon ugyanakkora a padding
- Vagy külön-külön is megadhatod egy-egy oldal paddingjét, pl: padding-left, padding-right;
.gomb1
{padding: 50px; }
/*ez egy jókora minden oldali belső térközzel rendelkező gomb*/
.gomb2
{padding: 20px 50px 20px 50px; }
/*ez egy jó széles gomb*/
.gomb3
{padding-left: 150px; }
/*ez fura gomb, csak balra terjeszkedik - ilyet azért nem szokás használni*/
5. Fentebb, lentebb, jobbra, balra akarod tolni az elemet
Ezt a margókkal szokás megoldani. A margó lehet negatív is, a padding nem lehet negatív.
A margó (margin) egy elem (mondjuk egy gomb ) és egy másik elem elem szélei közötti távolság. Van fenti, lenti, jobb és bal értéke, azaz top, right, bottom, left. Az esetek nagy részében pixelben szokás megadni, de %-van, és vh-ban is meg lehet adni. Ha most kezded a CSS-t, akkor maradj a pixeleknél.
- Ha egy számsorban adod meg mind a 4 értéket, és nem egyformák az értékek, akkor a sorrend ez: top, right, bottom, left.
- Ha csak egy értéket adsz meg, akkor minden oldalon ugyanakkora a margó
- Vagy külön-külön is megadhatod egy-egy oldal margóját, pl: margin-left, margin-right;
.gomb1
{margin: 50px; }
/*ez egy jókora térközzel rendelkező gomb*/
.gomb2
{margin: 20px 50px 20px 50px; }
/*két oldalon nagyobb így a térköz, mint fent és lent*/
.gomb3
{margin-left: 150px; }
/*ez fura gomb, csak bal oldlon van térköz*/
6. Háttérszínt akarsz beállítani
A háttérszínt a background vagy a background-color-lal tudod megváltoztatni, ritka, hogy ezt használni kelljen, mert háttérszínt a leg-alapabb sablon is tud, simán beállításból. Háttérképet inkább ne állíts be CSS-ben, ha a sablonod nem tudja, keress más sablont. Gyorsabban találsz új theme-et, mint amennyi idő alatt lepötyögöd a háttérkép és annak a reszponzív háttérkép CSS deklarációit.
De ha mégis egy elem hátterét meg kell változtatni, akkor kiválasztod a színt, pl itt: https://htmlcolorcodes.com/color-picker/
#elem
{background: #cccccc;}
/*ez egy szürke háttér*/
/*ha ez nem működik, és úgysem, hogy important-ot használsz, akkor próbáld ezt*/
#elem
{background-color: #cccccc;}
7. Gomb kinézetét módosítod
Ha van egy gombod, de nem úgy néz ki, ahogy szeretnéd, és nem találsz a sablon beállításai között semmilyen lehetőset a módosítására, akkor adj neki egy azonosítót, vagy ha nem tudsz neki adni, akkor nézd meg az elem vizsgálatával, hogy mi az azonosítója, és jöhet a CSS.
Egy gombnál ezeket az értékeket szokás meghatározni:
- width – szélesség
- height – magasság
- border: keret (solid = összefüggő, dashed = szaggatott, dotted = pontozott)
- color: a gomb szöveg színe
- text-transform: hogy milyen legyen a szöveg, pl csupanagybetűs: uppercase
- font-weight: a betű stílusa, normál (normal), dőlt (italic), vagy félkövér (bold)
- font-size: a gomb feliratának betűmérete
/*itt van, hogy milyen legyen a gomb */
#gomb button
{width: 100%;
height: 45px;
background: #000000;
border: 2px solid #000000;
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 0.90em;}
8. Milyen legyen valami, ha ráviszed az egeret?
Az adott elem selector után teszel egy kettőspontot és azt írod: hover. Ha ez megvan, akkor megadod, hogy egér-rajta állapotban milyen legyen az elem kerete, színe háttere. Általában gomboknál szokták ezt megadni, meg linkeknél, ha a sablon nem ad rá külön beállítást.
A példában a netjet.hu feliratkoztató űrlapjának gomb hover-jét látod. Kénytelen voltam egyéni CSS-t írni, mert a pluginok mind API-val kapcsolódnak az ActiveCampaign hírlevélküldőhöz, és az API lassabb, később indítja el az ActiveCampaign automatizációit.
/* milyen legyen a gomb, amikor ráviszem az egeret */
#gomb button:hover
{
background: none;
border: 2px solid #000000;
color: #000;
}
9. Mobilon másképp nézzen ki egy-egy elem
Ha azt szeretnéd, hogy mobilon nem látszódjon, vagy egyáltalán másképp nézzen ki egy elem, akkor azt úgy tudod megadni, hogy előbb megatározod, csak milyen képernyőméretre vonatkozzon a kódod, és utána jöhet a kód.
Példa:
@media only screen and (max-width: 400px) {
body {
background-color: #cccccc;
}
}A fenti példa azt mutatja, hogy a legfeljebb 400 pixel szélességű képernyőkre vonatkozzon a CSS meghatározás. De figyelem: a legtöbb wordpress sablon alapértelmezetten reszponzív és nagyon komolyan meg vannak benne határozva a mobilra vonatkozó css értékek. Egyéni css-t mobilra csak akkor írj, ha nagyon biztos vagy a dolgodban. Előtte azért tedd fel magadnak a kérdést: “biztosan nem lehetne másképp, valamilyen létező, sablon beállítással megoldani”
10. Mit csinálsz, ha hiába írod be a kódot, mégsem működik
Előfordul, hogy hiába írod be jól a kódot, mégsem csinálja azt a CSS, amit te szeretnél. Ennek az lehet az oka, hogy a kódban valahol máshol meg van adni egy másik érték. Ekkor kell használni az “!important“, azaz “fontos” kiegészítést egy adott css meghatározáshoz. Példa:
#valami
{background: #ebebeb !important;}
/* tehát: felkiáltójelt important pontosvessző*/Összefoglalás
Elvileg nem kell CSS kód, mert a sablonból mindent be tudsz állítani. De ha mégsem, akkor ezt a 10 alap CSS-t illik tudni. Az egyéni css beírására globálisan és oldal szinten is a legtöbb sablon ad lehetőséget. Ha mégsem, használd a Simple Custom CSS plugint. Az elem vizsgálatával a böngésződben kideríted mi az adott elem neve, és átszínezed, eltünteted, megváltoztatod a CSS kóddal.
