Through variables such as <%searchform%> and <%commentform%>, forms can easily be included into your skin. To allow styles to be applied on those forms, CSS classes have been assigned to the input fields and buttons, and to a surrounding DIV-container.
Below is a list of which CSS class corresponds to which form. These are the classes assigned to the surrounding DIV-container.
| Form Type | Skin Variable | CSS Class Name |
|---|---|---|
| Add Item to Blog | <%additemform%> | .blogform |
| Add Comment | <%commentform%> | .commentform |
| Login Form | <%loginform%> | .loginform |
| Search Form | <%searchform%> | .searchform |
| Member to Member Mail | <%membermailform%> | .mailform |
Below is an overview of the CSS classes assigned to buttons and input fields.
| Type | CSS Class Name |
|---|---|
| Input fields (text and textarea) | .formfield |
| Buttons | .formbutton |
An example of how to use these classes in you stylesheets is given below:
/* applies to all input fields */
.formfield {
background-color: gray;
}
/* only applies to buttons for comment forms */
.commentform .formbutton {
border: 1px solid #000;
background-color: #ddd;
color: #000;
font-size: xx-large;
}
In the example above, all formfields that nucleus generates are given a gray background, and the submit button on the comment form has large text, a black 1px border, black text and a light-gray background.