Dialog Content Styles
Dialog Content (Answer Fields, Prompts, etc.)
The following styles are used to style the individual answer fields and other elements of the dialog:
| Element | Description |
| DIV.RunonDlgContent | Default spacer between dialogs in single-page interviews |
| .hd-dlg-title | Dialog title |
| DIV.DlgTitle | Dialog title |
| .hd-dlg-content | The main content area of the dialog (where the questions are asked) |
| .hd-input-prompt | A variable prompt |
| .hd-input-currency | The currency text for number variables. |
| .GrayText | Applied to prompts for variables that have been GRAYed. |
| .HDRequired | Applied to prompts of variables that are required. |
| .HDMarked | Applied to prompts of variables that are “marked” as unanswered by the server. |
| .HDSSMarked | Applied to spreadsheet column headings of variables marked unanswered by the server. |
| SPAN.errorText | Error text |
| .GrpBoxTitle | The title of a group box (e.g., MC variable displayed as radio buttons or check boxes) |
| DIV.GrpBoxBox, .hd-input-tf-gb | Group box (MC or TF variables) |
| DIV.hd-input-box-disabled | Disabled input |
| .hd-input | Input control |
| INPUT.hd-input-readonly | Read-only input control |
| BUTTON.hd-child-btn | Child dialog button |
| .hd-input-text | Input control text |
| .hd-text-readonly | Read-only input control text |
| option.hd-input-mc-lb-item-readonly | Read-only MC variable list box item |
Some mobile browsers will display Multiple Choice variables that have been styles as "list" as a "drop-down list" in the interview.
DataGrid
Spreadsheets and answer sources use a DataGrid to present information in a grid. The following styles are used in these grids:
| Element | Description |
| DIV.hd-grid | The root element of the grid |
| TR.hd-grid-header | The row of the grid that contains column headings |
| TR.hd-grid-body | The row of the grid that contains all of the spreadsheet rows. |
| TD.hd-grid-left | The left cell in the data grid header, which appears above the row headers (numbers). |
| DIV.hd-grid-rh | The DIV that contains the row header (number) on each row. |
| DIV.hd-grid-arrow | The image in the row header that indicates the current row. |
| DIV.hd-grid-rh-num | The DIV within the row header that contains the row number. |
| .hd-grid-selected | Class applied to the currently selected row in the grid. |
| .hd-grid-row | Represents a row in the grid. |
| .hd-grid-row-alt | Applied to odd-numbered rows in the grid to allow alternate styling. |
| .hd-grid-cell | An individual cell in a datagrid row. |
| .hd-grid-buttongrid | The DIV that appears below a spreadsheet, which contains buttons for inserting or deleting rows, etc. |
| .hd-grid-child | |
| .hd-grid-col-splitter | The invisible DIV on the right side of each column header that, when clicked, allows the user to resize the column. |
| .hd-grid-col-title | The title of a column in the grid. |
| .hd-grid-line | A class applied to each cell in the grid. In the default theme, this is used to set the cell border color. |
| .hd-grid-row-cells | A container within each row that contains the data cells for that row. |
Dialog Elements
Template authors can include dialog elements on a dialog to display additional text, graphics, spacing, buttons, and hyperlinks. These dialog elements use the following styles:
| Element | Description |
| .DlgElemLnk | Hyperlink |
| .DlgElemLnkText | Hyperlink text |
Dot Codes
HotDocs template authors may use “dot codes” in titles, prompts, and other places in the interview to format text. When dot codes are used, CSS classes are applied to the text to give it the desired effect. The following table lists the classes that are applied to text created using dot codes:
| Class | Dot Code |
| .dot-b | Bold |
| .dot-i | Italic |
| .dot-u | Underline |
| .dot-x | Strike through |
| .dot-s | Small caps |
| .dot-a | Uppercase |
| .dot-h | Hidden |
| .dot-l | Capitalize first letter of each word |
| .dot-w | Web link |
The only class in this list that has a style in the default hdsuser theme is .dot-w. It sets the color of the hyperlink text and causes it to be underlined.
DatePicker
When a Date variable appears on a dialog, a calendar icon is displayed next to the field. Clicking that icon shows a calendar (DatePicker) dialog from which the user can select a date. The DatePicker uses the following styles:
| Element | Description |
| DIV.hd-datepicker | This element is the main container for the calendar. |
| TABLE.hd-datepicker-grid | This is a TABLE element that contains the various parts of the calendar control. |
| .hd-datepicker-titlebar | This is where the title (month and year) and buttons for changing the month and year appears at the top of the calendar. |
| .hd-datepicker-title | This is where the name of the current month and year appears within the titlebar. |
| .hd-datepicker-day | This class is applied to each “date” cell in the calendar. |
| .hd-datepicker-label | This class is applied to each cell in the row that contains the days of the week. |
| .hd-datepicker-weekend | This class is applied to each date cell that falls on a weekend. |
| .hd-datepicker-selected | This class is applied to the cell that contains the currently selected date. |
| .hd-datepicker-today | This class is applied to the cell that contains today’s date. |
Validation Error
Number and date variables require answers to be entered in a certain format. If the answer entered for one of these variables fails to validate, an error is displayed below the answer field. Its DOM appears as follows:
<div class="hd-validation">
<div class="hd-img hd-error-16"/>
<span>Please enter a number.</span>
</div>
This error uses the following styles:
| Element | Description |
| .hd-validation | This is the main error DIV. It contains two child elements: a DIV, which is the error icon, and a span, which contains the error text. |