Sådan justeres CSS Kontaktformular 7

Indhold

• retninger
• tips
• advarsel
• Hvad du har brug for

Kontaktformular 7 er et WordPress publishing platform plugin, der giver brugerne mulighed for hurtigt at oprette brugerdefinerede kontaktformularer. Selvom formularer er nemme at oprette og implementere, er deres felter minimalt tilpasset, hvilket muliggør integration med ethvert websted. Opret dine brugerdefinerede styles og implementer dem i de formularfelter, der genereres af dette plugin.

retninger

Tilpas stilen af ​​kontaktformular 7-felterne ved hjælp af CSS (Comstock / Comstock / Getty Images)

1. Åbn tema stilarket på din WordPress og rul til slutningen. Opret et annoteret område, så du nemt kan finde din kode. eksempel:

   / Det er her, hvor min brugerdefinerede CF7-kode starter /

2. Tilpas stilen af ​​dine felter og tekstområder. For at gøre dette skal du oprette en post i dit stylesheet. eksempel:

   .wpcf7 input [type = "text"], .wpcf7 areadotexto {}

   Tilføj grænser, baggrunde, polstring og størrelser af tekstelementer. Eksempler:

   .wpcf7 input [type = "text"] {baggrund: ingen gentag rulle 0 0 # F9F9F9; grænse: 1px fast # 8E9BA9; polstring: 5px; bredde: 200px; }

3. Tilpas stilarterne i rullemenuer og valgmenuer.For at gøre dette skal du oprette en post i dit stylesheet. eksempel:

   
   

   .wpcf7 input [type = "select"] {

   }

   Tilpas markeringsfelene svarende til tekstfelterne. Markeringsfelterne er ikke så brede som tekstfelterne, så tilføj et par ekstra pixels til din bredde. eksempel:

   .wpcf7 input [type = "selected"] {baggrund: ingen gentag rulle 0 0 # F9F9F9; grænse: 1px fast # 8E9BA9; polstring: 5px; bredde: 210px; }

4. Tilpas stilen på din indsende knap. For at gøre dette skal du oprette en post i dit stylesheet. eksempel:

   .wpcf7 input [type = "submission"] {

   }

   Tilpas indsenderknappen for at supplere udseendet på dit websted (det skal fortsætte med at skille sig ud fra baggrunden). Eksempel på en rød send-knap:

   .wpcf7 input [type = "submission"] {baggrundsfarve: # 990000; grænse: 4px fast # B34040; farve: #FFFFFF; }

5. Gem ændringerne i dit stylesheet og overfør dataene til temamappen.

   
   

tips

• Prøv forskellige stilarter og forskellige randfarver.
• Gør en ny kontrol af formularerne i Firefox, Safari og Internet Explorer, fordi hver browser indeholder lidt forskellige inputfelter.

advarsel

• Tilføj tilpasset CSS til dit tema stilark og ikke plugin stylesheet. Hvis du gør det, vil tilpasningen af ​​filerne i din mappe blive tabt, når plugin er opdateret.

Hvad du har brug for

• Adgang til WordPress stylesheet