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}} |
