|
Paul Muszanskyj
|
May 1, 2013 at 4:18 am
Hi, I need to add a question with a check box, and it needs to be a different length to the standard questions on the layout, as follows:
“Tick the box to confirm that you have read and accept our Terms & Conditions”
The text is constrained to the narrow width of the other questions, so runs down the page by about 4 lines, which looks awful. It needs to run right across the form, and then show the check box.
I also need a line of text underneath it with a link to the Terms & Conditions page.
Can you help?
Thanks
|
|
Dean
|
May 1, 2013 at 8:08 am
Hi Paul,
The questions all share the same css structure normally provided by the theme, so you would need to modify the css. This would depend on the themes css, so if you can link an example page I can have a look for you.
Adding text underneath isnt something I have seen done, however you can add HTML into the question title to make that the link itself (the question value does not accept HTML).
|
|
Paul Muszanskyj
|
May 1, 2013 at 11:27 am
Thanks Dean – here’s the link to the page: http://www.empathydesign.co.uk/development/event-registration/?ee=8
usr:paul, pw:
800×600
Normal
0
false
false
false
EN-GB
X-NONE
X-NONE
MicrosoftInternetExplorer4
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”,”serif”;}
pawlemp58&
As you can see, the “Please confirm that you have read our Terms & Conditions” text needs to be all on one line, with the check box next to it, rather than underneath.
Is there any way I can access the actual code for the form? I’m familiar with building forms with html, and would like to make quite a few amendments, including removing some of the large gaps.
Thanks
|
|
Paul Muszanskyj
|
May 1, 2013 at 11:32 am
I have no idea by the way where the text in between “pw” and the password itself has come from in my response to your answer. Not put there by me, and sorry that my response looks such a mess.
|
|
Dean
|
May 2, 2013 at 5:39 am
Hiya,
After a quick look, the best I could come up with is the following. Bear in mind, that I only had a quick look, if you need something more, I would contact a web developer to look into it.
We have a list here – https://eventespresso.com/developers/event-espresso-pros/
.event_espresso_form_wrapper label, .event_espresso_form_wrapper span.label {
width: 100%;
}
.options-list-check.event_form_field {
padding: 0;
margin: 0;
margin-top: -35px;
margin-left: 409px;
}
.options-list-check.event_form_field li {
padding: 0;
margin: 0;
}
The css can be added to the themes style.css file or via a plugin like My Custom CSS.
Your theme seems to be adding paragraph tags to the hidden inputs, thus adding a lot of whitespace. It is probably caused by the them adding something similar to this http://wordpress.stackexchange.com/questions/55782/remove-wpautop-from-shortcode-content-remove-whitespace-in-buffering (see the answer) which messes up the formatting.
There is no direct access to the forms as such as they are dynamically generated. If you swap themes temporarily to the default TwentyTwelve theme and have a look at the form you will see it looks a lot different.
I hope this helps, it is at least a starter for you.
|
|
Paul Muszanskyj
|
May 2, 2013 at 7:01 am
Thanks Dean
I’ve no problem writing the code – what I wasn’t sure about was how to identify the field in the first place. So presumably all questions with check boxes have the class “options-list-check.event_form_field”? If that’s so, I should be fine.
Nuisance about the <p> tags – I might get in touch with them about it.
|
|
Josh
|
May 2, 2013 at 11:04 am
Hi Paul,
You can use a tool like Firebug to identify the fields. Here’s a good introductory video:
http://css-tricks.com/video-screencasts/15-introduction-to-firebug/
|
