The Presentation Pane
In the presentation pane you edit the way you want the elements in your form to appear when it's displayed on your web page. You do this by modifying the cascading style sheet (css) rules that are applied to each element.
While I assume you have some familiarity with cascading style sheets (as explaining how css works is well beyond the scope of this documentation), you certainly don't have to be a css expert to use formArchitect.
The presentation pane is made up of four sections:
The first is in the left-hand column and contains menus (Choose Parent and Choose Target Child for you to choose which elements in your form you want to edit, as well as a "Messages" section that gives you feedback on the success or failure of the changes you attempt to make here.
The top of the main center column is the preview area where you can watch your form change as you apply various css rules to the elements in it.
Below and to the left of the preview area is the window where you add, edit, and get information about the css rules that apply to the element selected by the Choose Parent and Choose Target Child menus.
Below and to the right of the preview area is the window where you change the display order of the elements in your form as well as change the number and widths of the columns in a Form Group.
(To download the html for your form, click the "View Form" button/link at the bottom right of the preview window.)
Parent and Child
The concepts of parent and child relate directly to the way in which elements in your form are grouped together in the content pane. The parent element is the form group and every other element it contains (has grouped under it) is referred to as a child element. A form group can be both a child of another form group that contains it, and a parent to the child elements it contains.
Additionally, an element can have multiple parents as it is a child not only of it's immediate parent, but of all form groups it is nested in all the way up to the ultimate <form> element which is the parent of every element.
The important thing to understand is that when you, for example, set a css rule for the "Child Fieldset" elements of a form group, that rule will apply to every fieldset nested within the form group in the entire form. This means that if you set a rule for a child element at the Form level, it applies to every child of that element type in the form.
Specificity
If multiple css rules could possibly apply to a particular form element (for example, if the Form has a rule that sets the font color to green and the element is in a fieldset that has a rule that sets the font color to red), the font color will be set to red because, when conflicts like this occur, the rule that is set by the parent closest to the child element will apply.
Trial and Error
Rather than go into more ponderous detail about how css rules are applied, the best way to see how this parent/child relationship works in formArchitect is to choose parent and child elements in the editor, change the css rules, and see what happens to the elements in your form.
Although difficult to explain in writing, after you've created a few forms, the relationship between parent, children, and how css rules apply to each will quickly become clear.
The Container Paragraph
In formArchitect, every Form Element and HTML Element and it's associated label (if it has one) are contained in (have as a parent) an html <p> (paragraph) element. This allows the label and element to be positioned in any relation to each other (side by side or one over the other) without affecting the layout of the rest of the form.
You'll see "Child Container" and "This Container" as options when you're setting css rules. Setting the rules for a container means you're setting the rules for the parent paragraph that contains the element and its label (if applicable).
Where to Set Your CSS Rules
You have several options when setting CSS rules for a particular element. You can set it locally at the container level, in the parent element through the "Child Element" type, or ultimately at the form level through its "Child Element" type.
A good approach is to set rules that are meant to apply to all elements (font-family for example) in the most generic level possible (the form level), set more specific rules that are meant to apply to more than one element in those element's parent (setting the font-size to a smaller value than the default form value for a group of Radio Buttons for example), and set those rules meant for only one element at that element's level (in the case of formArchitect, in that element's container).