Styling cheatsheet

From TempusServa wiki
Jump to navigation Jump to search

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


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


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>