Restyle A Form
This How-to applies to: Any version.
The general answer to "how do I restyle a form" questions is: use CSS.
The underlying Archetypes form generator surrounds every form element with a <div> with a distinct ID. For example, a sample form with a textarea contents field has the generated XHTML:
<div class="field ArchetypesTextAreaWidget"
id="archetypes-fieldname-comments">
<span></span>
<label for="comments">Comments</label>
<span class="fieldRequired" title="Required">
(Required)
</span>
<div class="formHelp" id="comments_help"></div>
<textarea rows="5" name="comments" cols="40" id="comments"></textarea>
<input type="hidden" name="comments_text_format" value="text/plain" />
</div>
That's more than enough ID and Class selectors to do pretty much anything in the way of visual formatting.
So, how do we get the CSS into the form's page. You could add it to the site's css, but there's a much easier way. Using the ZMI, create an object of type File inside your form folder. Set its Content Type to "text/plain" and give it the ID "newstyle".
Let's turn the label for the comments field green. Just fill in the big text field on your file with:
<style>Now, just save it, return to the Plone UI and edit your form folder. Specify "here/newstyle" for the Header Injection field of the [overrides] pane. Now, enjoy your green label.
#archetypes-fieldname-comments label {
color: green;
}
</style>
Need to do something more sophisticated? You can use a Python script to generate dynamic CSS or JavaScript. See Installing a JavaScript Event Handler in a Form for a how-to.
styling without class/id elements for input fields
The following is for a field named "fname"
/*margin-right may not matter in your case*/
#archetypes-fieldname-fname.field { text-align: right; margin-right: 80px;}
/*padding on the right of the form help that varies for each element makes a more table-like structure)...I tested this WITHOUT help information on my elements, so I don't know exactly how it will perform in other cases*/
#fname_help.formHelp { display: inline; padding-right: 104px;}
/*this makes sure the element, though right-justified, is actually on the left hand side of the form*/
#archetypes-fieldname-fname {float: left; }
/*This was for the error element, which would display quite ugly without this code. You may need to adjust margin-right in certain cases of small fields*/
#archetypes-fieldname-fname.field.error.ArchetypesStringWidget { padding: 0px; margin-right: 0px; text-align: left;}
adding class/id elements to the input fields