CSS Layout (XWiki.org)

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

== {{version since='16.0.0'}} ==

4

5

6

#set($layoutContent = '<html>

<head>

</head>

Leftmost part of the navbar

Company logo.

</div>

</div>

Everything in the navbar after the logo

24

25

26

Navbar items next to the logo. By default, this is empty.

</ul>

Navbar items in the top right corner, ordered from right to left.

31

This also contains the node with the drawer.

</ul>

</div>

</div>

</header>

</div>

Still exists for backwards compatibility, but empty on a default flavor.

39

Used to contain Company logo and login/register links .

</div>

Action bar with Edit, Show, Print, Delete

</div>

Central column with the main content

52

53

54

Contains the breadcumb that leads to this page.

</ol>

</nav>

Document level header, between the breadcrumb and main content.

60

61

Leftside, set of important information about the document.

62

<div id="document-title">Document title as the H1 of the page. </div>

63

<div id="xdocLastModification">Info on last modification of the doc </div>

</section>

Menu to use most features in relation to the content of a page.

68

<div id="tmEdit">Action link to edit the page</div>

69

<div id="tmCreate">Action link to create a child page</div>

70

<div id="tmMoreActions">Dropdown menu with various actions related to the page. </div>

</div>

</nav>

</div>

Content of the XWiki page, main body.

</div>

</div>

</main>

<div class="like-container">Contains the like displayer-button.</div>

82

<div id="xdocTags">Contains the tags associated to the page.</div>

83

84

<div class="xdocCreation">Contains info relative to the page creation.</div>

</div>

</aside>

Tabs with advanced information and features: comments, attachments, history, information, ...

</aside>

</div>

</div>

Left column containing the panels

</div>

</div>

Right column containing the panels

</div>

</div>

</div>

Footer where you generally have the XWiki version and so on

</footer>

</div>

</div>

Here are contained most of the "floating" elements of the UI, such as modals and dialog.

112

They are hidden by default and only activated on specific interactions.

</body>

</html>')

#set( $ids = $regextool.findAll($layoutContent,'id=\"(.*?)\"'))

117

#set( $classes = $regextool.findAll($layoutContent,'class=\"(.*?)\"'))

$layoutContent

List of ids used in the layout (generated automatically from the layout above)

124

#foreach ($regexResult in $ids)

125

* $regexResult[1].getGroup()

126

#end

127

128

List of classes used in the layout (generated automatically from the layout above)

129

#foreach ($regexResult in $classes)

130

* $regexResult[1].getGroup()

#end

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

139

140

141

== {{version before='16.0.0'}} ==

<html>

<head>

</head>

Company logo and login/register links

</div>

This is where you have the path of the page. eg.

157

XWiki: Administration > Preferences

</div>

Action bar with Edit, Show, Print, Delete

</div>

Central column with the main content

Body

</div>

Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46"

</div>

This is the area where you can add/edit comments

182

</div>

183

184

This is the area where you can attach files

</div>

</div>

</div>

Left column containing the panels

</div>

</div>

Right column containing the panels

</div>

</div>

</div>

Footer where you generally have the XWiki version and so on

</div>

</div>

</div>

<body>

</html>

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

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