# Stílusbeállítások

> A webhelyszintű Stílusbeállítások oldal fülei, szakaszai és vezérlői: színek, méretek, térközök, szegélyek, valamint a CSS-mód.

A webhelyszintű stílusokat a **Ninja Forms → Styling** menüpontban állítod be. Az oldal címe **Stílusbeállítások**. Amit itt megadsz, az a webhely minden Ninja Forms űrlapjára érvényes.

![A Stílusbeállítások oldal öt füllel és az Űrlap stílusai fül szakaszaival](./kepek/stilus-urlap-stilusok.webp)

*A Stílusbeállítások oldal öt füllel és az Űrlap stílusai fül szakaszaival* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling)

A képen az öt fül látszik, alatta az **Űrlap stílusai** fül zárt szakaszai, lent a **Beállítások mentése** gomb.

Egy szakasz fejlécére kattintva kinyitod, és megjelennek a vezérlői. A módosítások csak a **Beállítások mentése** gombbal lépnek életbe.

## Fülek és szakaszok

### Űrlap stílusai

Az űrlap fő elemei, minden űrlapra érvényesen.

| Szakasz | Mire vonatkozik |
|---|---|
| **Konténer stílusai** | Az egész űrlapot körülvevő doboz. |
| **Cím stílusai** | Az űrlap címe. |
| **Kötelező mezőket jelző üzenet stílusai** | A „kötelező mezők” figyelmeztető sor az űrlap tetején. |
| **Sor stílusai** | Az űrlap minden sora. |
| **Páratlan sor stílusai** | Csak az 1., 3., 5. stb. sor. Felülírja a **Sor stílusai** beállításait ezeknél a soroknál. |
| **Sikeres válaszüzenet stílusai** | A sikeres beküldés után megjelenő üzenet. |

A **Sor stílusai** és a **Páratlan sor stílusai** együtt sávos, váltakozó hátterű megjelenést ad. Állíts be például a sorokhoz fehér, a páratlan sorokhoz világoskék hátteret. Ha a páratlan sorokhoz nem adsz meg semmit, minden sor a **Sor stílusai** szerint jelenik meg.

![A Páratlan sor stílusai szakasz kinyitva, világoskék háttérrel](./kepek/stilus-paratlan-sor-nyitva.webp)

*A Páratlan sor stílusai szakasz kinyitva, világoskék háttérrel* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling)

A képen a **Páratlan sor stílusai** szakaszban a **Háttér** színe világoskék, a **Padding** értéke 10 px.

### Alapértelmezett mezőstílusok

Minden Ninja Forms mezőre érvényes stílusok, a mező típusától függetlenül. Három szakasz van:

| Szakasz | Mire vonatkozik |
|---|---|
| **Burkolóelem stílusai** | A címkét és a beviteli elemet körülvevő doboz. |
| **Címke stílusai** | A mező felirata. |
| **Elem stílusai** | Maga a beviteli elem (például a szövegdoboz). |

Az elrendezési elemeknél, ahol nincs címke és előfordulhat, hogy burkolóelem sincs, csak az **Elem stílusai** érvényesül.

![A Címke stílusai szakasz kinyitva az Alapértelmezett mezőstílusok fülön](./kepek/stilus-alap-mezo.webp)

*A Címke stílusai szakasz kinyitva az Alapértelmezett mezőstílusok fülön* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling&tab=field_settings)

A képen az **Alapértelmezett mezőstílusok** fül látszik, a **Címke stílusai** szakasz kinyitva.

Használd mértékkel: ezek a stílusok minden mezőre érvényesek.

### Mezőtípus stílusai

Ugyanazok a lehetőségek, mint az alapértelmezett mezőstílusoknál, de egy kiválasztott mezőtípusra. Így például az összes szövegdobozt egyféleképpen, az összes Küldés gombot másképp stílusozhatod.

