10 alap css kód, amit WordPress használóként tudni kell

Erdélyi Norbert

Elvileg nem kell CSS kód, mert bármilyen Wordpress sablonból mindent be tudsz állítani. De ha mégsem, akkor ezt a 10 alap CSS-t illik tudni.

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:

    1. Először meghatározzuk, hogy melyik elemnek (selector)

    1. melyik része (property)

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

ÚJ

Hogyan állítsd be 15 perc alatt a bankkártyás fizetést a weboldaladon?

Kösd össze a Stripe kártyaelfogadót Woocommerce shopoddal

Azonnal fizethetnek bankkártyával, egyszeri díjat, előfizetést is. Erdélyi Norbert és Erdélyi-Búza Renáta marketing szakértők magyarázatával. Negyedóra múlva ilyenkor már kártyával is lehet a weboldaladon fizetni.

 

Ehhez kapcsolódik

Netjet Campus

A Netjet Campus megtanítja hogyan készíts weboldalt, ami eladja a terméked.
Legnépszerűbb kurzusok ezek

Népszerű

Előfizetéses tagsági rendszer

Supersales Sytema

Ebben a kurzusban lépésről lépésre megmutatom, hogyan raksz össze magadnak egy előfizetéses rendszert.

Oktatási rendszer

LearnDash Oktatóanyag

Netjet Campus Classic

Hogyan készíts digitális oktatási rendszert? Mutatom részletes, érthető magyarázattal a Learndash kurzusban.

Alapmű

A Sales Oldal

Supersales Sytema

Felépítjük a sales oldaladat. Milyen neuromarketing mozgatórugókkal  működnek a szöveges és design elemek?

Woocommerce rulez!

Woocommerce webáruház

Supersales Sytema

Felépítjük a Woocommerce webshopodat, lehet egy termékes shop, lehet soktermékes webáruház, a folyamat ugyanaz.

Next level

Neuromarketing

Netjet Campus Classic

Árérzékeny vevők helyett rajongók. Tedd hozzá a mostani marketingedhez a neuromarketing technikákat.

Canva

Canva Oktatóanyag

Netjet Campus Classic
A világ leghasznosabb grafikus szerkesztője, minden webes grafikát megcsinálhatsz bele, a kurzusban mutatom, hogyan.
Explainer animáció

MarketingMese Oktatóanyag

Netjet Campus Classic
Amelyik weboldalon hamarabb megérti az ajánlat lényegét a vevő, ott fog vásárolni. Ha rajzfilmvideóval magyarázod el, fel fognak rá figyelni.
Nagy klasszikus

Wordpress Dominancia

Netjet Campus Classic
Egy jól működő rendszer, amivel biztosra mész. Közérthető képernyővideókon mutatom mit kell csinálnod.
Ezeket az eszközöket is tanítom a Campusban: