Egyedi CSS használata

Az űrlapokat a legkönnyebben a Layout & Styles bővítménnyel stílusozhatod, és ha ismered a CSS-t, a Haladó CSS lehetőség is segít (lásd: Stílusbeállítások). Ha viszont pszeudoosztályokra (például :hover, :focus) van szükséged, vagy egyszerűen magad szeretnél CSS-t írni a témádba, ez a fejezet megmutatja, milyen osztály- és azonosítónevek vannak az űrlapelemeken.

Egy mező HTML-szerkezete

Minden mezőt egy tároló vesz körül. A szerkezet egy egysoros szövegmezőnél így néz ki (a {mezőtípus-név} a mező típusától, a {mező_id} a mező azonosítójától függ):

<div class="nf-field-container {mezotipus-nev}-container  label-above">
  <div class="nf-before-field">
    <nf-section></nf-section>
  </div>
  <div class="nf-field">
    <div id="nf-field-{mezo_id}-wrap" class="field-wrap {mezotipus-nev}-wrap" data-field-id="{mezo_id}">
      <div class="nf-field-label">
        <label for="nf-field-{mezo_id}" class="">Egysoros szöveg</label>
      </div>
      <div class="nf-field-element">
        <input id="nf-field-{mezo_id}" name="nf-field-{mezo_id}" class="ninja-forms-field nf-element" type="text" value="">
      </div>
    </div>
  </div>
  <div class="nf-after-field">
    <nf-section>
      <div class="nf-error-wrap nf-error"></div>
    </nf-section>
  </div>
</div>

A szerkezet részei:

Elem	Szerepe
nf-field-container	A fő doboz, ami a mező minden kimenetét körülveszi.
nf-before-field	A mező előtti tartalom helye.
nf-field	Maga a mező.
nf-after-field	A mező utáni tartalom helye, például a hibaüzenetek.
field-wrap	A címkét és a beviteli elemet körülvevő doboz.
nf-field-label	A címke.
nf-field-element	A beviteli elem tárolója.

Az nf-section HTML-címke a működés belső eleme, ezzel nem kell foglalkoznod.

Szelektorok az általánostól a legpontosabbig

Négy elemet stílusozhatsz, és mindegyiket háromféle pontossággal: minden mezőre, egy mezőtípusra vagy egyetlen mezőre. A mezőtípus nevét az osztálynévben a típus neve adja (például szövegmezőnél textbox), az egyedi mezőt a mező azonosítója (például 12).

Mezőtároló

/* Minden mező tárolója */
.nf-field-container {
  /* saját stílusok */
}

/* Egy mezőtípus tárolója, például: .textbox-container {} */
.mezotipus-nev-container {
  /* saját stílusok */
}

Mező körüli doboz

/* Minden mező doboza */
.field-wrap {
  /* saját stílusok */
}

/* Egy mezőtípus doboza, például: .textbox-wrap {} */
.mezotipus-nev-wrap {
  /* saját stílusok */
}

/* Egy konkrét mező doboza, például: #nf-field-12-wrap {} */
#nf-field-MEZO_ID-wrap {
  /* saját stílusok */
}

Címkék

/* Minden címke */
.field-wrap label {
  /* saját stílusok */
}

/* Egy mezőtípus címkéje, például: .textbox-wrap label {} */
.mezotipus-nev-wrap label {
  /* saját stílusok */
}

/* Egy konkrét mező címkéje, például: #nf-field-12-wrap label {} */
#nf-field-MEZO_ID-wrap label {
  /* saját stílusok */
}

Beviteli elemek

/* Minden beviteli elem */
.ninja-forms-field {
  /* saját stílusok */
}

/* Egy mezőtípus beviteli eleme, például: .textbox-wrap .ninja-forms-field {} */
.mezotipus-nev-wrap .ninja-forms-field {
  /* saját stílusok */
}

/* Egy konkrét mező beviteli eleme, például: #nf-field-12-wrap .ninja-forms-field {} */
#nf-field-MEZO_ID-wrap .ninja-forms-field {
  /* saját stílusok */
}

Amire figyelj

• Az általános szelektorok a Ninja Forms minden kimenetére érvényesek, a HTML-mezőkre és a vízszintes vonalakra is. Nem biztos, hogy egy jelölőnégyzetnek 100% szélességet, vagy egy vízszintes vonalnak 100 képpont magasságot szeretnél adni. Az általános szelektorba csak olyan szabályt tegyél, amit tényleg mindenre rá akarsz tenni.
• A Markáns stílusokat is felülírhatod így, de a legördülő menük, a rádiógombok és a jelölőnégyzetek külön szabályokat használnak, ezért ezek stílusozásához más szelektor kellhet.

Kódrészletek

A „Minden, csillaggal jelölt mező kötelező” üzenet elrejtése:

.nf-form-fields-required {
  display: none;
}

A kötelező mezők csillagának elrejtése:

.ninja-forms-req-symbol {
  display: none;
}