A 2.5-ös téma CSS-választói

Ez a fejezet a régebbi, 2.5-ös témájú (és a régi jelölést használó) űrlapok elemeit sorolja fel, mindegyikhez két választóval: az egyik minden űrlapra, a másik csak egy adott űrlapra hat. Az utóbbiban az 1 helyére a saját űrlapod azonosítóját írd. A példák szándékosan feltűnő (piros) szabályt használnak, hogy könnyen lásd, melyik elemet találtad el.

A mezőlista ezekben az űrlapokban ul, a mezők li elemek. Az újabb, Orbital témájú űrlapok választóit a CSS-útmutató fejezet tartalmazza.

Űrlap burkolója

Az egész űrlapot körülvevő div.

/* minden űrlap */
body .gform_wrapper { border: 1px solid red }
/* csak az 1-es űrlap */
body #gform_wrapper_1 { border: 1px solid red }

Űrlap fejléce

A fejléc tartalmazza az űrlap címét és leírását.

/* a fejléc (div): minden űrlap, majd az 1-es */
body .gform_wrapper .gform_heading { border: 1px solid red }
body #gform_wrapper_1 .gform_heading { border: 1px solid red }

/* az űrlap címe (h3) */
body .gform_wrapper .gform_heading .gform_title { color: red }
body #gform_wrapper_1 .gform_heading .gform_title { color: red }

/* az űrlap leírása (span) */
body .gform_wrapper .gform_heading .gform_description { border: 1px solid red }
body #gform_wrapper_1 .gform_heading .gform_description { border: 1px solid red }

Űrlap törzse

Törzs és mezőlista

/* a törzs (div) */
body .gform_wrapper .gform_body { border: 1px solid red }
body #gform_wrapper_1 .gform_body { border: 1px solid red }

