Wiki source code of CSS Layout
Last modified by Ecaterina Moraru (Valica) on 2017/09/06
Show last authors
author | version | line-number | content |
---|---|---|---|
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}} |