CSS Layout
Version 2.5 by Lucas Charpentier (Sereza7) on 2024/02/20
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 (with a left and right column) is roughly divided.
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>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>
<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>
<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>