1. Nyisd meg a **Mezőtípus stílusai** fület.
2. A **Mező típusa** legördülő listából válaszd ki a típust, például **Küldés**.
3. Nyisd ki a megjelenő szakaszokat. A **Küldés** típusnál ezek a **Küldés Elem** és a **Küldés Az elem rámutatási állapota**.
4. Állítsd be a kívánt értékeket, majd kattints a **Beállítások mentése** gombra.

![A Mezőtípus stílusai fül Küldés típussal, az Elem szakasz kék háttérrel és fehér szöveggel](./kepek/stilus-mezotipus-kuldes.webp)

*A Mezőtípus stílusai fül Küldés típussal, az Elem szakasz kék háttérrel és fehér szöveggel* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling&tab=field_type&field_type=submit)

A képen a **Küldés** típus **Háttér** színe kék, a **Szöveg** színe fehér.

A listában a Ninja Forms összes mezőtípusa szerepel, például **Egysoros szöveg**, **Bekezdés szövege**, **E-mail-cím**, **Telefonszám**, **Küldés**, **Dátum/idő**.

### Hiba stílusai

Ha az űrlapot hibásan töltik ki, az űrlap tetején és az érintett mezőknél hibaüzenet jelenik meg. Ezen a fülön ezeket stílusozhatod.

![A Hiba stílusai fül öt szakasszal](./kepek/stilus-hiba.webp)

*A Hiba stílusai fül öt szakasszal* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling&tab=error_settings)

A képen az öt szakasz látszik:

- **Fő hibaüzenet konténerének stílusai**
- **Hibaállapotú mező konténerének stílusai**
- **Hibaállapotú mező címkéjének stílusai**
- **Hibaállapotú mező elemének stílusai**
- **Hibaüzenet stílusai**

### Dátumválasztó stílusai

A dátum mezők legördülő naptárának megjelenése, kilenc szakaszban.

![A Dátumválasztó stílusai fül kilenc szakasszal](./kepek/stilus-datumvalaszto.webp)

*A Dátumválasztó stílusai fül kilenc szakasszal* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling&tab=datepicker_settings)

A képen a szakaszok: **Dátumválasztó konténere**, **Dátumválasztó fejléce**, **A dátumválasztó hét napjai**, **Dátumválasztó napjai**, **Dátumválasztó napjai rámutatáskor**, **Dátumválasztó mai napja**, **Dátumválasztó kijelölt napja**, **Dátumválasztó előző linkje** és **Dátumválasztó következő linkje**.

### Többrészes űrlapok stílusai

Ha a Multi-Part Forms bővítmény is aktív, hatodik fülként megjelenik a többrészes űrlapok stílusainak lapja.

## A vezérlők

Egy szakaszon belül a vezérlők csoportokba rendezve állnak. Nem minden szakaszban van mind.

![A Konténer stílusai szakasz kinyitva, kitöltött háttérrel, szegéllyel és belső térközzel](./kepek/stilus-kontener-nyitva.webp)

*A Konténer stílusai szakasz kinyitva, kitöltött háttérrel, szegéllyel és belső térközzel* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling)

A képen a **Konténer stílusai** szakasz látszik: világos **Háttér**, 20 px **Padding**, folytonos, 1 px vastag, kék **Szegély**.

### Szín

A **Háttér** és a **Szöveg** színét színválasztóval állíthatod be, vagy begépelheted a HEX színkódot (például `#2b6cb0`). A × gomb törli a beállított színt.

### Típus és méret

| Vezérlő | Mit állít | Mértékegység |
|---|---|---|
| **Betűméret** | A szöveg mérete. | px, em vagy rem |
| **Szélesség** | Az elem szélessége. | választható, alapból % |
| **Magasság** | Az elem magassága. | választható, alapból px |

Minden vezérlőnél csúszkával adod meg az értéket, és a mértékegységet a mellette lévő legördülő listából választod. Amíg nem állítasz be semmit, az **Alapértelmezett** felirat látszik.

### Térközök

