Űrlapok stílusozása

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.

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.

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).

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:

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 és a Stílusok szintjei és visszaállítás 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 fejezet mutatja.