Wiki source code of CSS Layout

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

Hide line numbers

 1: 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.
 2: 
 3: {{code}}
 4: <html>
 5:   <head>
 6:   </head>
 7:   <body id="body" class="viewbody">
 8:     <div id="xwikimaincontainer">
 9:       <div id="xwikimaincontainerinner">
10: 
11:         <div id="headerglobal" class="layoutsection">
12:           Company logo and login/register links
13:         </div>
14: 
15:         <div id="headerspace" class="layoutsection">
16:           This is where you have the path of the page. eg.
17:           XWiki: Administration > Preferences  
18:         </div>
19: 
20:         <div id="actionmenu" class="layoutsubsection">
21:           Action bar with Edit, Show, Print, Delete
22:         </div>
23: 
24:         <div id="contentcontainer" class="content">
25:           <div id="contentcontainerinner">
26: 
27:             <div class="leftsidecolumns">
28:               <div id="contentcolumn">
29:                 Central column with the main content
30: 
31:                 <div id="xwikicontent">
32:                   Body
33:                 </div>
34: 
35:                 <div id="about">
36:                   Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46"
37:                 </div>
38: 
39:                 <div id="xwikidata">
40:                   <div id="commentscontent">
41:                     This is the area where you can add/edit comments
42:                   </div>
43:                   <div id="attachmentscontent">
44:                     This is the area where you can attach files
45:                   </div>
46:                 </div>
47:               </div>
48: 
49:               <div id="leftPanels" class="panels left">
50:                 Left column containing the panels
51:               </div>
52:             </div>
53: 
54:             <div id="rightPanels" class="panels right">
55:               Right column containing the panels
56:             </div>
57: 
58:           </div>
59:         </div>
60: 
61:         <div id="footerglobal" class="layoutsection">
62:           Footer where you generally have the XWiki version and so on
63:         </div>
64:       </div>
65:     </div>
66:   <body>
67: </html>
68: {{/code}}

Wiki source code of CSS Layout

Quick Links

Navigation

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected