CSS Layout
Last modified by Lucas Charpentier (Sereza7) on 2024/02/22
The layout of a page is composed of several parts (header, body, footer...). Each part is related to a CSS style with its own size, color, images and so on. This document shows you how a XWiki page is roughly divided. This layout is based on the view action of a standard page. Some actions and pages will have their own variations adding or removing some elements.
Since 16.0.0
XWiki 16.0.0+
<html>
<head>
</head>
<body id="body" class="${bodyAction}body content">
<div id="xwikimaincontainer">
<div id="xwikimaincontainerinner">
<div id="menuview">
<header class="navbar navbar-default actionmenu">
<div class="container-fluid">
<div class="navbar-header">
Leftmost part of the navbar
<div id="companylogo">
Company logo.
</div>
</div>
<div id="xwikimainmenu">
Everything in the navbar after the logo
<ul class="nav navbar-nav navbar-left">
Navbar items next to the logo. By default, this is empty.
</ul>
<ul class="nav navbar-nav navbar-right">
Navbar items in the top right corner, ordered from right to left.
This also contains the node with the drawer.
</ul>
</div>
</div>
</header>
</div>
<div id="headerglobal">
Still exists for backwards compatibility, but empty on a default flavor.
Used to contain Company logo and login/register links .
</div>
<div id="actionmenu" class="layoutsubsection">
Action bar with Edit, Show, Print, Delete
</div>
<div id="contentcontainer" class="content">
<div id="contentcontainerinner">
<div class="leftsidecolumns">
<div id="contentcolumn">
<div class="main">
Central column with the main content
<nav id="hierarchy_breadcrumb">
<ol id="hierarchy">
Contains the breadcumb that leads to this page.
</ol>
</nav>
<main id="mainContentArea" class="xcontent">
<div class="row document-header">
Document level header, between the breadcrumb and main content.
<section class="document-info">
Leftside, set of important information about the document.
<div id="document-title">Document title as the H1 of the page. </div>
<div id="xdocLastModification">Info on last modification of the doc </div>
</section>
<nav class="document-menu">
<div id="contentmenu" class="actionmenu">
Menu to use most features in relation to the content of a page.
<div id="tmEdit">Action link to edit the page</div>
<div id="tmCreate">Action link to create a child page</div>
<div id="tmMoreActions">Dropdown menu with various actions related to the page. </div>
</div>
</nav>
</div>
<div class="row">
<div id="xwikicontent">
Content of the XWiki page, main body.
</div>
</div>
</main>
<aside id="xdocFooter">
<div class="like-container">Contains the like displayer-button.</div>
<div id="xdocTags">Contains the tags associated to the page.</div>
<div id="xdocAuthors">
<div class="xdocCreation">Contains info relative to the page creation.</div>
</div>
</aside>
<aside id="xwikidata">
Tabs with advanced information and features: comments, attachments, history, information, ...
</aside>
</div>
</div>
<div id="leftPanels" class="panels left">
Left column containing the panels
</div>
</div>
<div id="rightPanels" class="panels right">
Right column containing the panels
</div>
</div>
</div>
<footer id="footerglobal">
Footer where you generally have the XWiki version and so on
<div id="xwikilicence"></div>
<div id="xwikiplatformversion"></div>
</footer>
</div>
</div>
Here are contained most of the "floating" elements of the UI, such as modals and dialog.
They are hidden by default and only activated on specific interactions.
</body>
</html>
<head>
</head>
<body id="body" class="${bodyAction}body content">
<div id="xwikimaincontainer">
<div id="xwikimaincontainerinner">
<div id="menuview">
<header class="navbar navbar-default actionmenu">
<div class="container-fluid">
<div class="navbar-header">
Leftmost part of the navbar
<div id="companylogo">
Company logo.
</div>
</div>
<div id="xwikimainmenu">
Everything in the navbar after the logo
<ul class="nav navbar-nav navbar-left">
Navbar items next to the logo. By default, this is empty.
</ul>
<ul class="nav navbar-nav navbar-right">
Navbar items in the top right corner, ordered from right to left.
This also contains the node with the drawer.
</ul>
</div>
</div>
</header>
</div>
<div id="headerglobal">
Still exists for backwards compatibility, but empty on a default flavor.
Used to contain Company logo and login/register links .
</div>
<div id="actionmenu" class="layoutsubsection">
Action bar with Edit, Show, Print, Delete
</div>
<div id="contentcontainer" class="content">
<div id="contentcontainerinner">
<div class="leftsidecolumns">
<div id="contentcolumn">
<div class="main">
Central column with the main content
<nav id="hierarchy_breadcrumb">
<ol id="hierarchy">
Contains the breadcumb that leads to this page.
</ol>
</nav>
<main id="mainContentArea" class="xcontent">
<div class="row document-header">
Document level header, between the breadcrumb and main content.
<section class="document-info">
Leftside, set of important information about the document.
<div id="document-title">Document title as the H1 of the page. </div>
<div id="xdocLastModification">Info on last modification of the doc </div>
</section>
<nav class="document-menu">
<div id="contentmenu" class="actionmenu">
Menu to use most features in relation to the content of a page.
<div id="tmEdit">Action link to edit the page</div>
<div id="tmCreate">Action link to create a child page</div>
<div id="tmMoreActions">Dropdown menu with various actions related to the page. </div>
</div>
</nav>
</div>
<div class="row">
<div id="xwikicontent">
Content of the XWiki page, main body.
</div>
</div>
</main>
<aside id="xdocFooter">
<div class="like-container">Contains the like displayer-button.</div>
<div id="xdocTags">Contains the tags associated to the page.</div>
<div id="xdocAuthors">
<div class="xdocCreation">Contains info relative to the page creation.</div>
</div>
</aside>
<aside id="xwikidata">
Tabs with advanced information and features: comments, attachments, history, information, ...
</aside>
</div>
</div>
<div id="leftPanels" class="panels left">
Left column containing the panels
</div>
</div>
<div id="rightPanels" class="panels right">
Right column containing the panels
</div>
</div>
</div>
<footer id="footerglobal">
Footer where you generally have the XWiki version and so on
<div id="xwikilicence"></div>
<div id="xwikiplatformversion"></div>
</footer>
</div>
</div>
Here are contained most of the "floating" elements of the UI, such as modals and dialog.
They are hidden by default and only activated on specific interactions.
</body>
</html>
List of ids used in the layout (generated automatically from the layout above)
- body
- xwikimaincontainer
- xwikimaincontainerinner
- menuview
- companylogo
- xwikimainmenu
- headerglobal
- actionmenu
- contentcontainer
- contentcontainerinner
- contentcolumn
- hierarchy_breadcrumb
- hierarchy
- mainContentArea
- document-title
- xdocLastModification
- contentmenu
- tmEdit
- tmCreate
- tmMoreActions
- xwikicontent
- xdocFooter
- xdocTags
- xdocAuthors
- xwikidata
- leftPanels
- rightPanels
- footerglobal
- xwikilicence
- xwikiplatformversion
List of classes used in the layout (generated automatically from the layout above)
- ${bodyAction}body content
- navbar navbar-default actionmenu
- container-fluid
- navbar-header
- nav navbar-nav navbar-left
- nav navbar-nav navbar-right
- layoutsubsection
- content
- leftsidecolumns
- main
- xcontent
- row document-header
- document-info
- document-menu
- actionmenu
- row
- like-container
- xdocCreation
- panels left
- panels right
Before 16.0.0
XWiki <16.0.0
<html>
<head>
</head>
<body id="body" class="viewbody">
<div id="xwikimaincontainer">
<div id="xwikimaincontainerinner">
<div id="headerglobal" class="layoutsection">
Company logo and login/register links
</div>
<div id="headerspace" class="layoutsection">
This is where you have the path of the page. eg.
XWiki: Administration > Preferences
</div>
<div id="actionmenu" class="layoutsubsection">
Action bar with Edit, Show, Print, Delete
</div>
<div id="contentcontainer" class="content">
<div id="contentcontainerinner">
<div class="leftsidecolumns">
<div id="contentcolumn">
Central column with the main content
<div id="xwikicontent">
Body
</div>
<div id="about">
Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46"
</div>
<div id="xwikidata">
<div id="commentscontent">
This is the area where you can add/edit comments
</div>
<div id="attachmentscontent">
This is the area where you can attach files
</div>
</div>
</div>
<div id="leftPanels" class="panels left">
Left column containing the panels
</div>
</div>
<div id="rightPanels" class="panels right">
Right column containing the panels
</div>
</div>
</div>
<div id="footerglobal" class="layoutsection">
Footer where you generally have the XWiki version and so on
</div>
</div>
</div>
<body>
</html>
<head>
</head>
<body id="body" class="viewbody">
<div id="xwikimaincontainer">
<div id="xwikimaincontainerinner">
<div id="headerglobal" class="layoutsection">
Company logo and login/register links
</div>
<div id="headerspace" class="layoutsection">
This is where you have the path of the page. eg.
XWiki: Administration > Preferences
</div>
<div id="actionmenu" class="layoutsubsection">
Action bar with Edit, Show, Print, Delete
</div>
<div id="contentcontainer" class="content">
<div id="contentcontainerinner">
<div class="leftsidecolumns">
<div id="contentcolumn">
Central column with the main content
<div id="xwikicontent">
Body
</div>
<div id="about">
Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46"
</div>
<div id="xwikidata">
<div id="commentscontent">
This is the area where you can add/edit comments
</div>
<div id="attachmentscontent">
This is the area where you can attach files
</div>
</div>
</div>
<div id="leftPanels" class="panels left">
Left column containing the panels
</div>
</div>
<div id="rightPanels" class="panels right">
Right column containing the panels
</div>
</div>
</div>
<div id="footerglobal" class="layoutsection">
Footer where you generally have the XWiki version and so on
</div>
</div>
</div>
<body>
</html>
