Page 1 of 1

[SOLVED] Understanding the standard CSS template for FormBuilder forms

Posted: Thu Jan 17, 2008 2:34 pm
by dtism
Can anyone help a dunce (yes, me) understand how I can manipulate the standard CSS template in FormBuilder?

I basically want to force the Field labels to be above the input areas so that things line up better.

The template currently looks like this, and am a bit lost as to which bits control the label and which bits control the input areas.
The actual contact form is here: http://www.fentonwalsh.com/index.php?page=feedback

Code: Select all

{$hidden}

<div{if $css_class != ''} class="{$css_class}"{/if}>

{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if}

{foreach from=$fields item=entry}

	  {if $entry->display == 1}

	    	{strip}

	    	{if $entry->needs_div == 1}

            <div

	    	   {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}

	    	{if $entry->hide_name == 0}

    		   <label{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name}

    		{if $entry->required_symbol != ''}

	    			{$entry->required_symbol}

	    		{/if}</label>

{else if $entry->required_symbol != ''}{$entry->required_symbol}

		    	{/if}

	    	{if $entry->multiple_parts == 1}

				{section name=numloop loop=$entry->input}

	    			{if $entry->label_parts == 1}<div>{$entry->input[numloop]->input} {$entry->input[numloop]->name}</div>

	    			{else}{$entry->input[numloop]->input}

	    			{/if}

	    		{/section}

	    	{else}

	    		{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}

	    	{/if}

	    	{if $entry->valid == 0} <--- {/if}

         {if $entry->needs_div == 1}

            </div>

         {/if}

	    	{/strip}

	  {/if}

{/foreach}

{if $has_captcha == 1}

<div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>

{/if}

<div class="submit">{$prev}{$submit}</div>

</div>
Any advice will me be much appreciated.

Doug

Re: Understanding the standard CSS template for FormBuilder forms

Posted: Thu Jan 17, 2008 9:57 pm
by sarah_h
Hi,

Just been working with FB. As using the default CSS the field are above the form fields! You won't want to modify the form template but the forms' CSS as the form uses pure CSS layout so I'd leave the form template as it is and look in to the form's CSS instead. That's the beauty of separating the form logc from the styling. Have a look at a post I just made here:

http://forum.cmsmadesimple.org/index.php/topic,18630.0.html

Sarah

Re: Understanding the standard CSS template for FormBuilder forms

Posted: Thu Jan 17, 2008 10:09 pm
by musicscore
you really can style the form using CSS.
Take a look at my demo site :

http://cmsms-demo.infowebs.nl/index.php?page=contact-form

This form is styled with css.

Musicscore

Re: Understanding the standard CSS template for FormBuilder forms

Posted: Thu Jan 17, 2008 10:26 pm
by dtism
Thanks sarah and musicscore. I'll persevere with the css.

Re: Understanding the standard CSS template for FormBuilder forms

Posted: Mon Feb 11, 2008 10:16 pm
by jclanin
Just found this thread - where is the form CSS located?

thanks,

JC

sarah_h wrote: Hi,

Just been working with FB. As using the default CSS the field are above the form fields! You won't want to modify the form template but the forms' CSS as the form uses pure CSS layout so I'd leave the form template as it is and look in to the form's CSS instead. That's the beauty of separating the form logc from the styling. Have a look at a post I just made here:

http://forum.cmsmadesimple.org/index.php/topic,18630.0.html

Sarah