Element Type

Description

Default Labels

Found in: Forms/Details > Labels

Styles the appearance of text shown to the left of non-required fields on forms and details pages.

Configurable settings include font options.

Advanced Options

CSS class name: .cbFormLabel

Required Labels

Found in: Forms/Details > Labels

Styles the appearance of text shown to the left of required fields on forms and on details pages.

Configurable settings include label effect font options.

Advanced Options

CSS class name: .cbFormLabelRequired

Required Marker

Found in: Forms/Details > Labels

When enabled, adds a marker to the labels of required fields on forms and details pages.

Configurable settings include font options for the text or symbol. The actual text or symbol is specified in a Localization.

You can also use your custom image for a Required Marker. To do so, you must provide the URL to the image file you wish to use.

Advanced Options

CSS class name: .cbFormRequiredMarker

Text Fields

Found in: Forms/Details > Fields

Styles the appearance of text fields on forms and details pages.

Configurable settings include font options (applied to any text in editable fields on update forms and details pages), border options, layout options, and background options.

Advanced Options

CSS class name: .cbFormTextField

Text Area

Found in: Forms/Details > Fields

Styles the appearance of text areas on forms and details pages.

Configurable settings include font options, border options, layout options and background options.

Advanced Options

CSS class name: .cbFormTextArea

Dropdown/List box

Found in: Forms/Details > Fields

Styles the appearance of dropdown lists and list boxes on forms and details pages.

Configurable settings include font options and background options .

Advanced Options

CSS class name: .cbFormSelect

File

Found in: Forms/Details > Fields

Styles the appearance of file upload fields on forms and details pages.

Configurable settings include font options, border options, and layout options.

Advanced Options

CSS class name: .cbFormFile

Calendar Icons

Found in: Forms/Details > Fields

Styles the appearance of calendar icons that, when clicked, bring up the calendar popup.

Choose one of five provided icons or use your custom image. To use a custom image, you must provide the URL to the image file.

Standard Buttons

Found in: Forms/Details > Buttons, Results Page > Buttons

Styles the appearance of buttons on all DataPages.

Configurable settings include font options, border options, and layout options.

Advanced Options

CSS class names for Forms/Details Pages buttons:

.cbSubmitButton
.cbBackButton
.cbSearchButton
.cbLoginButton
.cbUpdateButton
.cbPasswordRecoveryButton

CSS class names for Results Page buttons:

.cbResultSetAddButton
.cbResultSetModifyButton
.cbResultSetCancelButton

Hovered Buttons

Found in: Forms/Details  > Buttons, Results Page > Buttons

Styles the appearance of hovered buttons on all Datapages.

Advanced Options

CSS class names for Forms/Details Pages hovered buttons:

.cbSubmitButton_hover
.cbBackButton_hover
.cbSearchButton_hover
.cbLoginButton_hover
.cbUpdateButton_hover
.cbPasswordRecoveryButton_hover

CSS class names for Results Page hovered buttons:

.cbResultSetAddButton_hover
.cbResultSetModifyButton_hover
.cbResultSetCancelButton_hover

Image Replacements

Found in: Forms/Details > Buttons, Results Page > Buttons

You can use your custom image for any button that appears on all DatPages. To do so, you must provide the URL to the image file you wish to use.

Text

Found in: Forms/Details > Data

Styles the appearance of text displayed next to checkboxes and radio buttons, and non-editable text on forms and details pages.

Configurable settings include font options.

Advanced Options

CSS class name: .cbFormData

Links

Found in: Forms/Details > Data

Styles the appearance of hyperlinked non-editable text (emails, web site hyperlinks and file names) on forms and details pages.

Configurable settings include font options.

Advanced Options

CSS class name: .cbFormDataLink

Hovered Links

Found in: Forms/Details > Data

Styles the appearance of hovered hyperlinked non-editable text (emails, web site hyperlinks and file names) on forms and details pages.

Configurable settings include font options.

Advanced Options

CSS class name: .cbFormDataLink_hover

Error Label Effect

Found in: Forms/Details > Errors and Messages

Styles the appearance of the labels after the user submits a form or updates a details page without providing valid values for these fields.

Configurable settings include font options.

Advanced Options

CSS class name: .cbFormLabelError

Error Marker

Found in: Forms/Details > Errors and Messages

When enabled, displays markers to the right of fields after the user submits a form or updates a details page without providing valid values for these fields.

You can choose one of provided icons or use your custom image. To use a custom image, you must provide the URL to the image file.

Error Messages

Found in: Forms/Details > Errors and Messages

Styles the appearance of messages shown on top of the DataPage and to the right of fields after the user submits a form or updates a details page without providing valid values for these fields.

Configurable settings include font options and layout options. The actual messages are specified in Localizations.

Advanced Options

CSS class name: .cbFormError

Note: Messages styling is also applied to error messagesthat appear on Results Pages when in-line editing is enabled. If you want to style these messages differently, edit the .cbResultSetError class.

