Wiki source code of CSS Layout
Version 2.5 by Lucas Charpentier (Sereza7) on 2024/02/20
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 | == {{version since='16.0.0'}} == | ||
| 4 | |||
| 5 | {{code}} | ||
| 6 | <html> | ||
| 7 | <head> | ||
| 8 | </head> | ||
| 9 | <body id="body" class="viewbody"> | ||
| 10 | <div id="xwikimaincontainer"> | ||
| 11 | <div id="xwikimaincontainerinner"> | ||
| 12 | |||
| 13 | <div id="headerglobal" class="layoutsection"> | ||
| 14 | Company logo and login/register links | ||
| 15 | </div> | ||
| 16 | |||
| 17 | <div id="headerspace" class="layoutsection"> | ||
| 18 | This is where you have the path of the page. eg. | ||
| 19 | XWiki: Administration > Preferences | ||
| 20 | </div> | ||
| 21 | |||
| 22 | <div id="actionmenu" class="layoutsubsection"> | ||
| 23 | Action bar with Edit, Show, Print, Delete | ||
| 24 | </div> | ||
| 25 | |||
| 26 | <div id="contentcontainer" class="content"> | ||
| 27 | <div id="contentcontainerinner"> | ||
| 28 | |||
| 29 | <div class="leftsidecolumns"> | ||
| 30 | <div id="contentcolumn"> | ||
| 31 | Central column with the main content | ||
| 32 | |||
| 33 | <div id="xwikicontent"> | ||
| 34 | Body | ||
| 35 | </div> | ||
| 36 | |||
| 37 | <div id="about"> | ||
| 38 | Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46" | ||
| 39 | </div> | ||
| 40 | |||
| 41 | <div id="xwikidata"> | ||
| 42 | <div id="commentscontent"> | ||
| 43 | This is the area where you can add/edit comments | ||
| 44 | </div> | ||
| 45 | <div id="attachmentscontent"> | ||
| 46 | This is the area where you can attach files | ||
| 47 | </div> | ||
| 48 | </div> | ||
| 49 | </div> | ||
| 50 | |||
| 51 | <div id="leftPanels" class="panels left"> | ||
| 52 | Left column containing the panels | ||
| 53 | </div> | ||
| 54 | </div> | ||
| 55 | |||
| 56 | <div id="rightPanels" class="panels right"> | ||
| 57 | Right column containing the panels | ||
| 58 | </div> | ||
| 59 | |||
| 60 | </div> | ||
| 61 | </div> | ||
| 62 | |||
| 63 | <div id="footerglobal" class="layoutsection"> | ||
| 64 | Footer where you generally have the XWiki version and so on | ||
| 65 | </div> | ||
| 66 | </div> | ||
| 67 | </div> | ||
| 68 | <body> | ||
| 69 | </html> | ||
| 70 | {{/code}} | ||
| 71 | |||
| 72 | == {{version before='16.0.0'}} == | ||
| 73 | |||
| 74 | {{code}} | ||
| 75 | <html> | ||
| 76 | <head> | ||
| 77 | </head> | ||
| 78 | <body id="body" class="viewbody"> | ||
| 79 | <div id="xwikimaincontainer"> | ||
| 80 | <div id="xwikimaincontainerinner"> | ||
| 81 | |||
| 82 | <div id="headerglobal" class="layoutsection"> | ||
| 83 | Company logo and login/register links | ||
| 84 | </div> | ||
| 85 | |||
| 86 | <div id="headerspace" class="layoutsection"> | ||
| 87 | This is where you have the path of the page. eg. | ||
| 88 | XWiki: Administration > Preferences | ||
| 89 | </div> | ||
| 90 | |||
| 91 | <div id="actionmenu" class="layoutsubsection"> | ||
| 92 | Action bar with Edit, Show, Print, Delete | ||
| 93 | </div> | ||
| 94 | |||
| 95 | <div id="contentcontainer" class="content"> | ||
| 96 | <div id="contentcontainerinner"> | ||
| 97 | |||
| 98 | <div class="leftsidecolumns"> | ||
| 99 | <div id="contentcolumn"> | ||
| 100 | Central column with the main content | ||
| 101 | |||
| 102 | <div id="xwikicontent"> | ||
| 103 | Body | ||
| 104 | </div> | ||
| 105 | |||
| 106 | <div id="about"> | ||
| 107 | Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46" | ||
| 108 | </div> | ||
| 109 | |||
| 110 | <div id="xwikidata"> | ||
| 111 | <div id="commentscontent"> | ||
| 112 | This is the area where you can add/edit comments | ||
| 113 | </div> | ||
| 114 | <div id="attachmentscontent"> | ||
| 115 | This is the area where you can attach files | ||
| 116 | </div> | ||
| 117 | </div> | ||
| 118 | </div> | ||
| 119 | |||
| 120 | <div id="leftPanels" class="panels left"> | ||
| 121 | Left column containing the panels | ||
| 122 | </div> | ||
| 123 | </div> | ||
| 124 | |||
| 125 | <div id="rightPanels" class="panels right"> | ||
| 126 | Right column containing the panels | ||
| 127 | </div> | ||
| 128 | |||
| 129 | </div> | ||
| 130 | </div> | ||
| 131 | |||
| 132 | <div id="footerglobal" class="layoutsection"> | ||
| 133 | Footer where you generally have the XWiki version and so on | ||
| 134 | </div> | ||
| 135 | </div> | ||
| 136 | </div> | ||
| 137 | <body> | ||
| 138 | </html> | ||
| 139 | {{/code}} |
