CSS Layout
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>
Version 1.5 last modified by VincentMassol on 23/04/2007 at 13:51
Document data
Attachments:
No attachments for this document
Comments: 0