Confirmation Messages

Found in: Forms/Details > Errors and Messages

Styles the appearance of confirmation messages shown after form submit.

Configurable settings include font options and layout options. The actual messages are entered when configuring the Web Form or Details Page. Any HTML formatting used in confirmation messages overrides the style settings.

Advanced Options

CSS class name: .cbConfirmationMessages

Outer Container

Found in: Forms/Details > Layout, Results Page > Table Layout, Results Page > List/Grid Layout

DataPage elements are actually arranged within an HTML table. You can configure the table's outer border through.

For Results Page tables, you can also define layout options, including keeping column width the same throughout gridded Results Pages.

Advanced Options

CSS class names:

Forms/Details:

.cbFormTable
.cbFormNestedTable *
.cbFormNestedTableAttributes *

* Nested tables are tables holding fields and field labels when Top is used for Label Position, and when the Continue next element on same line option is used.

Results Page, Table Layout:

.cbResultSetTable

Results Page, Grid/List Layout:

.cbResultSetListView

Rows

Found in: Forms/Details > Layout

Form and Details Page elements are actually arranged within an HTML table. You can specify different background options for the table's odd and even rows, and/or highlight hovered rows with a different background color.

Advanced Options

Label Cells

Found in: Forms/Details > Layout

Styles the appearance of the HTML table cells containing field labels on forms and Details Pages.

Configurable settings include layout options , border options and background options .

Note: Label Cells styling overrides Rows styling.

Advanced Options

CSS class name: .cbFormLabelCell

Field Cells

Found in: Forms/Details Pages > Layout

Styles the appearance of the HTML table cells containing editable fields on forms and Details Pages.

Configurable settings include layout options, border options and background options .

Note: Field Cells styling overrides Rows styling.

Advanced Options

CSS class name: .cbFormFieldCell

Buttons Cells

Found in: Forms/Details  > Layout

Styles the appearance of the HTML table cells containing buttons on forms and Details Pages.

Configurable settings include layout options , border options and background options .

Note: Button Cells styling overrides Rows styling.

Advanced Options

CSS class names:

.cbSubmitButtonContainer
.cbBackButtonContainer
.cbSearchButtonContainer
.cbLoginButtonContainer
.cbUpdateButtonContainer
.cbPasswordRecoveryButtonContainer

Data Cells

Found in: Forms/Details > Layout, Results Page > Table Layout, Results Page > Grid/List Layout

Styles the appearance of the HTML table cells containing non-editable data, on forms and Details Pages or on Results Pages.

Configurable settings include layout options, border options and background options.

Note: Data Cells styling overrides Rows or Data Rows styling.

Advanced Options

CSS class names:

Forms/Details Page cells:

.cbFormDataCell

Results Page, Table Layout cells:

.cbResultSetTableCell

Results Page, Grid/List Layout cells:

.cbResultSetListViewRow
.cbResultSetListViewTableOddCell
.cbResultSetListViewTableEvenCell
.cbResultSetListViewTableOddCell_hover
.cbResultSetListViewTableEvenCell_hover

HTML Block Cells

Found in: Forms/Details > Layout

Styles the appearance of the HTML table cells containing your HTML blocks.

Configurable settings include layout options, border options and background options .

Note: HTML Block Cells styling overrides Rows styling.

Advanced Options

CSS class name: .cbHTMLBlockCell

Interactive Labels

Found in: Results Page > Labels

Styles the appearance of interactive column labels on the Results Page. For labels to be interactive, the Enable Interactive Sorting option must be checked when creating the DataPage.

Configurable settings include font options.

Advanced Options

CSS class names: .cbResultSetLabelLink

Hovered Interactive Labels

Found in: Results Page > Labels

Styles the appearance of hovered interactive column labels on the Results Page. For labels to be interactive, the Enable Interactive Sorting option must be checked when creating the DataPage.

Configurable settings include font options.

Advanced Options

CSS class names: .cbResultSetLabelLink_hover

Sorting Marker

Found in: Results Page > Labels

When enabled, adds a marker to clicked interactive column labels to indicate sorting direction.

Configurable settings include font options for text markers. The actual text is specified in a Localization.

You can choose one of provided icon pairs or use your custom images for Sorting Markers. To use custom images, you must provide the URLs to the image files.

Advanced Options

CSS class name: .cbResultSetSortText

Non-Interactive Labels

Found in: Results Page > Labels

Styles the appearance of non-interactive column labels on the Results Page. Labels are non-interactive when interactive sorting is disabled.

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetLabel

Data

Found in: Results Page > Records

Styles the appearance of record text on the Results page.

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetData

Linked Data

Found in: Results Page > Records

Styles the appearance of hyperlinked record text emails, web site hyperlinks and file names on the Results page.

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetDataLink

Hovered Linked Data

Found in: Results Page > Records

