CSS-célzási példák az Orbital témához

Az Orbital témájú űrlap elemeinek célzása CSS-sel: burkoló, fejléc, törzs, mezők, élőláb, megerősítés és hibák, valamint a betűméret módosítása.

Ez a fejezet példákat ad az Orbital témájú űrlapok elemeinek célzására. A régi, 2.5-ös témához a 2.5-ös téma CSS-választói és a CSS-célzási példák (2.5-ös téma) fejezet tartozik.

Minden elemhez két példa van: az egyik minden Orbital űrlapra, a másik egy adott azonosítójú űrlapra vonatkozik. Ha egy konkrét űrlapot formázol, nézd meg az oldal forrását (vagy vizsgáld meg az elemet), keresd meg az űrlap azonosítóját, és írd be az 1 helyére. A példák a szükségesnél hosszabbak, de a nagyobb specificitás megkönnyíti a más stílusok felülírását.

Az Orbital téma azonosítói

Az Orbital űrlap burkolója a .gform-theme--framework osztályt viseli. Az azonosítók ugyanúgy működnek, mint korábban:

#gform_wrapper_xx: az xx azonosítójú űrlap burkolója;
#field_xx_yyy: az xx azonosítójú űrlap yyy azonosítójú mezője.

Ez a minta a szokásos, oldalon megjelenő űrlapokra érvényes. Az ismétlő bemeneteknél, néhány többbemenetes mezőnél, valamint az adminisztrációs és előnézeti környezetben eltérhet.

Űrlap burkoló és fejléc

Elem	Minden Orbital űrlapra	Egy adott űrlapra
Űrlapburkoló (`div`)	`.gform-theme--framework`	`.gform-theme--framework#gform_wrapper_1`
Űrlapfejléc (cím és leírás, `div`)	`.gform-theme--framework .gform_heading`	`.gform-theme--framework#gform_wrapper_1 .gform_heading`
Űrlapcím (`h3`)	`.gform-theme--framework .gform_title`	`.gform-theme--framework#gform_wrapper_1 .gform_title`
Űrlapleírás (`span`)	`.gform-theme--framework .gform_description`	`.gform-theme--framework#gform_wrapper_1 .gform_description`

Például az űrlapcím pirosra színezése:

/* minden Orbital űrlap */
.gform-theme--framework .gform_title { color: red; }

/* csak az 1-es azonosítójú űrlap */
.gform-theme--framework#gform_wrapper_1 .gform_title { color: red; }

Űrlaptörzs és mezők

Elem	Minden Orbital űrlapra	Egy adott űrlapra
Törzs (`div`)	`.gform-theme--framework .gform_body`	`.gform-theme--framework#gform_wrapper_1 .gform_body`
Mezőtartó (`div`)	`.gform-theme--framework .gform_fields`	`.gform-theme--framework#gform_wrapper_1 .gform_fields`
Mezőelem (`div` vagy `fieldset`)	`.gform-theme--framework .gform_fields .gfield`	`.gform-theme--framework#gform_wrapper_1 .gform_fields .gfield`
Beviteli elem tartója (`div`)	`.gform-theme--framework .ginput_container`	`.gform-theme--framework#gform_wrapper_1 .ginput_container`
Mezőleírás tartója (`div`)	`.gform-theme--framework .gfield_description`	`.gform-theme--framework#gform_wrapper_1 .gfield_description`
Mezőcímke (`label`)	`.gform-theme--framework .gfield_label`	`.gform-theme--framework#gform_wrapper_1 .gfield_label`
Kötelező mező jelzője (csillag, `span`)	`.gform-theme--framework .gfield_required`	`.gform-theme--framework#gform_wrapper_1 .gfield_required`

Egy konkrét mezőre az #field_1_4 azonosítóval szűkíthetsz (az 1 az űrlap, a 4 a mező azonosítója):

.gform-theme--framework .gform_fields #field_1_4.gfield .ginput_container { border: 1px solid red; }
.gform-theme--framework #field_1_4 .gfield_description { border: 1px solid red; }
.gform-theme--framework #field_1_4 .gfield_label { color: red; }
.gform-theme--framework .gform_fields #field_1_4 .gfield_required { color: red; }

Élőláb és küldés gomb

Elem	Minden Orbital űrlapra	Egy adott űrlapra
Élőláb (`div`)	`.gform-theme--framework .gform_footer`	`.gform-theme--framework#gform_wrapper_1 .gform_footer`
Küldés gomb	`.gform-theme--framework .gform_footer input[type="submit"].gform_button`	`.gform-theme--framework#gform_wrapper_1 input[type="submit"]`
Képes küldés gomb	`.gform-theme--framework .gform_footer input[type="image"].gform_image_button`	`.gform-theme--framework#gform_wrapper_1 input[type="image"].gform_image_button`

A gomb színét érdemes közvetlen background szabály helyett CSS API-változóval állítani, például:

.gform-theme--framework .gform_footer input[type="submit"].gform_button {
  --gf-ctrl-btn-bg-color-primary: #0096d6;
}

A küldés gomb részletes beállításait a Küldés gomb, Mentés és folytatás, ellenőrzési hibák és többoldalas űrlap CSS-e az Orbital témában fejezet írja le. Ott azt is megtudod, hogy az újabb kiadásokban a gombok button elemek, így a fenti input alapú választók helyett a button[type="submit"] használandó.

Megerősítés és ellenőrzési hibák

