OFBiz HTML Element Collection Styles
This document describes the new common OFBiz CSS classes and the HTML element collections (or compounds) that they style.unmigrated-wiki-markup
Note: \ [\] = 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">
<!-- No menu -->
<h1 | h2 | h3>Screenlet Title</h1 | h2 | h3>
</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:
<div class="button-bar \ [button-style-1 \ | button-style-2 \ | tool-bar \ | tab-bar\]">
<ul>
<li> \| <li Wiki Markup
<ul>
<li> | <li class="selected | disabled">Menu Item</li>
<
</ul>
</div>
basic-table:
<table class="basic-table \ [hover-bar \ | dark-grid \ | light-grid\]">
<tr> \| <tr Wiki Markup
<tr> | <tr class="header-row \| | header-row-2 | alternate-row">
<td> \| <td
<td> | <td class="button-col \ | group-label \ | label"></td>
<
</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:
<form class="basic-form">
<table Wiki Markup
<table class="basic-table \ [hover-bar \ | dark-grid \ | light-grid\]">
<tr> \| <tr
<tr> | <tr class="header-row \ | alternate-row">
<td> \| <td
<td> | <td class="group-label \ | label"></td>
<td><a
<td><a class="smallSubmit"></a></td>
</tr>
</table>
</form> \[Show » \] Adrian Wiki Markup
</tr>
</table>
</form>
Semantic link (<a> element) Crum \[23/Feb/07 12:06 AM\] OFBiz maincss.css HTML Element Collection Styles This document describes the new CSS classes and the HTML element collections (or compounds) that they style. Note: \[\] = style decorators. masthead: <div id="masthead"> <ul> <li> \| <li class="logo-area \| control-area">Masthead Content</li> </ul> </div> main-navigation: <div id="main-navigation"> <ul> <li> \| <li class="disabled \| selected">Menu Item</li> </ul> </div> app-navigation: <div id="app-navigation"> <h1 \| h2 \| h3>Application Title</h1 \| h2 \| h3> <ul> <li> \| <li class="disabled \| selected \| opposite">Menu Item</li> </ul> </div> screenlet-title-bar: <div class="screenlet-title-bar"> <\!-\- No menu \--> <h1 \| h2 \| h3>Screenlet Title</h1 \| h2 \| h3> </div> <div class="screenlet-title-bar"> <\!-\- With menu \--> <ul> <h1 \| h2 \| h3>Screenlet Title</h1 \| h2 \| h3> <li> \| <li class="disabled">Menu Item</li> </ul> </div> button-bar: <div class="button-bar \[button-style-1 \| button-style-2 \| tool-bar\]"> <ul> <li> \| <li class="selected">Menu Item</li> </ul> </div> basic-table: <table class="basic-table \[hover-bar \| dark-grid \| light-grid\]"> <tr> \| <tr class="header-row \| alternate-row"> <td> \| <td class="button-col \| group-label \| label"></td> </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: <form class="basic-form"> <table class="basic-table \[hover-bar \| dark-grid \| light-grid\]"> <tr> \| <tr class="header-row \| alternate-row"> <td> \| <td class="group-label \| label"></td> <td><a class="smallSubmit"></a></td> </tr> </table> </form> Semantic link (<a> element) styles:
view-calendar
field-lookup lookup
nav-first
nav-last
nav-next
nav-previous