/* a mezőlista (ul), amely az összes mezőt tartalmazza */
body .gform_wrapper .gform_body .gform_fields { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields { border: 1px solid red }

/* egy mező (li) */
body .gform_wrapper .gform_body .gform_fields .gfield { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield { border: 1px solid red }

Beviteli elem, leírás és kötelezőségjelző

A beviteli elem burkolója (.ginput_container), a mező leírása (.gfield_description) és a kötelezőségjelző (.gfield_required) három szinten célozható: minden űrlapon, egy űrlapon, vagy egyetlen mezőn. Az utolsó esetben a #field_XX_X helyére a mező azonosítóját írd, például #field_1_3.

/* a beviteli elem burkolója (div) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container { border: 1px solid red }

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

/* a kötelezőségjelző (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required { color: red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label .gfield_required { color: red }
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_label .gfield_required { color: red }

Űrlap élőlába

Az élőláb a küldés gombot és a szerkesztési hivatkozást (rendszergazdáknak) tartalmazza.

/* az élőláb (div) */
body .gform_wrapper .gform_footer { border: 1px solid red }
body #gform_wrapper_1 .gform_footer { border: 1px solid red }

/* a küldés gomb (input) */
body .gform_wrapper .gform_footer input[type=submit] { border: 1px solid red }
body #gform_wrapper_1 .gform_footer input[type=submit] { border: 1px solid red }

/* a küldés gomb, ha képet használsz gombnak */
body .gform_wrapper .gform_footer input[type=image] { border: 1px solid red }
body #gform_wrapper_1 .gform_footer input[type=image] { border: 1px solid red }

Megerősítő üzenet

A sikeres beküldés után ugyanazon az oldalon megjelenő üzenet.

/* minden űrlap */
body .gform_confirmation_wrapper .gform_confirmation_message { border: 1px solid red; }
/* az 1-es űrlap */
body #gform_confirmation_wrapper_1 .gform_confirmation_message { color: black; }

Ellenőrzési hibák

/* a fő hibaüzenet az űrlap tetején (div) */
body .gform_wrapper .validation_error { border: 1px solid red }
body #gform_wrapper_1 .validation_error { border: 1px solid red }

/* a hibás értékű mezőt tartalmazó lista elem (li) */
body .gform_wrapper .gform_body .gform_fields .gfield_error { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error { border: 1px solid red }

/* a hibás mező alatti hibaüzenet (div) */
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error .validation_message { border: 1px solid red }

Többoldalas űrlapok

Az alábbi választók a többoldalas űrlapok elemeit célozzák. Mindegyiknél az első sor minden űrlapra, a második az 1-es űrlapra vonatkozik.

Haladásjelző

Elem	Választó
Haladásjelző burkoló (div)	.gform_wrapper .gf_progressbar_wrapper
Haladásjelző címe, a „x. lépés / y” szöveg (h3)	.gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title
A haladásjelző sáv (div)	.gform_wrapper .gf_progressbar_wrapper .gf_progressbar
A százalékos kitöltés sávja	.gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage
A kitöltöttség százalékos száma (span)	.gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage span

Egy adott űrlapra szűkítéshez cseréld a .gform_wrapper részt #gform_wrapper_1-re, például: body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar_title { color: red }.

Lépések

Elem	Választó
A lépések burkolója, az általad megadott lépésnevekkel (div)	.gform_wrapper .gf_page_steps
Minden lépés (div)	.gform_wrapper .gf_page_steps .gf_step
Az aktív lépés	.gform_wrapper .gf_page_steps .gf_step_active
A még nem elért (inaktív) lépés	.gform_wrapper .gf_page_steps .gf_step_pending

Oldalak, élőláb és gombok

Elem	Választó
Egy oldalnyi mező burkolója (div)	.gform_wrapper .gform_page
Csak az 1-es űrlap 2. oldala	#gform_wrapper_1 #gform_page_1_2
Az oldal élőlába, a lapozógombokkal (div)	.gform_wrapper .gform_body .gform_page_footer
Következő gomb (input)	.gform_wrapper .gform_body .gform_page_footer .gform_next_button
Egy adott Következő gomb: az 1-es űrlap 1-es gombja	#gform_wrapper_1 .gform_body .gform_page_footer #gform_next_button_1_1
Előző gomb (input)	.gform_wrapper .gform_body .gform_page_footer .gform_previous_button
Egy adott Előző gomb: az 1-es űrlap 2-es gombja	#gform_wrapper_1 .gform_body .gform_page_footer #gform_previous_button_1_2
Küldés gomb az utolsó oldalon (input)	.gform_wrapper .gform_body .gform_page_footer .gform_button

A táblázatban a választók a body elem után értendők, például: body .gform_wrapper .gform_page { border: 1px solid red }.

Mentés és folytatás hivatkozás

A „Mentés és folytatás” hivatkozás az űrlap élőlábában van, ezért az élőláb választójával együtt célozhatod.

/* minden űrlap */
body .gform_wrapper .gform_footer .gform_save_link { border: 1px solid red }
/* az 1-es űrlap */
body #gform_wrapper_1 .gform_footer .gform_save_link { border: 1px solid red }
/* az 1-es űrlap többoldalas változatának egy adott hivatkozása */
body #gform_wrapper_1 .gform_footer #gform_save_1_2_link { border: 1px solid red }

Termék mező

Az egyetlen termék (Termék mező, egy termék típus) elemei. A #field_XX_X helyére a mező azonosítóját írd.

/* a termék mező burkolója (div) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleproduct { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_singleproduct { border: 1px solid red; }

/* az ár felirata (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleproduct .ginput_product_price_label { color: red; }

/* az ár (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleproduct .ginput_product_price { color: red; }

/* a mennyiség beviteli mezője (input) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleproduct .ginput_quantity { border: 1px solid red; }

Mindegyik elemnél ugyanúgy szűkíthetsz egy űrlapra (body #gform_wrapper_1 …) vagy egyetlen mezőre (#field_XX_X.gfield).

Bankkártya mező

A bankkártya mező elemei. Az alábbi választók a body .gform_wrapper .gform_body .gform_fields .gfield után folytatódnak, és ugyanúgy szűkíthetők egy űrlapra vagy egy mezőre, mint a többi elem.

Elem	Választó (a .gfield után)
A bankkártya mező burkolója (div)	.ginput_container_creditcard
A kártyaikonok burkolója (div)	.ginput_container_creditcard .gform_card_icon_container
American Express ikon	… .gform_card_icon_container .gform_card_icon_amex
Discover ikon	… .gform_card_icon_container .gform_card_icon_discover
Mastercard ikon	… .gform_card_icon_container .gform_card_icon_mastercard
Visa ikon	… .gform_card_icon_container .gform_card_icon_visa
A kártyaszám beviteli mezője (input)	.ginput_container_creditcard .ginput_full input
A lejárati dátum burkolója (span)	.ginput_container_creditcard .ginput_expiration_container
A lejárat hónapja (select)	… .ginput_expiration_container .ginput_card_expiration_month
A lejárat éve (select)	… .ginput_expiration_container .ginput_card_expiration_year
A biztonsági kód burkolója (div)	.ginput_container_creditcard .ginput_cardinfo_right
A biztonsági kód beviteli mezője (input)	… .ginput_cardinfo_right .ginput_card_security_code
A biztonsági kód ikonja (span)	… .ginput_cardinfo_right .ginput_card_security_code_icon

Példa a Visa ikon megcélzására egy adott mezőn:

body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_visa { border: 1px solid red; }