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>
basic-nav:
<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 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>
[Show » ] Adrian 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
nav-first
nav-last
nav-next
nav-previous