Cum pot suprascrie în siguranță stilurile Contact Form 7?

Iată câteva modalități de a realiza acest lucru.

Dacă folosești o temă personalizată, poți edita fișierul style.css și să faci acolo modificările de stil pe care le dorești.

Dacă folosești o temă standard pe care o actualizezi, poți crea o temă copil și astfel fișierul tău de stiluri nu va fi suprascris.

Poți crea propriul fișier de stiluri și pur și simplu să-l legați în header.php din tema pe care o folosești.

Site-ul meu utilizează și Contact Form 7 cu stiluri personalizate și Bootstrap: http://splash.inting.org/wp/

Iată opțiunile tale:

1) Când construiești formularul, încadrează câmpurile în alte elemente HTML (cu clase relevante), ca mai jos:

<div class="control-group">
    <label class="control-label" for="input01">Prenume*</label>
    <div class="controls">
        [text* FirstName id:FirstName class:input-xlarge]
    </div>
</div>

De asemenea, poți defini ID-uri și Clase pentru elementele din Contact Form 7, ca în exemplul de mai sus.

2) Creează un fișier custom.css și actualizează header.php din tema curentă, asigurându-te că fișierul de stiluri este adăugat ultimul (chiar înainte de închiderea header-ului). Dacă este adăugat ultimul, este mai puțin probabil să fie suprascris de stilurile temei sau ale plugin-urilor.

3) Folosește !important la definirea claselor și ID-urilor CSS, astfel încât acestea să nu fie suprascrise de alte stiluri

Ceea ce am făcut este să împiedic încărcarea fișierului de stiluri inclus în plugin. Acest lucru este documentat pe http://contactform7.com/controlling-behavior-by-setting-constants/ și arată astfel:

/* Setări pentru Contact Form 7 */
define('WPCF7_LOAD_CSS', false);

Acest fragment de cod se adaugă în fișierul wp.config.

Realizând acest lucru, rezultă un formular fără nicio stilizare specială. Acest lucru poate părea un efort suplimentar, dar de fapt se potrivește mai bine pentru integrarea într-o temă existentă, deoarece aspectul și înfățișarea formularului pot fi controlate în totalitate.

Ca exemplu, stilurile mele pentru formularul de contact arată astfel:

.wpcf7-form { margin-top: 1em; }
.wpcf7-form fieldset p { margin: 0; }
.wpcf7-form label { display: block; float: left; clear: left; width: 150px; text-align: right; margin-right: 5px; margin-bottom: 1.5em; }
.wpcf7-form input[type="text"], .wpcf7-form textarea { display: block; float: left; width: 250px; margin-top: 0; }
.wpcf7-form textarea { width: 450px; }
.wpcf7-form fieldset.submit { margin-top: 1em; position: relative; }
.wpcf7-form input[type="submit"] { display: block; margin-left: 154px; width: 150px; }

.wpcf7-display-none { display: none; }
.wpcf7-response-output { margin: 0 155px; border: 1px solid #000; padding: 0.5em; top: -1em; position: relative; }
.wpcf7-mail-sent-ok { border-color: #398f14; }
.wpcf7-mail-sent-ng { border-color: #ff0000; }
.wpcf7-spam-blocked { border-color: #ffa500; }
.wpcf7-validation-errors { border-color: #f7e700; }
.wpcf7 img.ajax-loader { margin: 1em 0 0 155px; }

span.wpcf7-form-control-wrap { position: relative; float: left; }
span.wpcf7-not-valid-tip { position: absolute; top: 20%; left: 20%; z-index: 100; background: #fff; border: 1px solid #ff0000; font-size: 0.9em; padding: 0.2em; }
span.wpcf7-not-valid-tip-no-ajax { color: #f00; font-size: 10pt; display: block; }

Partea .wpcf7- este cea importantă, deoarece stilurile pot fi limitate doar la formularele generate de acest plugin.

Există o concepție greșită comună că plugin-ul Contact Form 7 (CF7) controlează aspectul formularelor CF7 prin fișierele de stil CSS ale plugin-ului. În realitate, plugin-ul Contact Form 7 folosește doar stilizări CSS minime pentru a permite integrarea formularelor CF7 în majoritatea site-urilor web.

În mod real, aspectul formularelor CF7 pe site-ul tău va depinde în mare măsură de tema WordPress curentă utilizată și de stilizările CSS pe care aceasta le aplică elementelor standard de formular HTML. Pentru a modifica aspectul formularelor CF7 în conformitate cu cerințele tale, va trebui să ajustezi CSS-ul folosit de tema curentă pentru aceste elemente de formular HTML.

Folosește o Temă Copil pentru a face modificări la CSS-ul formularelor CF7

Cea mai comună și preferată metodă pentru a face modificări la stilizarea formularelor CF7 este crearea unei Teme Copil. Adaugă orice modificări necesare în fișierul style.css al temei copil, și nu direct în style.css al temei principale. În acest fel, nu vei pierde modificările atunci când actualizezi tema.

Fișierul style.css al temei copil importă de obicei toate stilizările din tema părinte prin includerea următorului cod CSS în partea de sus a fișierului style.css al temei copil.

/* Importă Tema Părinte */
@import url('../parent-theme/style.css');

Orice modificări CSS necesare pentru a schimba aspectul formularelor noastre CF7 sunt adăugate sub aceasta. Datorită ierarhiei de încărcare CSS, orice modificări CSS făcute aici vor suprascrie în general stilurile setate anterior în tema părinte.