Elem	Választó
Beágyazott megerősítő üzenet	`.gform-theme--framework .gform_confirmation_message`
Ellenőrzési hibaüzenet (az űrlap tetején)	`.gform-theme--framework .gform_validation_errors`
Hibás mező tartója	`.gform-theme--framework .gfield_error` (egy űrlapra: `.gform-theme--framework#gform_wrapper_1 .gfield_error`)
Mezőhöz tartozó hibaüzenet	`.gform-theme--framework .gfield_validation_message` (egy űrlapra: `.gform-theme--framework#gform_wrapper_1 .gfield_validation_message`)

A megerősítő üzenet választója a beágyazott, alapértelmezett megerősítésre vonatkozik. Ha az üzenet nem az Orbital burkolón belül jelenik meg, célozd a #gform_confirmation_wrapper_X azonosítót (az X az űrlap azonosítója).

Többoldalas űrlap elemei

Az Orbital témában ugyanezt a mintát követik a többoldalas űrlap elemei is. Mindegyik két formában működik: minden Orbital űrlapra a .gform-theme--framework előtaggal, egy adott űrlapra pedig a .gform-theme--framework#gform_wrapper_1 előtaggal.

Elem	Választó (az előtag után)
Haladásjelző tartója	`.gf_progressbar_wrapper`
Haladásjelző címe	`.gf_progressbar_title`
Haladásjelző sávja	`.gf_progressbar`
Haladásjelző kitöltött része (kék változat)	`.gf_progressbar .gf_progressbar_percentage.percentbar_blue`
Lépések tartója	`.gf_page_steps`
Lépés felirata	`.gf_step_label`
Aktív lépés száma	`.gf_step_active .gf_step_number`
Oldal	`.gform_page`
Oldal élőlába	`.gform_page_footer`
Tovább gomb	`.gform_next_button`
Vissza gomb	`.gform_previous_button`
Küldés gomb az utolsó oldalon	`input[type="submit"]`

A haladásjelző kitöltött részének színét a --gf-field-pg-prog-bar-bg-color-blue változó adja, a Tovább gomb színét a --gf-ctrl-btn-bg-color-primary, a Vissza gombét a --gf-ctrl-btn-bg-color-secondary. A részleteket a Küldés gomb, Mentés és folytatás, ellenőrzési hibák és többoldalas űrlap CSS-e az Orbital témában fejezetben találod.

Betűméret módosítása az Orbital témában

Az Orbital űrlap a betűtípust és a méretet alapból a témától örökli. Ha felül akarod írni, a szabályaidat az Orbitalra szűkítsd, hogy ne hassanak a régi vagy a 2.5-ös témájú űrlapokra. Ehhez a .gform-theme--framework osztályt használd, egy adott űrlapnál mellé írd az #gform_wrapper_{azonosító} azonosítót is. Ha még szűkebb célzás kell, az Orbital burkoló a .gform-theme--orbital osztályt is viseli.

Az űrlap alap betűmérete:

.gform-theme--framework {
  font-size: 18px;
}

A mezőcímkék betűmérete. A CSS API-változóval:

.gform-theme--framework .gfield_label {
  --gf-ctrl-label-font-size-primary: 18px;
}

Vagy közvetlenül, változó nélkül:

.gform-theme--framework .gfield_label {
  font-size: 18px;
}

A beviteli elemek betűmérete:

.gform-theme--framework :is(input, select, textarea) {
  font-size: 18px;
}

Egy adott mező beviteli eleme. A példa a 6-os űrlap 1-es mezőjére vonatkozik (a mező burkolója #field_6_1):

.gform-theme--framework #field_6_1 :is(input, select, textarea) {
  font-size: 18px;
}

A beviteli elemet a saját azonosítójával is célozhatod, ez a példában #input_6_1.

Hová írd a CSS-t?

Három helyen is elhelyezheted a saját szabályaidat:

WordPress testreszabó. A Megjelenés → Testreszabás oldalon a További CSS részbe írd. Ez a módosítás a témához kötődik: ha témát váltasz, elvész.
Harmadik fél bővítménye. Léteznek bővítmények, amelyek a témafájlok szerkesztése nélkül adnak hozzá stílust, és gyakran csak bizonyos űrlapoldalakra korlátozhatók. A módosításaid témaváltás vagy témafrissítés után is megmaradhatnak. Ilyen a Gravity Wiz Code Chest bővítménye, amely az űrlaphoz tartozó JavaScript- és CSS-kódot a megfelelő helyre írja ki, vagy a Simple Custom CSS and JS Pro. Keresgélhetsz a közösségi kiegészítők között és a WordPress bővítménytárban is. A harmadik féltől származó megoldásokat a Gravity Forms nem vizsgálja és nem támogatja: azt, hogy megfelelnek-e a funkcionális, biztonsági, jogi és költségigényeidnek, neked kell eldöntened.
A téma style.css fájlja. Az egész webhelyre érvényes módosításokat itt is megadhatod, de ehhez legalább közepes CSS-tudás kell. A fájl helye témánként eltér: gyakran a témamappa gyökerében van, de a témafejlesztő máshová is teheti. Mielőtt módosítod, mindig készíts róla biztonsági mentést. Az, hogy a fájlban hová írd a szabályokat, témánként változik; ha a módosítás nem hat, nézd meg a téma dokumentációját, vagy kérdezd a témafejlesztőt.

Készült: 2026. november 2.