Page History

OFBiz HTML Element Collection Styles

This document describes the new common OFBiz CSS classes and the HTML element collections (or compounds) that they style.

Wiki MarkupNote: \ [\] = style decorators.decorators. Style decorators allow you to add attributes to a basic style. For example, you can add a light grid to a basic table by using class="basic-table light-grid".

masthead:

<div id="masthead">
  <ul>
    <li> | <li class="logo-area | control-area | opposed">Masthead Content</li>
  </ul>
</div>

...

<div id="app-navigation">
  <h1 | h2 | h3>Application Title</h1 | h2 | h3>
  <ul>
    <li> | <li class="disabled | selected | oppositeopposed">Menu Item</li>
  </ul>
</div>

...

<div class="screenlet-title-bar">
  <!-- With menu -->
  <ul>
    <h1     <li class="h1 | h2 | h3>Screenlet h3">Screenlet Title</h1 | h2 | h3>li>
    <li> | <li class="disabled">Menu Item</li>
  </ul>
</div>

...

<div class="basic-nav">
  <ul>
    <li> | <li class="selected | disabled">Menu Item</li>
  </ul>
</div>

button-bar:

Wiki Markup<div class="button-bar \ [button-style-1 \ | button-style-2 \ | tool-bar \ | tab-bar\]"> &nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;<li> \| <li
  <ul>
    <li> | <li class="selected | disabled">Menu Item</li> &nbsp;&nbsp;<
  </ul>
</div>

basic-table:unmigrated-wiki-markup

<table class="basic-table \ [hover-bar \ | dark-grid \ | light-grid\]"> &nbsp;&nbsp;<tr> \| <tr
  <tr> | <tr class="header-row \| | header-row-2 | alternate-row"> &nbsp;&nbsp;&nbsp;&nbsp;<td> \| <td
    <td> | <td class="button-col \ | group-label \ | label"></td> &nbsp;&nbsp;<
  </tr>
</table>

basic-tree:

<ul class="basic-tree">
  <li> | <li class="collapsed | expanded">Tree Item</li>
  <li>
    <ul class="basic-tree">
      ...
    </ul>
  </li>
</ul>

basic-form:unmigrated-wiki-markup

<form class="basic-form"> &nbsp;&nbsp;<table
  <table class="basic-table \ [hover-bar \ | dark-grid \ | light-grid\]"> &nbsp;&nbsp;&nbsp;&nbsp;<tr> \| <tr
    <tr> | <tr class="header-row \ | alternate-row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td> \| <td
      <td> | <td class="group-label \ | label"></td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><a
      <td><a class="smallSubmit"></a></td> &nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;</table>
    </tr>
  </table>
</form>

Semantic link (<a> element) styles:

view-calendar
field-lookup lookup
nav-first
nav-last
nav-next
nav-previous