Wiki source code of CSS Layout
Version 1.4 by agoncal on 2007/04/23
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 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} |
