<solved>Help positioning Captcha in Formbuilder Form

[RyanC]

Hi, I'm using the "Titles on Left" template for Formbuilder, and am trying to adjust the style sheets. I've installed the captcha, but I can't seem to make it move on the page. Every place I've seen "captcha" in the styles I've added a left margin but it doesn't move. Any help would be great.

Style Sheets:

Code: Select all

/* Sample FormBuilder CSS base */

#formWrapper li{
	 margin-left: 150px;
	 width:400px;
	 height: 900px;
	 
}


form {
	margin: 0 auto;
	font-size: 12px;
	line-height: 17px;
}

 

 
form div {margin-bottom:0}
fieldset div {
	margin-bottom:0.5em;

	
	 
}
fieldset div div {
	margin-top:0.5em;
	margin-left:1em;
	 
}
fieldset {
	margin-bottom:1em;
	border:1px solid #F60;
	padding:0.5em;
	
}
fieldset label {
	width:auto;
}
legend {
	color:#FFF;
	background:#F60;
	font-style:italic;
	font-size:1.2em;
	margin-bottom:0.5em;
	padding:0.2em;
	width:auto;
	border:1px solid #CCC
}
textarea {
	margin: 0.5em 0;
	width:98%;
	height: 6em;
	
}

/* Apply this class to text/select input fields with shorter labels
	to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
	 
	margin:0.5em 0;
	width:200px;
	text-align:center;
	 margin-left: 150px;
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em; float: right;
margin-left: 50px;}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:10px;}

/* Apply this class to text/select input fields with shorter labels
	to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
	margin:0.5em 0;
	width:200px;
	text-align:center;
	margin-left: 50px;
	 
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em;
margin-left: 250px;
 }
.captcha input {width:196px; margin-top:0.5em; margin-left:150px;}

/* Just a bit more room for the Submit button */
.submit {margin-top:10px;}

