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

Ez a fejezet a 2.5-ös téma CSS-választói 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:

/* 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

/* 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:

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.

/* 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.

/* 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 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:

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

Az összes mezőcímke:

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

Az összes beviteli elem:

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:

#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:

body .gform_wrapper {
    background-color: yellow;
}

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

body #gform_wrapper_1 {
    background-color: yellow;
}

Az Orbital témához az Orbital CSS-célzási példák 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 fejezet utolsó szakasza szól.