# Styling cheatsheet

## <span class="mw-headline" id="bkmrk-shared-page-styling-1">Shared page styling</span>

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

## <span class="mw-headline" id="bkmrk-command-bases-stylin-1">Command bases styling</span>

### <span class="mw-headline" id="bkmrk-menu-mode-1">Menu mode</span>

#### <span id="bkmrk-"></span><span class="mw-headline" id="bkmrk-simple-%2F-standard-1">Simple / Standard</span>

#### <span id="bkmrk--1"></span><span class="mw-headline" id="bkmrk-advanced-%2F-accordion-1">Advanced / Accordion</span>

### <span class="mw-headline" id="bkmrk-list-mode-1">List mode</span>

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

<table id="bkmrk-type-class-content-t"><tbody><tr><th>type</th><th>class</th><th>content</th></tr><tr><td>tr</td><td>customStyle\_\[item status name\]</td><td>Container for a single record line</td></tr></tbody></table>

#### <span class="mw-headline" id="bkmrk-variant-views-1">Variant views</span>

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".

### <span class="mw-headline" id="bkmrk-item-mode-1">Item mode</span>

- .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.

<table id="bkmrk-type-class-id-conten"><tbody><tr><th>type</th><th>class</th><th>id</th><th>content</th><th>template</th></tr><tr><td>tbody</td><td>PAGE\_\[field PageID\]</td><td> </td><td>Container for a single field</td><td>{default\_start} / {default\_end}</td></tr><tr><td>div</td><td>FieldLabel</td><td>NB\_\[system fieldname\]</td><td>Label for field</td><td>{default\_name}</td></tr><tr><td>div</td><td>FieldValue</td><td>VB\_\[system fieldname\]</td><td>Value of field / Input for field</td><td>{default\_value}</td></tr><tr><td>div</td><td>FieldNotes</td><td>HB\_\[system fieldname\]</td><td>Optional help text for the field</td><td>{default\_help}</td></tr></tbody></table>

Further information on: [Form templates](https://wiki.tsnocode.com/index.php?title=Form_templates "Form templates")

## <span class="mw-headline" id="bkmrk-other-element-stylin-1">Other element styling</span>

### <span class="mw-headline" id="bkmrk-item-page-selector-1">ITEM page selector</span>

The page selector may be placed anywhere within the template

- formpageselector 
    - tablePageSelector 
        - &lt;node&gt; 
            - tablePageSelectorElementLeftActive
            - tablePageSelectorElementActive
            - tablePageSelectorElementRightActive
        - &lt;node&gt; 
            - tablePageSelectorElementLeft
            - tablePageSelectorElement
            - tablePageSelectorElementRight

### <span class="mw-headline" id="bkmrk-targeting-mobile-dev-1">Targeting mobile devices</span>

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

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

### <span class="mw-headline" id="bkmrk-hiding-form-update-e-1">Hiding form update elements</span>

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).

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