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.

<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:
Created by Ecaterina Moraru (Valica) on 2017/09/06
   

Get Connected