A Bejegyzés cím, törzs, kivonat, címkék, valamint az E-mail, Weboldal, Szám és HTML mező CSS-e az Orbital témában

Ezek a választók csak az Orbital témájú űrlapokra érvényesek. A 2.5-ös témához a CSS-választók az árazási, bejegyzés- és captcha-mezőkhöz és a régi témás mezőválasztók fejezet tartozik. A CSS API-változók áttekintése a CSS-útmutató fejezetben van.

A példákban a 112 az űrlap azonosítója, a 4 a mező azonosítója: ezeket cseréld a sajátodra. Minden mező azonosítója field_{űrlapazonosító}_{mezőazonosító} alakú, például field_5_3.

Közös minta: a mezőtípus osztályát a .gform-theme--framework után írod; egy adott űrlapra a .gform-theme--framework#gform_wrapper_112 szűkít; egyetlen mezőre az #field_112_4.

Bejegyzés címe

A Bejegyzés címe mező egy egysoros szövegbevitel (input[type="text"]), amelynek szélességét a mezőméret (kicsi, közepes, nagy) szabja meg. Osztályai: .gfield, .gfield--type-post_title, .ginput_container_post_title.

/* beviteli mező: minden Orbital űrlap */
.gform-theme--framework .gfield--type-post_title {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
}

/* a szélességhez nincs változó, közvetlen tulajdonság kell */
.gform-theme--framework .gfield--type-post_title input {
  max-width: 300px;
}

