Alternative Page Layout For Colibri

Last modified by Thomas Mortagne on 2021/03/18 11:28

layout_contentAlternative page layout for the colibri skin
Developed by

Marta Girdea

0 Votes
LicenseGNU Lesser General Public License 2.1


This snippet is some CSS + velocity code that you can paste in a StyleSheetExtension object attached to a document, in order to create a different page layout from the default Colibri one:

  • page header with the same width as the page content
  • action menu (edit, export, more actions, watch) as an icons-only toolbox at the top-right corner of the page content section.

Make sure that the field "Parse content" of the StyleSheetExtension object is set to "Yes", to allow the interpretation of the velocity code.


/* Header as narrow as the content     */
#headerglobal {
 width: auto;
 margin: 0 225px 2px;
body.hideleft #headerglobal, body.hidelefthideright #headerglobal, body.editbody #headerglobal {
 margin-left: 25px;
body.hideright #headerglobal, body.hidelefthideright #headerglobal {
 margin-right: 25px;

/* Fix the edit layout inconsistency */
.alleditcontent {
 margin-left: 25px;

/* Smaller spacing around breadcrumbs  */
#hierarchy {
 padding: 0;
 margin-top: -10px;
/* On breadcrumbs, force the "informative text color", which is usually less contrasting */
#hierarchy a {
 color: $theme.textPrimaryColor !important;

/* Content Menu                        */

/* New icons */
#contentmenu .hasIcon {
 background-position: 3px 3px;
#tmEdit {
 background-image: url($xwiki.getSkinFile('icons/silk/pencil.gif'));
#tmExport {
 background: transparent url($xwiki.getSkinFile('icons/silk/package_go.gif')) 3px 3px no-repeat;
#tmMoreActions {
 background: transparent url($xwiki.getSkinFile('icons/silk/cog.gif')) 3px 3px no-repeat;

/* Everything in the menu goes to the right */
#contentmenu .leftmenu,  #contentmenu .rightmenu {
 padding: 0;
 float: right !important;
 position: relative;
 left: auto;
 right: auto;
#contentmenu .rightmenu {
 margin-right: 17px;
/* IE6 and IE7 are such a mess... */
/* WARNING: if for some reason there's more than one entry in the right menu,
   the width of the rightmenu needs to be changed accordingly. */

* html #contentmenu .rightmenu {
 width: 25px !important;
 margin-right: 4px;
*+html #contentmenu .rightmenu {
 width: 25px !important;
* html #contentmenu .rightmenu .topmenuentry {
 width: 25px;
 display: inline;

/* No texts */
#contentmenu .topmenuentry a.tme {
 text-indent: -9999px;
 width: 16px;
 height: 22px;
 padding-left: 0px;
/* For the "special" IE6 box model */
* html #contentmenu .topmenuentry a.tme {
 width: 26px;
/* Colorize on hover */
#contentmenu .topmenuentry:hover {
 color: $theme.menuLinkColor;
 background-color: $theme.menuBackgroundColor;
/* Align the submenu properly, accordingly with the new entry spacing */
#contentmenu .submenu {
 margin-left: 10px;
 padding-left: 3px;

/* Positioning: on the right, "inside" the title box, no more blue bar */
#contentmenu {
 background: $theme.pageContentBackgroundColor;
 color: $theme.textColor;

/* IE6 again...*/
* html #contentmenu {
 display: inline; /* the double margin bug */
 width: auto; /* for some reason, "float: right" is not enough */

/* Also reset the menu arrow color and spacing */
#contentmenu .menuarrow {
 color: inherit;
 margin-right: 0;
/* IE6 displays huge, misplaced arrows */
/* Also, "color: inherit" is unknown to IE6 and IE7 */
* html #contentmenu .menuarrow {
 font-size: 60%;
 margin-left: -4px;
 padding-right: 4px;
 color: $theme.textColor;
*+html #contentmenu .menuarrow {
 color: $theme.textColor;






"Patch" for using this menu with the Annotation Module

/* Recompute the right menu width */
* html #contentmenu .rightmenu {
 width: 56px !important;
*+html #contentmenu .rightmenu {
 width: 54px !important;

/* "Close" the border of the settings panel  */
.annotationsettings {
 border-top: 2px solid $theme.menuBackgroundColor;
/* Align the annotations icon with the others
   and put a border around it when active,
   to delimit the sone containing this icon
   and the settings panel.
   The border is "invisible" when inactive.*/

.actionmenu #tmAnnotations {
 margin-top: 0 !important;
 margin-right: 0 !important;
 padding-right: 0 !important;
 padding-bottom: 0 !important;
 background-position: 3px 1px;
 border: 2px solid $theme.pageContentBackgroundColor;
 border-bottom: none;
.actionmenu {
 border-color: $theme.menuBackgroundColor;

Get Connected