UIX HTML Structure
Last modified by Vincent Massol on 2024/02/26 17:53
Description
The following HTML structure is valid for Colibri skin on 5.4.1
HTML Structure
<body id='body'>
<div id='xwikimaincontainer'>
<div id='menuview'> ... </div>
<div id='headerglobal'> ... </div>
<div id='contentcontainer' class='content'> ... </div>
<div id='footerglobal'> ... </div>
</div>
</body>
<div id='xwikimaincontainer'>
<div id='menuview'> ... </div>
<div id='headerglobal'> ... </div>
<div id='contentcontainer' class='content'> ... </div>
<div id='footerglobal'> ... </div>
</div>
</body>
- Existing Extension Points:
| ID | UIXP | VM |
|---|---|---|
| #headerglobal | org.xwiki.platform.template.header.after | global.vm |
Main Menu
<div id='menuview'>
<div id='mainmenu'>
<div class='rightmenu'>
<div id='tmUser'> ... </div>
</div>
<div class='leftmenu'>
<div id='tmCreate'> ... </div>
<div id='tmMainWiki'> ... </div>
<div id='tmSpace'> ... </div>
<div id='tmPage'> ... </div>
</div>
</div>
</div>
<div id='mainmenu'>
<div class='rightmenu'>
<div id='tmUser'> ... </div>
</div>
<div class='leftmenu'>
<div id='tmCreate'> ... </div>
<div id='tmMainWiki'> ... </div>
<div id='tmSpace'> ... </div>
<div id='tmPage'> ... </div>
</div>
</div>
</div>
Content Container
<div id='contentcontainer' class='content'>
<div id='contentcolumn'> ... </div>
<div id='leftPanels'> ... </div>
<div id='rightPanels'> ... </div>
</div>
<div id='contentcolumn'> ... </div>
<div id='leftPanels'> ... </div>
<div id='rightPanels'> ... </div>
</div>
- Existing Extension Points:
| ID | UIXP | VM |
|---|---|---|
| #rightPanels | platform.panels.rightPanels | rightPanels.vm |
| #leftPanels | platform.panels.leftPanels | leftPanels.vm |
Content Column
<div id='contentcolumn'>
<div class='main'>
<div id='contentmenu'> ... </div>
<div id='mainContentArea'> ... </div>
<div id='xdocFooter'> ... </div>
<div id='xwikidata'> ... </div>
</div>
</div>
<div class='main'>
<div id='contentmenu'> ... </div>
<div id='mainContentArea'> ... </div>
<div id='xdocFooter'> ... </div>
<div id='xwikidata'> ... </div>
</div>
</div>
Content Menu
<div id='contentmenu'>
<div class='rightmenu'>
<div id='tmAnnotations'>
</div>
</div>
<div class='leftmenu'>
<div id='tmEdit'>
</div>
<div id='tmExport'>
</div>
<div id='tmMoreActions'>
</div>
</div>
</div>
<div class='rightmenu'>
<div id='tmAnnotations'>
</div>
</div>
<div class='leftmenu'>
<div id='tmEdit'>
</div>
<div id='tmExport'>
</div>
<div id='tmMoreActions'>
</div>
</div>
</div>
