Registration Form

The registration form stylesheet template is applied to the registration form that Sundial generates when users register for an event. This template allows you to use CSS to override the default stylesheet.

When making a template, do not specify the <style> and </style> tags -- Sundial adds them automatically. You can type raw CSS code directly into the editor.

The registration form specifies the following HTML page divisions:

• form - The registration form element.
• form#rfXXXX - The registration form for event ID #XXXX.
• label - The names of fields in the form. By default, these have a width of 13em and are floated to the left. A label forces a new line and clears floating elements.
• label.required - Required labels are given the "required" class. By default, this class appends ' *' using label.required:after (in browsers that support this feature) and renders text in red.
• input - All form elements on the page.
• textarea - All multiple-line text elements.
• input.checkbox - For maximum compatibility, we assign the "checkbox" class to checkbox elements, rather than using input[type="checkbox"], which Internet Explorer 6 will not understand.
• input.radio - For the same reasons, the "radio" class specifies radio buttons.
• div.radioGroup - Radio buttons are grouped in these div elements, which float as a group to ensure continuity of the layout.
• div.instructions - If instructions are specified for an element, they are placed immediately following the element in this div.
• div.instructions div - This div is used to give padding around the instructions, ignoring the width of its container, and need not necessarily be styled.
• h2 - Denotes each section of the form.
• p.instructions - If a fieldset is given instructions, they are displayed in paragraph tags, immediately following the fieldset. By default, this section appears as unstyled text.

It is important to be conscious of the float layout when making changes to the stylesheet; careless changes could cause the layout to be quite jarring.

Each label (except for radio buttons) is floated to the left, as is each control or group of controls. Labels, instructions and fieldsets are the only elements that clear float to force a line break.