/* címke */
.gform-theme--framework .gfield--type-post_title {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-post_title {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_title {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

/* egyetlen mező: a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

Egy adott űrlapra ugyanezt a .gform-theme--framework#gform_wrapper_112 .gfield--type-post_title választóval állíthatod be.

Bejegyzés törzse

A Bejegyzés törzse mező többsoros szövegdoboz, vagy ha be van kapcsolva, Rich Text Editor (TinyMCE). A doboz magasságát a mezőméret adja. Ha van karakterkorlát, a bevitel alatt számláló jelenik meg. Osztályai: .gfield, .gfield--type-post_content, .ginput_container_textarea.

A szövegdoboz változói:

Változó	Mit szabályoz
--gf-ctrl-textarea-height	a doboz magassága
--gf-ctrl-textarea-radius	a sarkok lekerekítése
--gf-ctrl-textarea-line-height	a sormagasság
--gf-ctrl-textarea-padding-y	a függőleges belső margó
--gf-ctrl-textarea-resize	az átméretezhetőség

A lekerekítéshez a --gf-ctrl-textarea-radius változót használd, ne az általános lekerekítési változókat. Hogy a magasság változóval is működjön, adj meg min-block-size értéket.

Ha a Rich Text Editor be van kapcsolva, a stílus a .wp-editor-container elemre vonatkozik. Maga a szerkesztő egy iframe-ben van, ezért közvetlenül nem stílusozható.

/* szövegdoboz: minden Orbital űrlap */
.gform-theme--framework .gfield--type-post_content {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-textarea-height: 150px;
  --gf-ctrl-textarea-radius: 6px;
  --gf-ctrl-font-size: 16px;
}

/* hogy a magasság felülírja a sorok számát */
.gform-theme--framework .gfield--type-post_content .ginput_container_textarea textarea {
  min-block-size: 120px;
}

Karakterszámláló

A korlát beállításakor a számláló a .charleft és a .ginput_counter osztályt kapja. Figyelmeztető állapota a .warningTextareaInfo, hibaállapota (csak TinyMCE-nél) a .ginput_counter_error.

.gform-theme--framework .gfield--type-post_content .charleft,
.gform-theme--framework .gfield--type-post_content .ginput_counter {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
  margin-top: 8px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_content .charleft {
  --gf-ctrl-desc-color: #4b5563;
  --gf-ctrl-desc-font-size: 13px;
}

Címke, leírás, példák

/* címke */
.gform-theme--framework .gfield--type-post_content {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-post_content {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_content {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-textarea-radius: 6px;
}

/* magasabb szövegdoboz hosszú tartalomhoz */
.gform-theme--framework .gfield--type-post_content {
  --gf-ctrl-textarea-height: 250px;
  --gf-ctrl-textarea-resize: vertical;
}

.gform-theme--framework .gfield--type-post_content .ginput_container_textarea textarea {
  min-block-size: 120px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
  --gf-ctrl-textarea-height: 200px;
}

Bejegyzés kivonata

A Bejegyzés kivonata mező többsoros szövegdoboz, amelynek magasságát a mezőméret adja. Osztályai: .gfield, .gfield--type-post_excerpt, .ginput_container_post_excerpt. A szövegdoboz változói és a min-block-size szabálya ugyanaz, mint a Bejegyzés törzsénél, a lekerekítéshez itt is a --gf-ctrl-textarea-radius kell.

/* szövegdoboz: minden Orbital űrlap */
.gform-theme--framework .gfield--type-post_excerpt {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-textarea-height: 150px;
  --gf-ctrl-textarea-radius: 6px;
  --gf-ctrl-font-size: 16px;
}

/* hogy a magasság felülírja a sorok számát */
.gform-theme--framework .gfield--type-post_excerpt .ginput_container_post_excerpt textarea {
  min-block-size: 120px;
}

/* címke */
.gform-theme--framework .gfield--type-post_excerpt {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-post_excerpt {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_excerpt {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-textarea-radius: 6px;
}

/* magasabb szövegdoboz */
.gform-theme--framework .gfield--type-post_excerpt {
  --gf-ctrl-textarea-height: 250px;
  --gf-ctrl-textarea-resize: vertical;
}

/* egyetlen mező: a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
  --gf-ctrl-textarea-height: 200px;
}

Bejegyzés címkéi

A Bejegyzés címkéi mezőben a felhasználó a bejegyzés címkéit adja meg. Egy szövegbevitelt (input[type="text"]) és egy tippet jelenít meg („Separate tags with commas”, vagyis a címkéket vesszővel válaszd el). Osztályai: .gfield, .gfield--type-post_tags, .ginput_container_post_tags. A tipp helye a .gfield_post_tags_hint.

/* beviteli mező */
.gform-theme--framework .gfield--type-post_tags {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-post_tags input[type="text"] {
  max-width: 100%;
}

/* a vesszős tipp */
.gform-theme--framework .gfield--type-post_tags .gfield_post_tags_hint {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 13px;
}

/* címke */
.gform-theme--framework .gfield--type-post_tags {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-post_tags {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_tags {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
  --gf-ctrl-border-color: #e2e8f0;
  padding: 16px;
}

A 112-es űrlapra szűkítve a .gform-theme--framework#gform_wrapper_112 .gfield--type-post_tags (és a tippnél a … .gfield_post_tags_hint) választót használd.

E-mail mező

Az E-mail mező egy input[type="email"] elemet jelenít meg. Alapesetben egy beviteli mező van. Ha be van kapcsolva az e-mail-megerősítés, két mező kerül egymás mellé: az e-mail-cím megadása és a megerősítése. Ilyenkor a mező fieldset burkolót kap div helyett.

Osztályai:

• .gfield és .gfield--type-email (vagy .gfield--input-type-email),
• .ginput_container_email,
• megerősítésnél a tároló .ginput_complex.ginput_container.ginput_container_email, a két mező .ginput_left és .ginput_right oszlopban, a rácsosztályokkal (gform-grid-row, gform-grid-col, gform-grid-col--size-auto).

/* tároló */
.gform-theme--framework .gfield--type-email {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
  padding: 8px 0;
}

/* beviteli mező: egyszerű és megerősítős módban is ugyanígy hat */
.gform-theme--framework .gfield--type-email {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-email input {
  max-width: 300px;
}

Megerősítés elrendezése és almezőcímkék

A két mező közti vízszintes távolságot a --gf-field-gap-x, a törés esetén a függőleges távolságot a --gf-field-gap-y szabja meg. Az almezők címkéi a .gform-field-label--type-sub osztályt kapják, és a harmadlagos címkeváltozókat használják.

.gform-theme--framework .gfield--type-email .ginput_complex.ginput_container_email {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #e5e7eb;
  --gf-field-gap-x: 24px;
  --gf-field-gap-y: 16px;
}

.gform-theme--framework .gfield--type-email .gform-field-label--type-sub {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 16px;
}

Címke, leírás, hibaüzenet

A fő címke a .gform-field-label, amelyet a --gf-ctrl-label-color-primary és a --gf-ctrl-label-font-size-primary változó állít. A leírás a form leírás-elhelyezési beállítása szerint a mező fölött vagy alatt jelenik meg (--gf-ctrl-desc-color, --gf-ctrl-desc-font-size).

A hibaüzenet akkor jelenik meg, ha érvénytelen az e-mail-cím, vagy a két cím nem egyezik. Osztályai: gfield_description, validation_message, gfield_validation_message; változói: --gf-ctrl-desc-color-error, --gf-ctrl-desc-font-size-error.

.gform-theme--framework .gfield--type-email {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

.gform-theme--framework .gfield--type-email .gfield_validation_message {
  --gf-ctrl-desc-color-error: #c02b0a;
  --gf-ctrl-desc-font-size-error: 14px;
}

Példák

/* kiemelő keret */
.gform-theme--framework .gfield--type-email {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

/* megerősítős elrendezés nagyobb réssel */
.gform-theme--framework .gfield--type-email .ginput_complex.ginput_container_email {
  --gf-field-gap-x: 32px;
}

.gform-theme--framework .gfield--type-email {
  --gf-ctrl-label-color-secondary: #374151;
  --gf-ctrl-label-font-size-secondary: 15px;
}

Weboldal mező

A Weboldal mező egyetlen input[type="url"] elemet jelenít meg. A böngésző natív ellenőrzést és URL-specifikus automatikus kitöltést adhat hozzá. A mezőméret (kicsi, közepes, nagy) a bevitel szélességét befolyásolja. Osztályai: .gfield, .gfield--type-website, .ginput_container_website.

/* tároló */
.gform-theme--framework .gfield--type-website {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
  padding: 8px 0;
}

/* beviteli mező */
.gform-theme--framework .gfield--type-website {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-website input[type="url"] {
  max-width: 400px;
}

/* címke és leírás */
.gform-theme--framework .gfield--type-website {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* hibaüzenet: hibás URL vagy hiányzó protokoll esetén */
.gform-theme--framework .gfield--type-website .gfield_validation_message {
  --gf-ctrl-desc-color-error: #c02b0a;
  --gf-ctrl-desc-font-size-error: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-website {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

Szám mező

A Szám mező egyetlen beviteli mező számértékhez. A bevitel a számformátumtól függően type="number" vagy type="text" lehet: a pénznem és a tizedesvessző formátum a kompatibilitás miatt type="text". A két típus ugyanazt a stílust kapja.

Ha van megadva legkisebb és legnagyobb érték, a bevitel alatt megjelenik a megengedett tartomány szövege (például „Please enter a number from 1 to 100.”). A számítással rendelkező Szám mező csak olvasható, és a .gform-text-input-reset osztályt kapja.

A mező osztálya .gfield--type-number, a bevitel tárolója .ginput_container_number. A változókat a .gfield--type-number elemen írd felül, onnan öröklődnek a bevitelre.

/* tároló */
.gform-theme--framework .gfield--type-number {
  --gf-ctrl-radius: 6px;
}

/* beviteli mező */
.gform-theme--framework .gfield--type-number {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
}

/* a szélességhez nincs változó */
.gform-theme--framework .gfield--type-number .ginput_container_number input {
  max-width: 200px;
}

A type="number" bevitel böngészőfüggő léptetőgombjait (spinner) a CSS csak korlátozottan alakítja.

Tartományszöveg

A tartományszöveg a .instruction osztályt kapja, ehhez nem kell .ginput_container_*.

.gform-theme--framework .gfield--type-number .instruction {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
  margin-top: 8px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-number .instruction {
  --gf-ctrl-desc-color: #4b5563;
  --gf-ctrl-desc-font-size: 13px;
}

Címke, számítás, példák

/* címke */
.gform-theme--framework .gfield--type-number {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* számítással rendelkező mező: a betűvastagsághoz nincs változó */
.gform-theme--framework .gfield--type-number input.gform-text-input-reset {
  font-weight: 600;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-number {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #eff6ff;
  --gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

A keret és a háttér a számítással rendelkező mezőn a keretrendszer alaphelyzet-visszaállítása miatt kevésbé „beviteli mező” jellegű.

HTML mező

A HTML mezővel szabad HTML-blokkot szúrsz az űrlapba. Működnek benne az összefűző címkék, a shortcode-ok és a szokásos HTML-elemek (bekezdés, lista, címsor, kép). A felületen a mező nem ír ki címkét, leírást és beviteli elemet, csak a megadott HTML-t.

Az Orbital keretrendszer a .gfield--type-html * elemeket kizárja az alaphelyzet-visszaállításból, ezért a blokkon belüli elemek (p, ul, ol, h1 és h6 között) a böngésző alapstílusát vagy a saját stílusodat kapják.

Osztályai: .gfield, .gfield--type-html, .gfield_html. Ha a Alapértelmezett margók kikapcsolása ki van kapcsolva, a .gfield_html_formatted osztály is rákerül. A mezőnek nincs leírás-eleme, ezért a --gf-ctrl-desc-* változók nem hatnak rá; használható a --gf-color-primary és a --gf-radius. A tartalom tipográfiájához nincs keretrendszer-változó, a szokásos CSS-tulajdonságokat használd.

/* a blokk távolsága */
.gform-theme--framework .gfield--type-html {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* formázott margós blokk igazítása a többi mezőhöz */
.gform-theme--framework .gfield_html_formatted {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.gform-theme--framework#gform_wrapper_112 .gfield_html_formatted {
  max-width: 100%;
}

A blokk tartalma

A tartalom körül nincs .ginput_container, ezért a mező leszármazottait célozd.

/* hivatkozások */
.gform-theme--framework .gfield--type-html a {
  color: #f09;
  text-decoration: underline;
}

.gform-theme--framework .gfield--type-html a:hover {
  color: #c00;
}

/* szöveg */
.gform-theme--framework .gfield--type-html {
  font-size: 16px;
  color: #112337;
  line-height: 1.6;
}

/* címsorok */
.gform-theme--framework .gfield--type-html h2,
.gform-theme--framework .gfield--type-html h3 {
  color: #112337;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 12px;
}

/* listák */
.gform-theme--framework#gform_wrapper_112 .gfield--type-html ul,
.gform-theme--framework#gform_wrapper_112 .gfield--type-html ol {
  padding-inline-start: 24px;
  margin-bottom: 16px;
}

A hivatkozások színét a mező hatókörében a --gf-color-primary és a --gf-color-primary-darker változóval is módosíthatod.

Egy adott HTML-mező és kiemelt blokk

/* a 112-es űrlap 3-as mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_3 {
  --gf-radius: 8px;
  --gf-color-primary: #1d4ed8;
  background-color: #f8fafc;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

/* kiemelő doboz */
.gform-theme--framework .gfield--type-html.gfield_html_formatted {
  --gf-color-primary: #204ce5;
  background-color: #eff6ff;
  border-inline-start: 4px solid #654887;
  padding: 16px 20px;
  border-radius: 6px;
}