Page 1 of 1
[Fixed] Using CSS Class in FormBuilder
Posted: Thu Dec 14, 2006 12:22 pm
by jongrant
Hi,
Im wanting to use CSS to restrict the size of my fields in my form. I am using the latest release of FormBuilder. In the module, it says under the main section of the form; "CSS Class for this form". And within each field that I have created it has an additional part with "CSS Class for this field".
My question is, how do I use these? Ive read up about it in the forum and many people have said to use DIV tags as per what the source outputs in the web browser, but Im still confused... I have the following fields:
full_name (text input)
email_address (text input)
contact_phone (text input)
message (text area)
I want to restrict the length of the text inputs to 200px in width and also add a font and colour to it. Im also trying to make the text area be only 200px wide also, but around 50px deep.
Does anyone know of how to do this, or a tutorial of some sort online that can explain to me how and why I need to do what I need to do?
Thanks heaps, this board has already helped me alot with CMSMS so look forward to hearing your comments
Jon
Re: Using CSS Class in FormBuilder
Posted: Mon Dec 18, 2006 4:06 am
by jongrant
anyone?
Re: Using CSS Class in FormBuilder
Posted: Mon Dec 18, 2006 9:11 am
by rtkd
hi,
i'm having the same problem (6 posts down). pls use search next time to spare some doubble posts
http://forum.cmsmadesimple.org/index.ph ... 834.0.html
Re: Using CSS Class in FormBuilder
Posted: Mon Dec 18, 2006 11:05 am
by amygdela
.yourclass input {
width: yourwidth;
}
Re: Using CSS Class in FormBuilder
Posted: Mon Dec 18, 2006 12:19 pm
by jongrant
Thanks Amy for posting. Should this go in the class input for field? How should I call it then in the template. Should I use a div tag or a span class or something? The text field is getting called with the code {myfield->input}.
Hope this helps
Re: Using CSS Class in FormBuilder
Posted: Mon Dec 18, 2006 1:27 pm
by Dr.CSS
If you render the page, look at it in a browser, right click and view source, you should be able to see id="something" or class="something" with those you can call them out in your CSS, for id it's #something {your styling} for class it's .something {your styling}
Re: Using CSS Class in FormBuilder
Posted: Tue Dec 19, 2006 3:06 am
by jongrant
Mark your a genius! Worked a treat. There was one problem though, is there any special or additional code for the textarea? The id for this is id="m2_4" and I have in my stylesheet #m2_4 { font-family: Tahoma; font-size: 11px; color: 49494B; width: 200px; height: 100px} but it doesnt change to this kind of style in the browser. Is there something extra I have to put in that applies to textareas?
Thanks
Re: Using CSS Class in FormBuilder
Posted: Tue Dec 19, 2006 3:24 am
by Dr.CSS
You may have to call the div it is in... #main textarea #ms_4 {your style}
Can you paste the source code or a link to page?...
Re: Using CSS Class in FormBuilder
Posted: Tue Dec 19, 2006 7:17 am
by jongrant
When looking at the source, it doesnt show a tag at all...
The code for the form itself (after copied from the source in IE7) is:
Code: Select all
<!-- Start FormBuilder Module (0.2) -->
<form id="m2moduleform-1" name="m2moduleform-1" method="post" action="index.php" enctype="multipart/form-data"><div class="hidden"><input type="hidden" name="mact" value="FormBuilder,m2,default,0" /><input type="hidden" name="m2returnid" value="59" /></div>
<input type="hidden" name="m2form_id" value="1" />
<input type="hidden" name="m2continue" value="2" />
<input type="hidden" name="m2done" value="1" />
<table width="385" border="0" cellspacing="0" cellpadding="0" height="152" class="bodytext">
<tr>
<td width="107" height="15">Full Name:</td>
<td height="15" class="bodytext" width="277"><input type="text" name="m2_7" id="m2_7" value="" size="" maxlength="" />
</td>
</tr>
<tr>
<td width="107" height="15">Email Address:</td>
<td height="15" class="bodytext" width="277"> <input type="text" name="m2_8" id="m2_8" value="" size="25" maxlength="128" />
</td>
</tr>
<tr>
<td width="107" height="15">Contact Phone:</td>
<td height="15" class="bodytext" width="277"><input type="text" name="m2_9" id="m2_9" value="" size="" maxlength="" />
</td>
</tr>
<tr>
<td width="107" height="15">Message:</td>
<td height="15" class="bodytext" width="277"> <textarea name="m2_4" cols="80" rows="15"></textarea> </td>
</tr>
<tr>
<td width="107" height="29"></td>
<td height="29" class="bodytext" width="277"> <input name="m2submit" value="Submit" type="submit" class="fbsubmit" />
</td>
</tr>
</table></form>
<!-- End FormBuilder Module -->
If you want to see it live, its at
http://www.standfasttkd.com/cms/index.php?page=test
Thanks
Re: Using CSS Class in FormBuilder
Posted: Tue Dec 19, 2006 11:30 am
by Dr.CSS
Try this...
#m2moduleform-1 textarea{width:50px} 50 is what ever size you need, it can be % also...
Re: Using CSS Class in FormBuilder
Posted: Tue Dec 19, 2006 12:50 pm
by jongrant
Worked a treat Mark. Did exactly what I needed. Another [Fixed] tag thanks to Mark
Thanks again