Personal tools
You are here: Home Products PloneFormGen Documentation How-Tos Restyle A Form
Document Actions

Restyle A Form

This How-to applies to: Any version.

How to inject CSS into a form page to turn a label green ... or pretty much anything else.

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>
#archetypes-fieldname-comments label {
  color: green;
}
</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.

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.
by Steve McMahon last modified March 1, 2007 - 22:51

adding class/id elements to the input fields

Posted by Michael Schreiber at April 26, 2007 - 15:42
Is there a way to actually edit the template(s) that the fields use to be generated to add additional id/class information into the label and input field, similar to what is done for the help field? This would be amazingly beneficial for making a true CSS customizable form. Thanks!

styling without class/id elements for input fields

Posted by Michael Schreiber at April 27, 2007 - 11:35
Though it would be preferable to have class/id fields for the input elements (and other granular elements) I've put together some CSS for displaying your input fields on one line (so that your forms don't become too long):

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 elements

Posted by Steve McMahon at April 27, 2007 - 15:17
For better or worse, PloneFormGen uses the Archetypes widgets built into Plone. If you need more selectors, the best hope would probably be to file a well thought-out feature request for Archetypes.

For any issues with the web site functionality, please file a ticket.

Please consult the policy on plone.org content if you want your content published on this site.

Servers and hosting by