Styles the appearance of hovered hyperlinked record text emails, web site hyperlinks and file names on the Results page.

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetDataLink_hover

Standard Actions

Found in: Results Page > Record Actions

Styles the appearance of record action links 'View Details', 'Edit', and 'Delete' on the Results page.

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetActionsLinks

Hovered Actions

Found in: Results Page > Record Actions

Styles the appearance of hovered record action links 'View Details', 'Edit', and 'Delete' on the Results page.

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetActionsLinks_hover

Image Actions

Found in: Results Page > Record Actions

You can use your custom images instead of text record action links. To do so, you must provide the URLs to the image files you wish to use.

Header Row

Found in: Results Page > Table Layout

Styles the appearance of the header row of the results table through its background options . You can choose to highlight the header row with a different background color when it is hovered.

Note: Header Row styling is overridden by Header Cells styling, so you must have Header Cells background color set to none for hovered header row to take effect.

Advanced Options

CSS class names:

.cbResultSetTableHeader
.cbResultSetTableHeader_hover

Header Cells

Styles the appearance of header cells of the results table.  

Configurable settings include layout options , border options and background options .

Note: Header Cells styling overrides Header Row styling.

Advanced Options

CSS class name: .cbResultSetHeaderCell

Data Rows

Styles the appearance of data rows in the results table. You can specify different background options for odd and even rows, and highlight hovered rows with a different background color.

Note: Data Rows styling is overridden by Data Cells styling, so you must have Data Cells background color set to none for alternate and hovered rows to take effect.

Advanced Options

Record Action Column

Styles the appearance of the results table's last column containing the record action links or images.

Configurable settings include layout options , border options and background options .

Advanced Options

CSS class name: .cbResultSetActionCell

Layout

Found in: Results Page > Download, Results Page > Paging

Styles the appearance of the table containers hosting the controls. For download controls, this is the table on top of the results table, containing the data download link or image. For paging controls, this is the table beneath the results table, containing the results count and paging controls. In most cases, you will want the width of this table be the same as that of the Results Table. Checking Same as Results Table keeps it the same.

Configurable settings include layout options , border options and background options .

Note: For Data Download, you specify the width of the visible container instead of the entire table width. This enables right alignment of the Data Download on the page. To ensure correct alignment, the Same as Results Table checkbox must be checked to keep the width of the table same as that of Results Table.

Advanced Options

CSS class names for download controls table:

.cbResultSetDownloadTable
.cbResultSetDownloadMessage

CSS class name for paging controls tables:

.cbResultSetNavigationTable
.cbResultSetNavigationCell
.cbResultSetRecordCell

Download Action

Found in: Results Page > Download

Styles the appearance of the download data link shown on top of the Results Page.

Configurable settings include font options.

Note: In the default style, the download data text link is replaced by an icon.

Advanced Options

CSS class name: .cbResultSetDownloadLink

Hovered Download Action

Found in: Results Page > Download

Styles the appearance of the hovered download data link shown on top of the Results Page.

Configurable settings include font options.

Note: In the default style, the download data text link is replaced by an icon.

Advanced Options

CSS class name: .cbResultSetDownloadLink

Download Image Action

Found in: Results Page > Download

You can use one of provided icons or your custom image instead of the text download data link. To use a custom image, you must provide the URL to the image file.

Current Page

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetNavigationMessages

Paging Controls

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetNavigationLinks

Hovered Paging Controls

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetNavigationLinks_hover

Image Paging Controls

Found in: Results Page > Paging

You can use one of provided icon sets or your custom images instead of text paging links. To use custom images, you must provide the URLs to the image files.

Results Count

Configurable settings include font options.

Advanced Options

CSS class name: .cbResultSetRecordMessage

Heading1 (h1)

Found in: HTML Tags

Styles the appearance of first-level headings text enclosed within

and

Configurable settings include font options, border options, and layout options.

Advanced Options

CSS class name: .h1

Heading2 (h2)

Found in: HTML Tags

Styles the appearance of second-level headings text enclosed within

and

Configurable settings include font options, border options, and layout options .

Advanced Options

CSS class name: .h2

Heading3 (h3)

Found in: HTML Tags

Styles the appearance of third-level headings text enclosed within

and

Configurable settings include font options, border options , and layout options .

Advanced Options

CSS class name: .h3

Paragraph (p)

Found in: HTML Tags

Styles the appearance of paragraphs text enclosed within

and

Configurable settings include font options and layout options .

Advanced Options

CSS class name: .p

List (ul and li)

Found in: HTML Tags

Styles the appearance of lists text enclosed within

and

Configurable settings include font options , list type (bulleted, numbered or alphabetic), and margins for the list and list items.

Advanced Options

CSS class names:

.ul
.li

Link (a)

Found in: HTML Tags

Styles the appearance of hyperlinks text enclosed within and tags in HTML blocks, headers and footers.

Configurable settings include text color and underline for links and hovered links.

Advanced Options

CSS class names:

.a
.a_hover