FEU form styling question

[j88per]

This may not be in the right place, but it can be moved if it needs to be.  I recently did a bunch of work using the FEU and Self Registration modules and found that the formatting of the forms uses tables and input size definitions on the fields as opposed to pure CSS.  This made it somewhat difficult to format the forms within my template and not running over into other page elements.  I eventually modified the actual FEU code to get around it, but future upgrades will be difficult.   I like to style forms with divs, labels, and floats as opposed to tables and cells.  I just really like keeping my styles and markup separated and using tables for tabular data as opposed to site and form layout, I'm weird like that.

I was wondering what it would take to update the whole FEU and Self registration modules to allow for css oriented styling?  I looked through the code so I know its a big project - and I could be interested in doing it, but I didn't write the module so its not my place to just go and do it.  Plus I'm not all that familiar with the code itself and might omit something required elsewhere. 

I can see benefits that would make styling the forms in FEU much easier and more customizable.  Also, my understanding from an accessibility standpoint is that using tables for something other than data can render the output awkwardly, but I'm not an expert in that area and could be misquoting/misleading.

Also, is this something others would want?  Or do lots of people still use tables for site and form layout?  (why does that sound so 1995?)

[Dr.CSS]

You can use the self reg. admin to change the templates and not have to do any coding to the modules PHP files...

Almost always module templates are just a suggestion...

[j88per]

unfortunately the FEU module has field sizes embedded in the module code so regardless of the template, you're stuck with the html containing a field size.  If an HTML Input tag has a SIZE value, that will override CSS, at least it does in my case.   I thought/hoped your answer would work, but it doesn't.  Thanks tho...

(off to re-edit FEU again.. what did I do again?)

[Peciura]

Open template of your form. Lets say you want to change size of field marked as

Code: Select all

{$prompt_username}

replace it to

Code: Select all

{$prompt_username|replace:'size="25"':'size="33" '}

More useful stuff can be found at http://www.smarty.net/manual/en/language.modifier.replace.php


OR
Try javascript, e.t. jQuery.
Install module JQueryTools http://dev.cmsmadesimple.org/projects/jquerytools
insert

Code: Select all

{JQueryTools action=incjs}

to "Page Specific Metadata:"

Paste

Code: Select all

{literal}
<__script__ type="text/javascript">
jQuery(document).ready(function($){

	jQuery("#mbd700fbrp__225").attr("size", 14);
	  
});
</__script>
{/literal}

to content, where "mbd700fbrp__225" is appropriate field id and 14 is desired size of element.

If not familiar with jQuery you can start reading at
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ and
http://jquery.com/

[Dr.CSS]

I've never had a problem using CSS to set sizes for anything in a form no matter what the default size is....