# Sablonstílusok részletesen

> A sablonstílusok feltételei, a betöltési mód, a stíluscsoportok, a stílushierarchia, az export és import, valamint a hibaelhárítás.

A sablonstílusok (Theme Styles) a webhely szintű alapértékek a Bricksben. Velük adod meg az oldalak, sablonok és elemek alapkinézetét: tipográfiát, linkeket, színeket, kontextusfüggő térközt, gombokat, űrlapokat, képeket, elrendezéselemeket, felugró ablakokat és más elemek alapértékeit. A rövid bevezetést és az első sablonstílus létrehozását az [Első lépések → Sablonstílusok](https://hub.hellowp.io/hu/plugins/bricks-child/elso-lepesek-tema-stilusok/) fejezet mutatja.

A sablonstílusok nem helyettesítik a globális osztályokat és az elemstílusokat: ők a legszélesebb stílusréteg, és a specifikusabb stílusok felülírhatják őket. Alapértékekhez használj sablonstílust, újrahasználható mintákhoz globális osztályt, egyedi kivételekhez elem azonosítós stílust.

## Sablonstílus létrehozása

1. Nyisd meg a szerkesztőt, kattints a **Stíluskezelő** ikonra, és válaszd a **Sablonstílusok** lapot.
2. Nyisd meg a sablonstílusok választóját.
3. Írd be a nevet.
4. Nyomj Entert, vagy kattints a mentés ikonra.
5. Válaszd ki az új sablonstílust.
6. Add meg a feltételeket.
7. Állítsd be a stíluscsoportokat.

![A Stíluskezelő Sablonstílusok lapja: figyelmeztetés a betöltési módról, az Alap stílus, majd a Feltételek, Stíluslap, Általános, Színek, Hivatkozások, Kontextusfüggő térköz, Tartalom (margó) és Tipográfia csoport, jobbra az előnézet](./kepek/stilusok-2-sablonstilus-csoportok.webp)

*A Stíluskezelő Sablonstílusok lapja: figyelmeztetés a betöltési módról, az Alap stílus, majd a Feltételek, Stíluslap, Általános, Színek, Hivatkozások, Kontextusfüggő térköz, Tartalom (margó) és Tipográfia csoport, jobbra az előnézet* (https://minta-bolt.hu/home/?bricks=run)

A képen a kék tájékoztató sáv szerint alapból csak a legspecifikusabb sablonstílus töltődik be; alatta az **Alap stílus** és a stíluscsoportok listája áll.

## A működés lényege

Egy sablonstílusnak két fontos része van:

- **Feltételek**: hol érvényes a sablonstílus.
- **Beállítások**: milyen alapértékeket ír ki.

A weboldal minden kérésénél a Bricks összeveti a sablonstílusok feltételeit az aktuális környezettel. Az illeszkedők aktívvá válnak, és a Bricks az aktív sablonstílusok beállításaiból generálja a CSS-t. A szerkesztő is kiszámolja a szerkesztett oldalhoz aktív sablonstílust, így a panel külön tudja mutatni az aktív és a többi stílust.

## Stílushierarchia

A sablonstílusok alapstílusok: a Bricks őket írja ki előbb, a specifikusabb Bricks-kezelt CSS (globális osztályok, oldalbeállítások, sablontartalom, elembeállítások, felugró ablakok stílusai) csak utánuk következik. A gyakorlatban:

- a sablonstílus adja az alapértéket,
- a globális osztályok stílusai felülírhatják az azonos sablonstílus-értékeket,
- az oldalbeállítások is felülírhatják,
- az elem azonosítós stílusok is,
- az erősebb szelektorú vagy később kiírt egyéni CSS is felülírhatja.

Példa:

1. A sablonstílus az összes gombot fekete szövegűre állítja.
2. A `.button--primary` globális osztály a gomb szövegét fehérre állítja.
3. Egy adott gomb azonosítós stílusa pirosra állítja.

Az adott gombon az azonosítós stílus győz, mert specifikusabb és később kerül a kimenetbe.

## Feltételek

A **Feltételek** csoportban adod meg, hol használja a Bricks a sablonstílust. Ha az egész webhelyen érvényes legyen: nyisd meg a **Feltételek** csoportot, kattints a **Hozzáadás feltétel** gombra, és válaszd a **Teljes webhely** lehetőséget. Az első sablonstílusnál a Bricks magától felveszi a **Teljes webhely** feltételt.

![A Feltételek csoport kinyitva: Teljes webhely feltétel és a Hozzáadás feltétel gomb](./kepek/stilusok-2-sablonstilus-feltetelek.webp)

*A Feltételek csoport kinyitva: Teljes webhely feltétel és a Hozzáadás feltétel gomb* (https://minta-bolt.hu/home/?bricks=run)

A képen a **Teljes webhely** feltétel látszik a másolás és a törlés ikonnal; alatta a **Hozzáadás feltétel** gomb.

Annyi feltételt adhatsz meg, amennyit akarsz. Például ha egy sablonstílust két konkrét nyitóoldalra és a kezdőlapra szeretnél alkalmazni:

1. Adj hozzá egy feltételt az egyes nyitóoldalakra.
2. Adj hozzá egy másik feltételt a **Kezdőlap** esetére.

A sablonstílus akkor illeszkedik, ha bármelyik nem kizárt feltétele illeszkedik az aktuális környezetre.

### Kizáró feltétel

Bármelyik sablonstílushoz megadhatsz kizáró feltételt is. Kapcsold be a feltétel kizárás vezérlőjét: ha a kizáró feltétel érvényes, a Bricks az adott környezetben nem használja a sablonstílust. Példa: használd ezt a sablonstílust mindenhol, kivéve az Adatvédelmi irányelvek oldalon.

## Az aktív sablonstílus meghatározása

Ha több sablonstílus is illik egy oldalra, a Bricks a feltételeket specifikusság szerint pontozza. Gyakori sorrend:

- Teljes webhely: a legszélesebb találat.
- Archívum vagy általános archívum feltételek.
- Bejegyzéstípus feltételek.
- Konkrét archívum, kifejezés, keresés, hibaoldal vagy gyermek feltételek.
- Kezdőlap.
- Konkrét bejegyzés vagy oldal azonosítója: a leggyakoribb legspecifikusabb találat.

A pontos találat függ az aktuális kéréstől, az előnézeti környezettől, az archívum típusától, a taxonómiától, a bejegyzéstípustól, a többnyelvű fordítástól és az egyéni feltételszűrőktől.

Alapból a Bricks csak a legspecifikusabb illeszkedő sablonstílust tölti be. Például:

- az A sablonstílus a Teljes webhelyre vonatkozik,
- a B sablonstílus az Oldalakra,
- a C sablonstílus egy konkrét oldalra.

Azon a konkrét oldalon a C a legspecifikusabb találat, ezért alapból ezt tölti be a Bricks.

## Betöltési mód

A betöltési módot a **WordPress admin → Bricks → Beállítások → Általános → Témastílusok: Betöltési mód** alatt állíthatod. Lehetőségek:

- **Legspecifikusabb**: alapértelmezett. A Bricks csak a legspecifikusabb illeszkedő sablonstílust tölti be.
- **Az összes illeszkedő témastílus betöltése**: a Bricks minden olyan sablonstílust betölt, amelynek feltétele illeszkedik az aktuális oldalra.

A **Legspecifikusabb** módot akkor használd, ha minden környezetnek egy teljes sablonstílusa legyen. Az összes illeszkedő betöltését akkor, ha szándékosan rétegezed a sablonstílusokat, például:

- az egész webhelyre érvényes globális tipográfiai sablonstílus,
- a bejegyzésekre külön blog sablonstílus,
- egy kis oldalkészletre nyitóoldal sablonstílus.

Az összes illeszkedő betöltésekor a Bricks a feltételek specifikussága szerint rendezi a stílusokat. Ha több aktív sablonstílus ugyanazt a tulajdonságot állítja, a CSS kaszkád dönt. A véletlen átfedéseket úgy kerülheted el, ha minden sablonstílus egy célra összpontosít.

## Stíluscsoportok

Az elérhető csoportok a Bricks verziójától, a regisztrált elemektől és az integrációktól függnek. A fő csoportok:

- **Feltételek**: hol érvényes a sablonstílus.
- **Stíluslap**: egyéni CSS ehhez a sablonstílushoz.
- **Általános**: általános webhelyalapértékek.
- **Színek**: alapértelmezett színértékek.
- **Hivatkozások**: linkek alapértékei és opcionális további linkszelektorok.
- **Kontextusfüggő térköz**: térközszabályok, valamint az alap margó és belső margó tisztítása.
- **Tartalom (margó)**: a tartalom margóinak alapértékei.
- **Tipográfia**: HTML és szöveg alapértékei.
- **Felugró ablak**: felugró ablakok alapértékei.
- **Elemek**: a támogatott elemek, például Szakasz, Tároló, Blokk, Div, Gomb, Címsor, Kép, Lista, Navigációs menü, Bejegyzés tartalma, Szöveg, Videó és mások alapértékei.

Az integrációk további sablonstílus-csoportokat is regisztrálhatnak.

## Stíluslap csoport

A **Stíluslap** csoportban egyéni CSS-t adhatsz a sablonstílushoz. Ez a CSS a sablonstílussal együtt kerül a kimenetbe. Nem töréspont-érzékeny úgy, mint a vezérlőkből generált CSS, ezért ha kell, használj normál CSS-t és media query-ket.

Olyan CSS-hez használd, amely ugyanahhoz a sablonstílus-környezethez tartozik. A webhely egészére érvényes, a sablonstílus feltételeitől független kódhoz a globális egyéni CSS való.

## Tipográfiai megjegyzések

A sablonstílusok állíthatják a HTML, a törzsszöveg, a címsorok, a linkek és az elemspecifikus tipográfiai vezérlők alapértékeit. Ha több tipográfiai vezérlő is érvényes, a Bricks úgy rendezi a generált CSS-t, hogy a specifikusabb címsorbeállítások felülírhassák az általánosabbakat.

Ha a Stíluskezelő skálái be vannak állítva, a Stíluskezelő az rem-alapú skálaszámításokhoz automatikus értékként a sablonstílus HTML-betűméretét használhatja, hacsak a Stíluskezelő beállításai nem írják felül.

## Pszeudóosztályok

A sablonstílusok a támogatott stíluscsoportokhoz pszeudóosztály-beállításokat is tárolhatnak, például hover vagy fókusz állapotot. Általános alapértékekhez használd ezeket. Ha az állapot egy újrahasználható komponensmintához tartozik, globális osztályt használj; ha egyetlen elemre jellemző, elem azonosítós stílust.

## Exportálás

1. A szerkesztőben nyisd meg a **Stíluskezelő → Sablonstílusok** lapot.
2. Válaszd ki az exportálni kívánt sablonstílust.
3. Kattints az exportálás ikonra.
4. Töltsd le a generált JSON-fájlt.

## Importálás

1. A szerkesztőben nyisd meg a **Stíluskezelő → Sablonstílusok** lapot.
2. Kattints az importálás ikonra.
3. Válaszd ki a sablonstílus JSON-fájlját.
4. Töltsd fel.

Ha a telepítésedben már létezik azonos azonosítójú sablonstílus, a Bricks kihagyja az importálását. Ha külön stílusként akarod importálni, exportálás előtt nevezd át vagy duplikáld a forrás sablonstílust.

## Oldalbeállítások és sablonstílusok

Az oldalbeállítások az aktuális oldalra vagy sablonra vonatkoznak, és a sablonstílusok után kerülnek a kimenetbe. Oldalspecifikus dolgokra használd őket: egyoldalas navigáció, oldalszintű kód, SEO és közösségi értékek, oldalspecifikus stílus. Ha egy stílus alapértelmezett legyen egy oldalcsoportnak, használj sablonstílust. Ha egyetlen oldalra vagy sablonra vonatkozik, oldalbeállítást.

## A Stíluskezelő és a sablonstílusok

A sablonstílusok a Stíluskezelő egyik részei. Mellettük dolgozik a Színkezelő, a Globális változók kezelője, a Globális osztálykezelő, valamint a Stíluskezelő beállításai és skálái. A sablonstílusok az általános alapértékeket adják, a változók és a színpaletták az újrahasználható értékeket, a globális osztályok az újrahasználható mintákat.

## Jó gyakorlatok

- Mindig adj meg feltételeket: a feltétel nélküli sablonstílus nem válik aktívvá.
- Kezdd egy Teljes webhely sablonstílussal az alap tipográfiához, a linkekhez és az általános elemalapértékekhez.
- Specifikusabb sablonstílust csak akkor használj, ha egy környezetnek tényleg más alapértékek kellenek.
- Ne állítsd ugyanazt a tulajdonságot sok egymásra rétegzett sablonstílusban, hacsak nem érted a kaszkádot.
- A komponensspecifikus stílust tartsd globális osztályban, ha újrahasználható mintához tartozik.
- A **Stíluslap** csoportot környezetspecifikus CSS-hez használd, ne egymással nem összefüggő globális CSS-hez.
- A feltételek módosítása után próbáld ki az egyes oldalakat, archívumokat, sablonokat és többnyelvű változatokat.

## Hibaelhárítás

**A sablonstílus nem aktív.** Nézd meg, van-e legalább egy feltétele, érvényes-e rá kizáró feltétel, és hogy a **Legspecifikusabb** betöltési módban nincs-e nála specifikusabb sablonstílus.

**Egy általános sablonstílus eltűnt egy konkrét oldalon.** **Legspecifikusabb** módban ez a várt működés, ha az oldalra egy specifikusabb sablonstílus illik. Csak akkor válts az **Az összes illeszkedő témastílus betöltése** módra, ha azt akarod, hogy a stílusok rétegződjenek.

**Egy sablonstílus-vezérlő nem hat egy elemre.** Nézd meg, nem írja-e felül ugyanazt a tulajdonságot az elem globális osztálya, azonosítós stílusa, egy oldalbeállítás vagy egyéni CSS.

**Hiányzik egy csoport vagy vezérlő.** A sablonstílus-csoportok a regisztrált elemektől és integrációktól függnek. Ha egy elem vagy integráció nem érhető el, a csoportja nem jelenik meg.

**A Stíluslap csoport egyéni CSS-e nem reszponzív.** A **Stíluslap** sima CSS. Ha töréspontfüggő viselkedés kell, írj hozzá saját media query-ket.