A **Padding** az elem belső, a **Margó** a külső térköze. Alapból egyetlen csúszka egyszerre mind a négy oldalra érvényes. Az **Oldalak** gombbal külön csúszkákat kapsz a **Felül**, **Jobb**, **Alul** és **Bal** oldalhoz.

![A Padding vezérlő az Oldalak gombbal kinyitva, négy külön csúszkával](./kepek/stilus-oldalak.webp)

*A Padding vezérlő az Oldalak gombbal kinyitva, négy külön csúszkával* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling)

A képen a **Padding** alatt az **Oldalak** gomb aktív, és megjelent a négy oldal csúszkája.

A **Margó** csak blokk szintű elemeknél működik.

### Szegély

- **Szegély stílusa**: **Nincs**, **Folytonos**, **Szaggatott** vagy **Pontozott**.
- **Szegélyvastagság**: a szegély vastagsága.
- **Szegély**: a szegély színe.

## CSS-mód

Minden szakasz tetején van egy **CSS-mód** kapcsoló. Bekapcsolva a vizuális vezérlők helyett a hagyományos CSS-tulajdonságokat beírható mezőkként kapod, és a megadott értékeket szövegesen kell kitöltened.

![A Konténer stílusai szakasz bekapcsolt CSS-móddal, szöveges mezőkkel](./kepek/stilus-css-mod.webp)

*A Konténer stílusai szakasz bekapcsolt CSS-móddal, szöveges mezőkkel* (https://minta-bolt.hu/wp-admin/admin.php?page=nf-styling)

A képen a **CSS-mód** be van kapcsolva: a korábban csúszkával beállított értékek (például `1px`, `#2b6cb0`, `20px`) szövegként jelennek meg.

A CSS-módban az alábbi mezők vannak.

| Mező | Mit vár | Példa |
|---|---|---|
| **Háttérszín** | Színválasztó vagy HEX színkód. | `#f4f8fc` |
| **Keret szélessége** | Egy-négy érték, lásd lent. | `1px` |
| **Szegély stílusa** | Legördülő lista. | **Folytonos** |
| **Szegélyszín** | Színválasztó vagy HEX színkód. | `#2b6cb0` |
| **Szöveg színe** | Színválasztó vagy HEX színkód. | `#333333` |
| **Magasság** | Egész szám és px vagy %. | `500px`, `100%` |
| **Szélesség** | Egész szám és px vagy %. | `500px`, `100%` |
| **Betűméret** | Egész szám és px vagy em. | `16px`, `1em` |
| **Margó** | Egy-négy érték, lásd lent. | `10px 5px` |
| **Padding** | Egy-négy érték, lásd lent. | `20px` |
| **Megjelenítés** | Legördülő lista: **Alapértelmezett**, **Blokk**, **Beágyazott**, **Inline Block**. | **Blokk** |
| **Lebegőpontos szám** | A CSS `float` tulajdonsága: `left`, `right` vagy `none`. | `left` |
| **Haladó CSS-tulajdonságok megjelenítése** | Jelölőnégyzet: kibontja a haladó mezőt. | |
| **Haladó CSS** | Tetszőleges CSS-szabályok. | lásd lent |

### Több értékes mezők

A **Keret szélessége**, a **Margó** és a **Padding** egy-négy értéket fogad el, szóközzel elválasztva:

| Megadott értékek | Eredmény |
|---|---|
| `1px` | Mind a négy oldalon 1 px. |
| `1px 2px` | Fent és lent 1 px, bal és jobb oldalon 2 px. |
| `1px 2px 3px` | Fent 1 px, bal és jobb oldalon 2 px, lent 3 px. |
| `1px 2px 3px 4px` | Fent 1 px, jobbra 2 px, lent 3 px, balra 4 px. |

### Haladó CSS

A **Haladó CSS** mezőbe bármilyen CSS-szabályt beírhatsz, úgy, ahogy egy CSS-fájlban tennéd. Minden sort pontosvesszővel zárj le:

```css
border-radius: 5px;
line-height: 18px;
box-shadow: 2px 2px 2px 3px #333;
```