Skip to Content

CSS Layout

Version 4.1 by Lucas Charpentier (Sereza7) on 2024/02/21
Warning: For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

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.

XWiki 16.0.0+ 

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [xwiki:Documentation.DevGuide.Tutorials.Skins.CSSLayout.WebHome]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

  • 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. ErrorTODO
     Create a page that lists those classes. 
Error

TODO

Create a table populated by a regex query that lists all id and classes defined in this layout.

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>

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected