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

Get Connected