# 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](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-regi-tema/) és a [CSS-célzási példák (2.5-ös téma)](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-peldak-es-betumeret/) 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:

```css
/* 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):

```css
.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:

```css
.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](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-orbital-css-gombok-lapozas-hibak/) 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](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-orbital-css-gombok-lapozas-hibak/) 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:**

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

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

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

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

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

**A beviteli elemek betűmérete:**

```css
.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`):

```css
.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:

1. **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.
2. **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.
3. **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.