Wiki source code of CSS Layout

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

version	line-number	content
3.1	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.1	2
6.5	3	== Since 16.0.0 ==
2.5	4
6.5	5	{{version since='16.0.0'}}
	6
3.4	7	{{velocity}}
	8	#set($layoutContent = '<html>
1.3	9	<head>
	10	</head>
6.5	11	<body id="body" class="${bodyAction}body content">
1.3	12	<div id="xwikimaincontainer">
	13	<div id="xwikimaincontainerinner">
3.1	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>
1.3	38	</div>
3.1	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 .
1.3	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">
3.1	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>
1.4	92	</div>
1.3	93	</div>
1.4	94
1.3	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
3.1	106	<footer id="footerglobal">
1.3	107	Footer where you generally have the XWiki version and so on
3.1	108	<div id="xwikilicence"></div>
	109	<div id="xwikiplatformversion"></div>
	110	</footer>
1.3	111	</div>
	112	</div>
5.3	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.
5.2	115	</body>
3.4	116	</html>')
	117
5.1	118	#set( $ids = $regextool.findAll($layoutContent,'id=\"(.*?)\"'))
	119	#set( $classes = $regextool.findAll($layoutContent,'class=\"(.*?)\"'))
3.4	120
	121	{{code language="html"}}
4.1	122	$layoutContent
	123	{{/code}}
3.4	124
5.1	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
3.4	134	{{/velocity}}
2.5	135
3.1	136
3.4	137
	138
	139
5.1	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}}
3.1	141
	142
6.5	143	== Before 16.0.0 ==
2.5	144
6.5	145	{{version before='16.0.0'}}
6.2	146
3.2	147	{{code language="html"}}
2.5	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}}

Wiki source code of CSS Layout

Quick Links

Navigation

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected