Description
The header is a <div> with id tx-header and is the first child of the <body>.
The
div#tx-system contains the globalsearch, menu, logo and login.
The global search is a <div> with id
tx-globalsearch and contains HTML.
The logo could be placed on the left top corner and is a <div> containing a <a> e.g. <div id="tx-logo"><a href="" /></div>
The menu is a <div> with id
tx-menu, which contains an ordered list.
The
div#tx-module contains the title and the page actions.
The title of the module is a <h1>.
The page action buttons area is a <div> with id
tx-page-actions, which contains an ordered list.
The tabs and contextual buttons are in a <div> with id
tx-module-tabs which contains:
An ordered list <ol> for the module tabs.
A <div> with id
tx-contextual-buttons, which contains an ordered list of contextual action buttons
The
div#tx-module-options contains the toggle icons and paginator/select elements.
An ordered list <ol> for the module options, which contains the toggles and status icons.
Example code
<!-- header -->
<div id="tx-header">
<!-- system -->
<div id="tx-system">
<!-- global search -->
<div id="tx-globalsearch">
<form action="/globalsearch/">
<fieldset>
<input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/>
</fieldset>
</form>
</div>
<!-- user information -->
<div id="tx-login">
<a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span>
</div>
<div id="tx-logo"><a href=""></a></div>
<!-- main menu -->
<div id="tx-menu">
<ol>
<li><a href="">Dashboard</a></li>
<li><a href="">Modulgruppe 1</a>
<ol>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a></li>
</ol>
</li>
<li><a href="">Modulgruppe 2</a>
<ol>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
</ol>
</li>
<li><a href="">Help</a>
<ol>
<li><a href="">About</a></li>
<li><a href="">What</a></li>
<li><a href="">Where</a></li>
</ol>
</li>
</ol>
</div>
</div>
<!-- //system -->
<!-- module -->
<div id="tx-module">
<!-- module title -->
<h1>Example</h1>
<!-- page editing actions -->
<div id="tx-page-actions">
<ol>
<li><a href="" class="tx-button tx-button-generic">Page Editing</a></li>
<li><a href="" class="tx-button tx-button-generic-on">Preview</a></li>
<li><a href="" class="tx-button tx-button-generic">Page Data</a></li>
<li><a href="" class="tx-button tx-button-generic">Something</a></li>
</ol>
</div>
</div>
<!-- // module -->
<!-- moduletabs -->
<div id="tx-module-tabs">
<!-- moduletabs -->
<ol>
<li class="tx-active"><a href="#">Assets</a></li>
<li><a href="#">Image Sets</a></li>
<li><a href="#">My Lightboxes</a></li>
<li class="tx-active"><a href="#">My Something</a></li>
<li><a href="#">My Everything</a></li>
</ol>
<!-- -->
<div id="tx-contextual-buttons">
<ol>
<li><a href="#" class="tx-button tx-button-remove">Remove</a></li>
<li><a href="#" class="tx-button tx-button-create">Create</a></li>
<li><a href="#" class="tx-button tx-button-modify">Modify</a></li>
<li><a href="#" class="tx-button tx-button-generic">Generic</a></li>
</ol>
</div>
</div>
<!-- // moduletabs -->
<!-- moduleoptions -->
<div id="tx-module-options">
<ol>
<li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li>
<li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li>
<li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li>
<li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li>
<li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li>
<li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li>
</ol>
</div>
<!-- // moduleoptions -->
</div>
<!-- // header -->