Difference between revisions of "Styling cheatsheet"

From TempusServa wiki
Jump to navigation Jump to search
old>Admin
old>Admin
Line 23: Line 23:
** .viewList
** .viewList
*** .tableList  
*** .tableList  
**** tr (header)
**** tr
***** (field names)  
***** (field names)  
**** '''tr [repeat]'''
**** '''tr [repeat]'''

Revision as of 11:29, 6 March 2013

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
          • (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
      • tbody [repeat]
        • 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