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
        • td (field names)
      • tr [repeat]
        • td (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

Allthough the ".tableForm" is persent in the default template, there is no guarantee taht the element can be found within the page.

type	class	id	content	template
tbody	PAGE_[field PageID]		Container for a single field	{default_start} / {default_end}
div	FieldLabel	NB_[system fieldname]	Label for field	{default_name}
div	FieldValue	VB_[system fieldname]	Value of field / Input for field	{default_value}
div	FieldNotes	HB_[system fieldname]	Optional help text for the field	{default_help}

Further information on: Form templates

Other element styling

ITEM page selector

The page selctor may be placed anywhere within the template

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

Targetting mobile devices

The following example shows a script that dynamically assigns a red background to the menu, but only while using mobile devices.

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('.menuList').css('background','red');
 }