CSS Layout

Last modified by Ecaterina Moraru (Valica) on 2017/09/06

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.

 <body id="body" class="viewbody">
   <div id="xwikimaincontainer">
     <div id="xwikimaincontainerinner">

       <div id="headerglobal" class="layoutsection">
         Company logo and login/register links

       <div id="headerspace" class="layoutsection">
         This is where you have the path of the page. eg.
         XWiki: Administration > Preferences  

       <div id="actionmenu" class="layoutsubsection">
         Action bar with Edit, Show, Print, Delete

       <div id="contentcontainer" class="content">
         <div id="contentcontainerinner">

           <div class="leftsidecolumns">
             <div id="contentcolumn">
               Central column with the main content

               <div id="xwikicontent">

               <div id="about">
                 Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46"

               <div id="xwikidata">
                 <div id="commentscontent">
                   This is the area where you can add/edit comments
                 <div id="attachmentscontent">
                   This is the area where you can attach files

             <div id="leftPanels" class="panels left">
               Left column containing the panels

           <div id="rightPanels" class="panels right">
             Right column containing the panels


       <div id="footerglobal" class="layoutsection">
         Footer where you generally have the XWiki version and so on

Get Connected