Wiki source code of CSS Layout
Version 4.1 by Lucas Charpentier (Sereza7) on 2024/02/21
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 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. They are hidden by default and only activated on specific interactions. | ||
| 112 | <body> | ||
| 113 | </html>') | ||
| 114 | |||
| 115 | #set( $ids = $regextool($layoutContent,"id=\"(.*?)\"")) | ||
| 116 | #set( $classes = $regextool($layoutContent,"class=\"(.*?)\"")) | ||
| 117 | |||
| 118 | {{code language="html"}} | ||
| 119 | $layoutContent | ||
| 120 | {{/code}} | ||
| 121 | |||
| 122 | {{/velocity}} | ||
| 123 | |||
| 124 | |||
| 125 | |||
| 126 | |||
| 127 | |||
| 128 | * 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}} | ||
| 129 | |||
| 130 | {{todo}}Create a table populated by a regex query that lists all id and classes defined in this layout.{{/todo}} | ||
| 131 | |||
| 132 | == {{version before='16.0.0'}} == | ||
| 133 | |||
| 134 | {{code language="html"}} | ||
| 135 | <html> | ||
| 136 | <head> | ||
| 137 | </head> | ||
| 138 | <body id="body" class="viewbody"> | ||
| 139 | <div id="xwikimaincontainer"> | ||
| 140 | <div id="xwikimaincontainerinner"> | ||
| 141 | |||
| 142 | <div id="headerglobal" class="layoutsection"> | ||
| 143 | Company logo and login/register links | ||
| 144 | </div> | ||
| 145 | |||
| 146 | <div id="headerspace" class="layoutsection"> | ||
| 147 | This is where you have the path of the page. eg. | ||
| 148 | XWiki: Administration > Preferences | ||
| 149 | </div> | ||
| 150 | |||
| 151 | <div id="actionmenu" class="layoutsubsection"> | ||
| 152 | Action bar with Edit, Show, Print, Delete | ||
| 153 | </div> | ||
| 154 | |||
| 155 | <div id="contentcontainer" class="content"> | ||
| 156 | <div id="contentcontainerinner"> | ||
| 157 | |||
| 158 | <div class="leftsidecolumns"> | ||
| 159 | <div id="contentcolumn"> | ||
| 160 | Central column with the main content | ||
| 161 | |||
| 162 | <div id="xwikicontent"> | ||
| 163 | Body | ||
| 164 | </div> | ||
| 165 | |||
| 166 | <div id="about"> | ||
| 167 | Something like "Version 1.2 last modified by XYZ on 23/04/2007 at 13:46" | ||
| 168 | </div> | ||
| 169 | |||
| 170 | <div id="xwikidata"> | ||
| 171 | <div id="commentscontent"> | ||
| 172 | This is the area where you can add/edit comments | ||
| 173 | </div> | ||
| 174 | <div id="attachmentscontent"> | ||
| 175 | This is the area where you can attach files | ||
| 176 | </div> | ||
| 177 | </div> | ||
| 178 | </div> | ||
| 179 | |||
| 180 | <div id="leftPanels" class="panels left"> | ||
| 181 | Left column containing the panels | ||
| 182 | </div> | ||
| 183 | </div> | ||
| 184 | |||
| 185 | <div id="rightPanels" class="panels right"> | ||
| 186 | Right column containing the panels | ||
| 187 | </div> | ||
| 188 | |||
| 189 | </div> | ||
| 190 | </div> | ||
| 191 | |||
| 192 | <div id="footerglobal" class="layoutsection"> | ||
| 193 | Footer where you generally have the XWiki version and so on | ||
| 194 | </div> | ||
| 195 | </div> | ||
| 196 | </div> | ||
| 197 | <body> | ||
| 198 | </html> | ||
| 199 | {{/code}} |
