# Űrlapok stílusozása

> Hogyan kapják a Ninja Forms űrlapok a megjelenésüket: a téma stílusai, a Markáns stílusok beállítás és az oszlopos segédosztályok.

A Ninja Forms alapból nagyon kevés saját stílust ad az űrlapokhoz. A megjelenést a **téma** határozza meg: ha a témád szépen formázza az űrlapelemeket, az űrlap is úgy fog kinézni; ha nem formázza, vagy furcsa megoldásokat használ, az űrlap ezt is átveszi.

A Ninja Forms saját stílusai csak a működéshez szükséges dolgokat intézik:

- a címkék pozíciójának beállításai érvényesüljenek,
- a hibaüzenetek és a szerkezeti elemek a megfelelő helyen jelenjenek meg,
- a mezők között legyen elég térköz.

Minden más a témától függ. Ha ennél többet szeretnél, három lehetőséged van: a **Markáns stílusok** beállítás, a segédosztályok, vagy a Layout & Styles bővítmény.

## Markáns stílusok

Ha a témád nem stílusozza rendesen az űrlapelemeket, a Ninja Forms be tud kapcsolni egy saját, tartalék stílusrendszert. Ez a **Markáns stílusok** beállítás.

1. Nyisd meg a **Ninja Forms → Beállítások** oldalt.
2. A **Speciális beállítások** szakaszban keresd meg a **Markáns stílusok** legördülő menüt.
3. Válaszd ki az értéket, majd kattints a **Beállítások mentése** gombra.

![A Beállítások oldal, alul a Speciális beállítások szakasszal és a Markáns stílusok választóval](./kepek/stilusozas-markans-stilusok.webp)

*A Beállítások oldal, alul a Speciális beállítások szakasszal és a Markáns stílusok választóval* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-settings)

A képen a lap alján a **Markáns stílusok** mező látszik, jelenleg **Nincs** értékkel.

| Érték | Hatás |
|---|---|
| **Nincs** | Kikapcsolt állapot. Az űrlap a téma stílusát használja. |
| **Világos** | A Ninja Forms saját, világos megjelenést ad az űrlapelemeknek. |
| **Sötét** | A Ninja Forms saját, sötét megjelenést ad az űrlapelemeknek. |

Ha a **Nincs** van kiválasztva, a téma dönt. Ha a **Világos** vagy a **Sötét** értéket választod, a Ninja Forms átveszi az irányítást, és az űrlapelemeket a saját elképzelése szerint formázza.

## Segédosztályok oszlopokhoz

A Ninja Forms néhány kész CSS-osztályt is tartalmaz, amelyekkel kód írása nélkül tehetsz mezőket egymás mellé, vagy rendezheted oszlopokba a listák elemeit. A segédosztályok használatához be kell kapcsolnod a fejlesztői módot: **Ninja Forms → Beállítások → Speciális beállítások → Űrlapkészítő „fejlesztői mód”**.

### Mezők egymás mellett

Az osztálynevet a mező beállításai között, a **Megjelenítés → Egyéni osztálynevek → Tároló** mezőbe írd.

![A mező Megjelenítés szakasza az Egyéni osztálynevek csoporttal, benne a Tároló és az Elem mezővel](./kepek/stilusozas-egyedi-osztalynevek.webp)

*A mező Megjelenítés szakasza az Egyéni osztálynevek csoporttal, benne a Tároló és az Elem mezővel* (https://minta-bolt.hu/wp-admin/admin.php?page=ninja-forms&form_id=1)

A képen az **Egyéni osztálynevek** csoport két beviteli mezője látszik: a **Tároló** és az **Elem**. Az oszlopos osztályok a **Tároló** mezőbe kerülnek.

A sorban az első mező osztálya mindig a `first`, a többi mező osztálya a szélességet adja. Az elérhető osztályok:

| Osztály | Szélesség |
|---|---|
| `first` | A sor első mezőjére kerül, jelzi az új sor kezdetét. |
| `one-half` | Fél sor |
| `one-third` | Egyharmad |
| `two-thirds` | Kétharmad |
| `one-fourth` | Egynegyed |
| `two-fourths` | Kétnegyed |
| `three-fourths` | Háromnegyed |
| `one-sixth` | Egyhatod |
| `two-sixths` | Kéthatod |
| `three-sixths` | Háromhatod |
| `four-sixths` | Négyhatod |
| `five-sixths` | Öthatod |

Egy két egyforma oszlopos sor például így néz ki: az első mező **Tároló** mezőjébe `first one-half`, a másodikéba `one-half` kerül.

Ez a megoldás korlátozott. Ha összetettebb oszlopkezelés kell, használd a Layout & Styles bővítmény húzással működő elrendezéskezelőjét (lásd: [Oszlopos elrendezés](https://hub.hellowp.io/hu/plugins/ninja-forms-style/elrendezes/)).

### Listák oszlopokban

A jelölőnégyzet- és rádiógombos listák elemeit is rendezheted oszlopokba. Írd a lista mező **Tároló** osztálynevei közé a kívánt osztályt:

| Osztály | Oszlopok száma |
|---|---|
| `two-col-list` | 2 |
| `three-col-list` | 3 |
| `four-col-list` | 4 |
| `five-col-list` | 5 |
| `six-col-list` | 6 |

Három oszlophoz például ez kell:

```text
three-col-list
```

## Layout & Styles

Ha nem szeretnél HTML-lel és CSS-sel foglalkozni, a Layout & Styles bővítmény kész felületet ad az űrlapok kinézetének beállításához. Ennek részletei a [Stílusbeállítások](https://hub.hellowp.io/hu/plugins/ninja-forms-style/stilusok/) és a [Stílusok szintjei és visszaállítás](https://hub.hellowp.io/hu/plugins/ninja-forms-style/szintek/) fejezetben vannak.

### Az összes stílus törlése

Ha a Layout & Styles stílusait az összes űrlapon törölni szeretnéd, nyisd meg a **Ninja Forms → Styling** oldalt, kattints az oldal alján az **Összes stílus alaphelyzetbe állítása** gombra, majd a megerősítő ablakban a törlést jóváhagyó gombra. A törlés az oldal minden fülén kiüríti a webhelyszintű stílusokat, a webhely összes űrlapjára. Az űrlapszerkesztőben egyes űrlapokhoz vagy mezőkhöz beállított stílusokat nem érinti. A törlés azonnal megtörténik, és nem vonható vissza. A lépéseket képpel a [Stílusok szintjei és visszaállítás](https://hub.hellowp.io/hu/plugins/ninja-forms-style/szintek/) fejezet mutatja.