Wiki source code of CSS Layout

Last modified by Lucas Charpentier (Sereza7) on 2024/02/22

Show last authors
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 is roughly divided. This layout is based on the view action of a standard page. Some actions and pages will have their own variations adding or removing some elements.
2
3 == Since 16.0.0 ==
4
5 {{version since='16.0.0'}}
6
7 {{velocity}}
8 #set($layoutContent = '<html>
9 <head>
10 </head>
11 <body id="body" class="${bodyAction}body content">
12 <div id="xwikimaincontainer">
13 <div id="xwikimaincontainerinner">
14 <div id="menuview">
15 <header class="navbar navbar-default actionmenu">
16 <div class="container-fluid">
17 <div class="navbar-header">
18 Leftmost part of the navbar
19 <div id="companylogo">
20 Company logo.
21 </div>
22 </div>
23
24 <div id="xwikimainmenu">
25 Everything in the navbar after the logo
26
27 <ul class="nav navbar-nav navbar-left">
28 Navbar items next to the logo. By default, this is empty.
29 </ul>
30
31 <ul class="nav navbar-nav navbar-right">
32 Navbar items in the top right corner, ordered from right to left.
33 This also contains the node with the drawer.
34 </ul>
35 </div>
36 </div>
37 </header>
38 </div>
39 <div id="headerglobal">
40 Still exists for backwards compatibility, but empty on a default flavor.
41 Used to contain Company logo and login/register links .
42 </div>
43
44 <div id="actionmenu" class="layoutsubsection">
45 Action bar with Edit, Show, Print, Delete
46 </div>
47
48 <div id="contentcontainer" class="content">
49 <div id="contentcontainerinner">
50 <div class="leftsidecolumns">
51 <div id="contentcolumn">
52 <div class="main">
53 Central column with the main content
54 <nav id="hierarchy_breadcrumb">
55 <ol id="hierarchy">
56 Contains the breadcumb that leads to this page.
57 </ol>
58 </nav>
59 <main id="mainContentArea" class="xcontent">
60 <div class="row document-header">
61 Document level header, between the breadcrumb and main content.
62 <section class="document-info">
63 Leftside, set of important information about the document.
64 <div id="document-title">Document title as the H1 of the page. </div>
65 <div id="xdocLastModification">Info on last modification of the doc </div>
66 </section>
67 <nav class="document-menu">
68 <div id="contentmenu" class="actionmenu">
69 Menu to use most features in relation to the content of a page.
70 <div id="tmEdit">Action link to edit the page</div>
71 <div id="tmCreate">Action link to create a child page</div>
72 <div id="tmMoreActions">Dropdown menu with various actions related to the page. </div>
73 </div>
74 </nav>
75 </div>
76 <div class="row">
77 <div id="xwikicontent">
78 Content of the XWiki page, main body.
79 </div>
80 </div>
81 </main>
82 <aside id="xdocFooter">
83 <div class="like-container">Contains the like displayer-button.</div>
84 <div id="xdocTags">Contains the tags associated to the page.</div>
85 <div id="xdocAuthors">
86 <div class="xdocCreation">Contains info relative to the page creation.</div>
87 </div>
88 </aside>
89 <aside id="xwikidata">
90 Tabs with advanced information and features: comments, attachments, history, information, ...
91 </aside>
92 </div>
93 </div>
94
95 <div id="leftPanels" class="panels left">
96 Left column containing the panels
97 </div>
98 </div>
99
100 <div id="rightPanels" class="panels right">
101 Right column containing the panels
102 </div>
103 </div>
104 </div>
105
106 <footer id="footerglobal">
107 Footer where you generally have the XWiki version and so on
108 <div id="xwikilicence"></div>
109 <div id="xwikiplatformversion"></div>
110 </footer>
111 </div>
112 </div>
113 Here are contained most of the "floating" elements of the UI, such as modals and dialog.
114 They are hidden by default and only activated on specific interactions.
115 </body>
116 </html>')
117
118 #set( $ids = $regextool.findAll($layoutContent,'id=\"(.*?)\"'))
119 #set( $classes = $regextool.findAll($layoutContent,'class=\"(.*?)\"'))
120
121 {{code language="html"}}
122 $layoutContent
123 {{/code}}
124
125 List of ids used in the layout (generated automatically from the layout above)
126 #foreach ($regexResult in $ids)
127 * $regexResult[1].getGroup()
128 #end
129
130 List of classes used in the layout (generated automatically from the layout above)
131 #foreach ($regexResult in $classes)
132 * $regexResult[1].getGroup()
133 #end
134 {{/velocity}}
135
136
137
138
139
140 {{info}} On the {{code}}body{{/code}} element, a number of classes are added that give information on the user preference, page state and wiki parameters. Those are used to provide conditional styling on the whole UI with only native CSS. {{todo}} Create a page that lists those classes. {{/todo}} {{/info}}
141
142
143 == Before 16.0.0 ==
144
145 {{version before='16.0.0'}}
146
147 {{code language="html"}}
148 <html>
149 <head>
150 </head>
151 <body id="body" class="viewbody">
152 <div id="xwikimaincontainer">
153 <div id="xwikimaincontainerinner">
154
155 <div id="headerglobal" class="layoutsection">
156 Company logo and login/register links
157 </div>
158
159 <div id="headerspace" class="layoutsection">
160 This is where you have the path of the page. eg.
161 XWiki: Administration > Preferences
162 </div>
163
164 <div id="actionmenu" class="layoutsubsection">
165 Action bar with Edit, Show, Print, Delete
166 </div>
167
168 <div id="contentcontainer" class="content">
169 <div id="contentcontainerinner">
170
171 <div class="leftsidecolumns">
172 <div id="contentcolumn">
173 Central column with the main content
174
175 <div id="xwikicontent">
176 Body
177 </div>
178
179 <div id="about">
180 Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46"
181 </div>
182
183 <div id="xwikidata">
184 <div id="commentscontent">
185 This is the area where you can add/edit comments
186 </div>
187 <div id="attachmentscontent">
188 This is the area where you can attach files
189 </div>
190 </div>
191 </div>
192
193 <div id="leftPanels" class="panels left">
194 Left column containing the panels
195 </div>
196 </div>
197
198 <div id="rightPanels" class="panels right">
199 Right column containing the panels
200 </div>
201
202 </div>
203 </div>
204
205 <div id="footerglobal" class="layoutsection">
206 Footer where you generally have the XWiki version and so on
207 </div>
208 </div>
209 </div>
210 <body>
211 </html>
212 {{/code}}

Get Connected