<solved>Help positioning Captcha in Formbuilder Form
Posted: Mon Feb 06, 2012 4:18 pm
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:
Template:
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;
}
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} {$entry->input[numloop]->name}{if $entry->input[numloop]->op} {$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> </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 != ''} <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}
...