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

Menu mode

Simple / Standard

Advanced / Accordion

List mode

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

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.

Further information on: Form templates

Other element styling

ITEM page selector

The page selector may be placed anywhere within the template

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

Targeting 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');
}

Hiding form update elements

As of build 2345 there is no easy way to refer ALL the update elements (some browsers are not ble to collapse cells with hidden contents).

 <script>
   $('#NB_DATA_StatusID').parent().parent().hide();
   $('#NB_DATA_Revision').parent().parent().hide();
   $('.updateSubmit').parent().parent().parent().hide();
 </script>