Jak upravit kontaktní formulář CSS 7

Obsah

Pokyny
Jak
Oznámení
Co potřebujete

Kontaktní formulář 7 je plugin pro publikování platformy WordPress, který umožňuje uživatelům rychle vytvářet vlastní kontaktní formuláře. Ačkoli formuláře lze snadno vytvořit a nasadit, jejich pole jsou minimálně přizpůsobena, což umožňuje integraci s libovolným webem. Vytvořte si vlastní styly a implementujte je do polí formuláře generovaných tímto pluginem.

Pokyny

Upravte styl polí Kontaktního formuláře 7 pomocí CSS (Comstock / Comstock / Getty Images)

Otevřete téma stylesheet WordPress a přejděte na konec. Vytvořte anotovanou oblast, abyste mohli snadno najít kód. Příklad:

/ Zde se spustí můj vlastní kód CF7 /
Přizpůsobte styly polí a textových oblastí. Chcete-li to provést, vytvořte položku v šabloně stylů. Příklad:

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

Přidejte okraje, pozadí, výplň a velikosti prvků textu. Příklady:

.wpcf7 input [type = "text"] {background: none opakování rolování 0 0 # F9F9F9; ohraničení: 1px pevná # 8E9BA9; polstrování: 5px; šířka: 200px; }
Přizpůsobte styly rozevírací nabídky a nabídky pro výběr.Chcete-li to provést, vytvořte položku v šabloně stylů. Příklad:

.wpcf7 input [type = "select"] {

}

Upravte pole výběru podobná textovým polím. Pole výběru nejsou tak široká jako textová pole, takže k vaší šířce přidejte několik dalších pixelů. Příklad:

.wpcf7 input [type = "selected"] {background: none opakování rolování 0 0 # F9F9F9; ohraničení: 1px pevná # 8E9BA9; polstrování: 5px; šířka: 210px; }
Přizpůsobte styl odesílacího tlačítka. Chcete-li to provést, vytvořte položku v šabloně stylů. Příklad:

.wpcf7 input [type = "submit"] {

}

Přizpůsobte tlačítko odeslání, které doplní vzhled a dojem z vašich stránek (mělo by i nadále vystupovat z pozadí). Příklad červeného tlačítka pro odeslání:

.wpcf7 input [type = "submission"] {barva pozadí: # 990000; ohraničení: 4px pevné # B34040; barva: #FFFFFF; }
Uložte změny do šablony stylů a předejte data do složky motivu.

Jak

Vyzkoušejte různé styly a různé barvy hranic.
Proveďte novou kontrolu formulářů ve Firefoxu, Safari a Internet Exploreru, protože každý prohlížeč poskytuje mírně odlišné vstupní pole.

Oznámení

Přidejte vlastní CSS do šablony stylů motivu a ne do šablony stylů pluginů. Pokud tak učiníte, když je plugin aktualizován, může dojít ke ztrátě přizpůsobení souborů ve složce.