# CSS-célzási példák és betűméret módosítása (2.5-ös téma)

> Gyakori mezők CSS-választói a régi és az új jelölésben, valamint példák a betűméret átállítására a 2.5-ös témájú űrlapokban.

Ez a fejezet a [2.5-ös téma CSS-választói](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-regi-tema/) kiegészítése: az általános mezők (szöveg, lista, jelölőnégyzet, dátum, idő, szakasz, lista mező) választói, a jelölésváltozatok közti különbségek, és a betűméret módosítása.

A választók szándékosan hosszabbak, mint amennyi a stílushoz minimálisan kellene: a nagyobb specificitás megkönnyíti, hogy felülírd a téma örökölt szabályait. Az `1` az űrlap azonosítója, az `XX_X` a mező azonosítója (például `#field_1_3`), ezeket cseréld a sajátodra. Az azonosítót az oldal forrásában vagy az űrlapszerkesztőben találod meg.

## Régi és szabványos jelölés

Az űrlapok kétféle jelöléssel készülhetnek:

- **régi jelölés (legacy markup):** a 2.5-nél régebbi űrlapok, vagy azok, amelyeknél a beállítás be van kapcsolva az űrlap beállításai között;
- **szabványos jelölés (standard markup):** a 2.5-ös vagy újabb verzióban létrehozott űrlapok, vagy a régebbiek kikapcsolt beállítással.

A burkolóra a jelölés szerinti osztály kerül, így külön célozhatod őket:

```css
/* minden űrlap */
body .gform_wrapper { border: 1px solid red }
/* csak a szabványos jelölésű űrlapok */
body .gform_wrapper.gravity-theme { border: 1px solid red }
/* csak a régi jelölésű űrlapok */
body .gform_wrapper.gform_legacy_markup_wrapper { border: 1px solid red }
```

Ahol a két jelölés eltér, az alábbi táblázat mutatja:

| Elem | Szabványos jelölés | Régi jelölés |
|---|---|---|
| Választós és jelölőnégyzetes lista eleme | `.gchoice` (div) | `li` |
| Fő hibaüzenet az űrlap tetején | `.gform_validation_error` | `.validation_error` |
| Lista mező oszlopfejléce | `.gfield_list_header` (div) | `table.gfield_list thead th` |

## Mezők közös elemei

```css
/* az űrlap törzse, a mezőlista és egy mező */
body .gform_wrapper .gform_body { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields .gfield { border: 1px solid red }

/* a beviteli elem burkolója */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container { border: 1px solid red }

/* a mező leírása */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description { border: 1px solid red }

/* a mező címkéje és a kötelezőségjelző (csillag) */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label { color: red }
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required { color: red }
```

Mindegyik három szinten használható: minden űrlapon, egy űrlapon (`body #gform_wrapper_1 …`), vagy egyetlen mezőn (`body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield …`).

## Egyszerű bevitelek

| Elem | Választó (a `body .gform_wrapper .gform_body .gform_fields .gfield` után) |
|---|---|
| Szöveges mező (input) | `input[type=text]` |
| Legördülő lista (select) | `select` |
| Bekezdés mező (textarea) | `textarea` |
| Választógomb-lista (div) | `.gfield_radio` |
| Választógomb-lista eleme, szabványos jelölés (div) | `.gfield_radio .gchoice` |
| Választógomb-lista eleme, régi jelölés (li) | `.gfield_radio li` |
| Választógomb | `.gfield_radio input[type=radio]` |
| Jelölőnégyzet-lista (div) | `.gfield_checkbox` |
| Jelölőnégyzet-lista eleme, szabványos jelölés (div) | `.gfield_checkbox .gchoice` |
| Jelölőnégyzet-lista eleme, régi jelölés (li) | `.gfield_checkbox li` |
| Jelölőnégyzet | `.gfield_checkbox input[type=checkbox]` |
| E-mail mező (HTML5 beállítással) | `input[type=email]` |
| Telefon mező (HTML5 beállítással) | `input[type=tel]` |
| Weboldal mező (HTML5 beállítással) | `input[type=url]` |

Példa egy adott mező szöveges beviteli elemére:

```css
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=text] { border: 1px solid red }
```

## Összetett mezők (név, cím és hasonlók)

A több részből álló mezők (például a Név és a Cím) bevitelei egy `.ginput_complex` burkolóban vannak. Az egyes részek a sorban elfoglalt helyük szerint kapnak osztályt: `.ginput_left`, `.ginput_right`, `.ginput_full`. Mindegyik részben a beviteli elem alatt egy alcímke (`label`) áll.

```css
/* az összetett mező burkolója */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex { border: 1px solid red }

/* a bal oldali rész (span) és alcímkéje */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left label { color: red }

/* a jobb oldali rész (span) és alcímkéje */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right label { color: red }

/* a teljes szélességű rész (span) és alcímkéje */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full label { color: red }
```

## Idő mező