.contactform input {border: 1px solid #f60;}
.contactform input.checkbox {border: none;}
.contactform label {
	display: block;
	float: left;
	width: 150px;
	 
}
.contactform label.label {
	display: inline;
	float: none;
	width: 50px;
	font-size: 10px;
}
.contactform textarea {
	background-color: #ffc;
	border: 1px solid #f60;
}
.formbuilderform .message {
	line-height: 16px;
	padding: 0 0 8px 0;
}
 

Template:

Code: Select all

{* TABLE FORM LAYOUT / Field titles on Left *}
{* next line sets number of columns for things like checkbox groups *}
{assign var="cols" value="3"}
{literal}
<__script__ type="text/javascript">
function fbht(htid)
	{
		var fbhtc=document.getElementById(htid);
		if (fbhtc)
			{
			if (fbhtc.style.display == 'none')
				{
				fbhtc.style.display = 'inline';
				}
			else
				{
				fbhtc.style.display = 'none';
				}
			}
}
</__script>
{/literal}
{$fb_form_header}
{if $fb_form_done == 1}
	{* This first section is for displaying submission errors *}
	{if $fb_submission_error}
		<div class="error_message">{$fb_submission_error}</div>
		{if $fb_show_submission_errors}
			<table class="error">
			{foreach from=$fb_submission_error_list item=thisErr}
				<tr><td>{$thisErr}</td></tr>
			{/foreach}
			</table>
		{/if}
	{/if}
{else}
	{* this section is for displaying the form *}
	{* we start with validation errors *}
	{if $fb_form_has_validation_errors}
		<div class="error_message">
		<ul>
		{foreach from=$fb_form_validation_errors item=thisErr}
			<li>{$thisErr}</li>
		{/foreach}
		</ul>
		</div>
	{/if}
	{if $captcha_error}
		<div class="error_message">{$captcha_error}</div>
	{/if}

	{* and now the form itself *}
	{$fb_form_start}
	<div>{$fb_hidden}</div>

	<table{if $css_class != ''} class="{$css_class}"{/if}>
	{if $total_pages gt 1}<tr><td colspan="2">{$title_page_x_of_y}</td></tr>{/if}
	{foreach from=$fields item=entry}
		{if $entry->display == 1 &&
			$entry->type != '-Fieldset Start' &&
			$entry->type != '-Fieldset End' }
		<tr>
			{strip}
			<td align="right" valign="top"
			{if $entry->required == 1 || $entry->css_class != ''} class=" 
				{if $entry->required == 1}
					required
				{/if}
				{if $entry->required == 1 && $entry->css_class != ''} {/if}
				{if $entry->css_class != ''}
					{$entry->css_class}
				{/if}
				"
			{/if}
			>
			{if $entry->hide_name == 0}
				{$entry->name}
				{if $entry->required_symbol != ''}
					{$entry->required_symbol}
				{/if}
			{/if}
			</td><td align="left" valign="top"{if $entry->css_class != ''} class="{$entry->css_class}"{/if}>
			{if $entry->multiple_parts == 1}
			<table>
				<tr>
				{section name=numloop loop=$entry->input}
					<td>{$entry->input[numloop]->input}&nbsp;{$entry->input[numloop]->name}{if $entry->input[numloop]->op}&nbsp;{$entry->input[numloop]->op}{/if}</td>
					{if not ($smarty.section.numloop.rownum mod $cols)}
						{if not $smarty.section.numloop.last}
				</tr><tr>
						{/if}
					{/if}
					{if $smarty.section.numloop.last}
						{math equation = "n - a % n" n=$cols a=$entry->input|@count assign="cells"}
						{if $cells ne $cols}
							{section name=pad loop=$cells}
					<td>&nbsp;</td>
							{/section}
						{/if}
				</tr>
					{/if}
				{/section}
				</table>
			{else}
				{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
			{/if}
			{if $entry->valid == 0} <--- {$entry->error}{/if}
			{if $entry->helptext != ''}&nbsp;<a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a>
					<span id="{$entry->field_helptext_id}" style="display:none" class="fbr_helptext">{$entry->helptext}</span>{/if}
			
			
			</td></tr>
			{/strip}
		{/if}
	{/foreach}
	{if $has_captcha == 1}
		<tr><td>{$graphic_captcha}</td><td>{$input_captcha}<br />{$title_captcha}</td></tr>
	{/if}
		<tr><td>{$prev}</td><td>{$submit}</td></tr>
	</table>
	{$fb_form_end}
{/if}
{$fb_form_footer}

[paulbaker]

In your HTML your captcha image has:

class="captchapict"

And in your CSS there is no mention of this class, only captcha.

[RyanC]

Thanks Paul,

I'm not seeing this. I did a search on the template and I don't see anything that says captchapict. Do you see it in the code I posted above? It's the default template from the Formbuilder, I haven't touched anything. I thought it was tied directly to the default style sheets.

[RyanC]

wait--I see it in the source. Where did that come from? How do I get access to that line of code?

[Dr.CSS]

Because you are using a table based layout it isn't so easy to use CSS on this part, you could add an empty cell on the left of it...

{if $has_captcha == 1}
<tr><td>{$graphic_captcha}</td><td>{$input_captcha}<br />{$title_captcha}</td></tr>
{/if}

The style sheet does have a call in it for .captcha, 2 actually...

/* Pretty up your Captcha image output */
.captcha {

margin:0.5em 0;
width:200px;
text-align:center;
margin-left: 150px;
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em; float: right;
margin-left: 50px;}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:10px;}

/* Apply this class to text/select input fields with shorter labels
to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
margin:0.5em 0;
width:200px;
text-align:center;
margin-left: 50px;

}
.captcha img {border:1px solid #F60; margin-bottom:0.5em;
margin-left: 250px;
}
.captcha input {width:196px; margin-top:0.5em; margin-left:150px;}


I've told the developer about many times, even sent them a nice cleaned up version of it with out duplicates, but...

[RyanC]

Thanks for the help, I added an extra cell where you said and it dropped it down--is there a way I can now get the "please confirm" box to wrap underneath it, and not to the right of it?

As far as the CSS, I see all the calls for .captcha, but apparently my file is pulling from another html file altogether that has a class called "captchapict".

I don't know where it's pulling that from, how to access it, how to change it. All I know about right now is the default template in the actual module interface itself.

[Dr.CSS]

Look at the bottom of your template to see how the button etc. are all in there own cell, you can try to combine some of these, the img.capthapict comes from the PHP/files used to create captcha, don't bother trying to change it...

[RyanC]

Ok that worked, thanks. I'm used to looking at hml files but all these php tags mixed in with the regular html makes it kind of hard to tell what I'm doing.

[Dr.CSS]

Want to have fun with PHP and HTML mixed in template try making changes in a WP template ...