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>

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

 On the body element, a number of classes are added that give information on the user preference, page state and wiki parameters. Those are used to provide conditional styling on the whole UI with only native CSS. TODO

 Create a page that lists those classes. 
 

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>

Tags:
   

Get Connected