Ellentmondó stílusok: melyik osztály nyer?

A V4 szerkesztőben a stílusozás az osztályokra épül. Az osztályokkal újrahasznosíthatod a stílusokat, ami gyorsabbá teszi a munkát. Előfordulhat azonban, hogy egy elemhez ellentmondó stílusokat adsz hozzá: például az egyik osztály zöldre, a másik pirosra állítja a szöveg színét. A szerkesztő az alábbi szabályok szerint dönti el, melyik érvényesül. Az osztályok létrehozásáról a Stílusosztályok fejezetben olvashatsz.

Az osztályok sorrendje

Az elem Stílus fülének tetején az Osztályok mező látható. Ebben szerepel az elemre érvényes összes osztály neve.

• A helyi osztály különleges: minden elemnek van egy saját, csak rá vonatkozó helyi osztálya. Ha még nem adtál meg benne stílust, az elem az alapértelmezett beállításokat használja.
• A mezőben a bal oldali osztályok elsőbbséget élveznek a jobb oldaliakkal szemben. Ha később adsz hozzá egy osztályt, az is a korábbi elé kerülhet, ha az osztálykezelőben előrébb áll.
• A helyi osztály mindig a legelső (bal szélső), ezért mindig ez a legerősebb: amit a helyi osztályban állítasz be, az felülír minden más osztályt.

A közös osztályok sorrendjét az Osztálykezelőben állíthatod. Az, amelyik ott feljebb áll, elsőbbséget élvez az alatta lévővel szemben. Lásd: Osztálykezelő.

A színes pontok: honnan jön az érték?

Azok a beállítások, amelyeknek van értéke, egy kis színes pontot (jelzőt) kapnak. Ha egy szekciót, például a Tipográfiát becsukod, a pont a szekció neve mellett jelenik meg. Egy szekció neve mellett több pont is lehet, mert a benne lévő beállítások különböző állapotúak lehetnek (például a betűcsalád az egyik osztályból jön, a betűméret egy másikból).

Jelző színe	Mit jelent
Rózsaszín	Az értéket a helyi osztály adja. Ezt semmi nem írhatja felül.
Zöld	Ezt a beállítást jelenleg ez az osztály határozza meg. Az osztályok sorrendjének módosításával változtatható.
Szürke	A beállítást jelenleg egy másik osztály határozza meg.
Narancssárga	A beállítást jelenleg egy másik osztály határozza meg. A sorrend módosításával megváltoztatható, vagy a helyi osztály felülírhatja.

Példa: két ütköző osztály

A példában két osztályt használunk: az egyik (Fo-szoveg) pirosra, a másik (Masodlagos) zöldre állítja a szöveg színét. Mindkettő rajta van egy címsor elemen.

1. Jelöld ki az elemet, és nyisd meg a Stílus fület.
2. Az Osztályok mezőben látod a helyi, a Masodlagos és a Fo-szoveg osztályt, ebben a sorrendben.
3. Nyisd ki a Tipográfia szekciót.
4. Kattints a Masodlagos osztályra: a Szöveg színe mellett zöld pont jelenik meg, vagyis ez az osztály határozza meg a színt. A szöveg zöld.

https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor

A képen a kijelölt Masodlagos osztálynál a Szöveg színe mezőt zöld pont jelzi, és a mező a Masodlagos osztály színét mutatja.

5. Kattints a Fo-szoveg osztályra: a Szöveg színe mellett narancssárga pont áll, vagyis ezt az értéket egy másik osztály (a Masodlagos) felülírja.

https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor

A képen a Fo-szoveg piros színe látszik a mezőben, de a narancssárga pont jelzi, hogy ez nem érvényesül.

6. A helyi osztálynál a Szöveg színe mellett szürke pont látszik: az elem másik osztályból kapja ezt a beállítást, de ez nem ütközik a helyi osztállyal.

Ha a helyi osztályban megváltoztatod a szöveg színét, az lesz az érvényes szín, mert a helyi osztály mindig a legnagyobb elsőbbségű. A jelző ekkor rózsaszínre vált.

Melyik osztály van használatban?

A jelzők nem csak azt mutatják, hol van ütközés, hanem pontos információt is adnak. Kattints egy jelzőre, és a Stílus eredete felugró ablak megmutatja, melyik osztály melyik értéke érvényesül, és melyiket nem veszi figyelembe a szerkesztő (az utóbbi áthúzva látszik).

1. Húzz egy elemet a vászonra, és add hozzá a két osztályt a fenti módon.
2. A panelen nyisd ki a Tipográfia szekciót. A szekció neve melletti jelző mutatja, hogy ütközés van a tipográfiai beállításokban.
3. Kattints a Szöveg színe melletti jelzőre.

https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor

A képen a Stílus eredete ablakban a Masodlagos értéke (#2e7d32) érvényes, a Fo-szoveg értéke (#d32f2f) áthúzott.

Eltérő értékek az eszközökhöz

A reszponzív szerkesztéssel külön értékeket adhatsz meg a különböző képernyőméretekhez. Például így állíthatsz külön betűméretet asztali gépre és mobilra:

1. Adj egy bekezdés elemet a vászonra, és írj bele szöveget.
2. Nyisd ki a Tipográfia szekciót.
3. A Betűméret mezőbe írj 14-et.
4. Kattints a mobil ikonra a nézetablak-vezérlőn.
5. A Tipográfia szekcióban állítsd a betűméretet 24-re.
6. Kattints a Betűméret melletti jelzőre.
7. A felugró ablak megmutatja, melyik betűméret érvényes mobilon és melyik asztali gépen. Mobil módban az asztali érték át van húzva.

A reszponzív szerkesztésről bővebben: Reszponzív szerkesztés V4-ben.