Forms

Forms in Easysite have a standard structure which shares many properties with directories. There are currently no options for alternate form styles - just a single style which is applied across the site.*

The reason forms are similar to directory entries is that both consist of two columns of information: a question and an answer (this is also - more technically - called a key-value pair). For instance:

Name: Bob Smith

'Name' is the question, and 'Bob Smith' is the answer.

Directories are built from information submitted via a form, and when displayed back to users they generally keep that initial layout. This is important when styling forms as you must keep in mind the common class names between forms and directories. See the Login Element page for further discussion of this point.

So if you want to alter the relative widths of the question and answer columns you could write some version of the following:

/* will affect all question/answer pairs throughout the site */
.question { width: 30%; }
.answer { width: 70%; }
/* will only affect forms */
.form .question { width: 35%; }
.form .answer { width: 65%; }
/* will only affect directories */
.directory .question { width: 40%; }
.directory .answer { width: 60%; }
The HTML for a simple form will look something like the example below, consisting of an enclosing div with the class .form, followed by a fieldset, perhaps a legend, and then a series of divs with the class .element or .oDataFormElement (depending on your version of Easysite).

Each element is a row in the form, and contains the question and answer columns. The question column generally contains a label and the answer column a form input of some kind: textbox, textarea, radio buttons, etc. Radio buttons are usually rendered inside an unordered list <ul> and therefore will need the standard list styling removing.

Buttons appear at the bottom of the form, inside a wrapper named .buttons or .oDataFormButtonContainer.

A basic form with no custom styling might look like this:

With the addition of just a few lines of CSS we can change the styling to better fit the theme of your site:

/* Style the legend as a title */
.form legend { font-size: 1.8em; color: #2669c5; padding: 0 0 15px; }
/* kill default bulleted list styling */
.form .answer ul li { list-style-type: none; }
/* Add a blue border to the form input fields */
.form .answer input.oDataFormInputText, .form .answer textarea { border: 1px solid #2669c5; }
/* apply custom styling to the buttons */
.form .buttons input { background-color: #2669c5; border-width: 0; color: #fff; padding: 5px; margin: 5px; }

You should then see something more like this:

* if you need to target a particular form differently to others, then you must find a way to distinguish it - for instance, by placing it inside a unique panel or column. You would then write CSS targeting:

.column-omega .form ... {}