Styling cheatsheet

Shared page styling

All pages are structured in the following CSS class structure

• .TempusServaPage (root)
  • .menuList
    • .menuItem
  • ... content ...

Content can easily be wrapped around the "TempusServaPage" by use of wrappers

Command bases styling

List mode

• .TempusServaPage
  • .tableListHeader
  • .viewList
    • .tableList
      • tr
        • (field names)
      • tr [repeat]
        • (field values)
    • .pager
      • .pagerLink
      • .pagerPagesize

type	class	content
tr	customStyle_[item status name]	Container for a single record line

Variant views

Most list related operations will have a structure like this.

• .TempusServaPage
  • .tableListHeader
  • [ .viewHeat | .tableStatistics | ... ]
    • .tableList

Note the inner table "tableList", that is present in all list operations. Specific dialogue styling should use the outer tag - example: "tableStatistics".

Item mode

• .TempusServaPage
  • .tableForm
    • .PAGE_[field PageID]
      • .fieldLabel
      • .fieldValue
      • .fieldNotes

type	class	id	content
tbody	PAGE_[field PageID]		Container for a single field
div	FieldLabel	NB_[system fieldname]	Label for field
div	FieldValue	VB_[system fieldname]	Value of field / Input for field

Other element styling

ITEM spage selector

• formpageselector
  • tablePageSelector
    • <node>
      • tablePageSelectorElementLeftActive
      • tablePageSelectorElementActive
      • tablePageSelectorElementRightActive
    • <node>
      • tablePageSelectorElementLeft
      • tablePageSelectorElement
      • tablePageSelectorElementRight