| Elem | Választó (a `body .gform_wrapper .gform_body .gform_fields .gfield` után) |
|---|---|
| Óra burkolója (div) | `.gfield_time_hour` |
| Óra beviteli eleme (input) | `.gfield_time_hour input` |
| Óra alcímkéje (label) | `.gfield_time_hour label` |
| Perc burkolója (div) | `.gfield_time_minute` |
| Perc beviteli eleme (input) | `.gfield_time_minute input` |
| Perc alcímkéje (label) | `.gfield_time_minute label` |
| Délelőtt/délután burkolója (div) | `.gfield_time_ampm` |
| Délelőtt/délután választó (select) | `.gfield_time_ampm select` |

## Dátum mező

| Elem | Választó (a `body .gform_wrapper .gform_body .gform_fields .gfield` után) |
|---|---|
| Beviteli elem, dátumválasztós változat (input) | `.datepicker` |
| Naptárikon, dátumválasztós változat (img) | `img` |
| Hónap burkolója (div) | `.gfield_date_month` |
| Hónap beviteli eleme (input) | `.gfield_date_month input` |
| Hónap alcímkéje (label) | `.gfield_date_month label` |
| Nap burkolója (div) | `.gfield_date_day` |
| Nap beviteli eleme (input) | `.gfield_date_day input` |
| Nap alcímkéje (label) | `.gfield_date_day label` |
| Év burkolója (div) | `.gfield_date_year` |
| Év beviteli eleme (input) | `.gfield_date_year input` |
| Év alcímkéje (label) | `.gfield_date_year label` |

A naptárikon választója (`img`) a mezőn belül minden képre hat, ezért egy adott mezőre szűkítve használd (`#field_XX_X.gfield img`).

## Szakasztörés

A szakasztörés `.gsection` osztályt kap, nem `.gfield` osztályt.

```css
/* a szakasz burkolója */
body .gform_wrapper .gform_body .gform_fields .gsection { border: 1px solid red }
/* a szakasz címe (h2) */
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title { color: red }
/* a szakasz leírása (div) */
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description { border: 1px solid red }
/* egy adott szakasz */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection { border: 1px solid red }
```

## Lista mező

| Elem | Választó (a `body .gform_wrapper .gform_body .gform_fields .gfield` után) |
|---|---|
| A lista mező burkolója (div) | `.ginput_list` |
| A lista szerkezete | `.ginput_list .gfield_list` |
| Oszlopfejléc, szabványos jelölés (div) | `.ginput_list .gfield_list_header` |
| Oszlopfejléc, régi jelölés (th) | `.ginput_list table.gfield_list thead th` |
| Páratlan sor | `.ginput_list .gfield_list .gfield_list_row_odd` |
| Páros sor | `.ginput_list .gfield_list .gfield_list_row_even` |
| Cella | `.ginput_list .gfield_list .gfield_list_cell` |

A páratlan és páros sor külön választója jól jön váltakozó színű sorokhoz.

## Küldés gomb, megerősítés, hibák és többoldalas űrlap

A küldés gomb, az űrlap élőlába, a megerősítő üzenet, az ellenőrzési hibák és a többoldalas űrlap elemeinek választóit a [2.5-ös téma CSS-választói](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-regi-tema/) fejezet sorolja fel. A küldés gomb a többoldalas űrlap utolsó oldalán a `.gform_page_footer .gform_button` osztályt kapja.

A bankkártya mező és a Termék mező választói szintén abban a fejezetben vannak.

## Betűméret módosítása

Az űrlap alapból átveszi a téma stílusát, de a betűméretet átállíthatod saját CSS-sel. Az alábbi szabályokban a `18px` helyére a kívánt méret kerül.

**Az űrlap összes szövege:**

```css
body .gform_wrapper .gform_body {
    font-size: 18px;
}
```

**Az összes mezőcímke:**

```css
body .gform_wrapper .gform_body .gfield_label {
    font-size: 18px;
}
```

**Az összes beviteli elem:**

```css
body .gform_wrapper .gform_body input {
    font-size: 18px;
}
```

**Egy adott mező beviteli eleme.** A példa a 6-os űrlap 1-es mezőjére vonatkozik:

```css
#field_6_1.gfield input {
    font-size: 18px;
}
```

Ugyanezt elérheted a beviteli elem saját azonosítójával is, ez a példában `#input_6_1`.

## Az űrlap háttérszínének módosítása

Az alábbi szabályok a 2.5-ös témára vonatkoznak, és az űrlap burkolóját színezik.

**Minden űrlap háttere:**

```css
body .gform_wrapper {
    background-color: yellow;
}
```

**Egyetlen űrlap háttere.** A példa az 1-es azonosítójú űrlapot célozza:

```css
body #gform_wrapper_1 {
    background-color: yellow;
}
```

Az Orbital témához az [Orbital CSS-célzási példák](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-orbital-css-celzas-peldak/) fejezet szolgál.

### Hová írd a CSS-t

A saját CSS-t a **Megjelenés → Testreszabás** oldalon, a **További CSS** részben, vagy a gyermektéma stíluslapján helyezd el. A háromféle elhelyezési módról (testreszabó, külön bővítmény, a téma `style.css` fájlja) részletesen az [Orbital CSS-célzási példák](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-orbital-css-celzas-peldak/) fejezet utolsó szakasza szól.