Stílusbeállítások

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:

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