Contact formban választó gombok egymás alá rendezése

Sziasztok!











Vesper 1.0.6 sablonban dolgozom.





Szeretnék egy contact formot beilleszteni egyik oldalamra, amely tartalmaz választógombokat. Alapbeállításban nekem ezek a gombok egymás után, szövegszerűen egy vonalban jelennek meg. Hogyan lehetne elérni azt, hogy egymás alá kerüljenek? Külföldi oldalon találtam rá utalást (ezt írták: To render checkboxes as block boxes, add a line to the CSS stylesheet in your theme like below: span.wpcf7-list-item { display: block; }), de nekem ez nem igazán volt segítség. Nem tudom pontosan hova kell beillesztenem?





Valamint meg lehet e bütykölni a formot úgy, hogy a Submit gomb helyett egy általam választott kép legyen?





Köszönöm előre is a segítséget!

A “span.wpcf7-list-item” amit keresel, az a plugin mappájában van, a style.css fájlban. Az eredeti érték









Code:

span.wpcf7-list-item {

margin-left: 0.5em;

}





gondolom ezt kell akkor átírni úgy, hogy





Code:

span.wpcf7-list-item {

margin-left: 0.5em;

display: block;

}








Vagy, ahogy az általad is idézett forrás mondja, a sablonod (a Vesper) style.css-ének a legvégére beszúrod, hogy





Code:

span.wpcf7-list-item {

display: block;

}








A másik kérdésre (mivel nem használom a plugint) csak tippem van.





a wpcf7-submit classt kell formázni, pl.





Code:

.wpcf7-submit {

text-indent: -10000px;

background: transparent url('ide-a-kép-elérési-útja') no-repeat top left;

display: block;

width: [ideaképszélessége]px;

height: [ideaképmagassága]px;

}





Ezt megpróbálhatod beilleszteni (természeresen a megfelelően kiegészítve a valós képútvonallal, szélesség és magasság értékekkel) szintén a sablonod style.css-ének legvégére, hátha felülírja/kiegészíti a plugin css-ét.

http://contactform7.com/2009/11/21/custom-layout-for-checkboxes-and-radio-buttons/











kizárt, hogy ne működjön.

Nagyon köszönöm! Már meg is van! Mindkét dolog működik!:)))Mindig nagyon super és gyors segítséget kapok tőled! :slight_smile:









'psztrnk' wrote on '2010-10-14:




A "span.wpcf7-list-item" amit keresel, az a plugin mappájában van, a style.css fájlban. Az eredeti érték





Code:

span.wpcf7-list-item {

margin-left: 0.5em;

}





gondolom ezt kell akkor átírni úgy, hogy





Code:

span.wpcf7-list-item {

margin-left: 0.5em;

display: block;

}








Vagy, ahogy az általad is idézett forrás mondja, a sablonod (a Vesper) style.css-ének a legvégére beszúrod, hogy





Code:

span.wpcf7-list-item {

display: block;

}








A másik kérdésre (mivel nem használom a plugint) csak tippem van.





a wpcf7-submit classt kell formázni, pl.





Code:

.wpcf7-submit {

text-indent: -10000px;

background: transparent url('ide-a-kép-elérési-útja') no-repeat top left;

display: block;

width: [ideaképszélessége]px;

height: [ideaképmagassága]px;

}





Ezt megpróbálhatod beilleszteni (természeresen a megfelelően kiegészítve a valós képútvonallal, szélesség és magasság értékekkel) szintén a sablonod style.css-ének legvégére, hátha felülírja/kiegészíti a plugin css-ét.

Örülök, hogy műxik. :slight_smile: