Alternative Page Layout For Colibri
Last modified by Manuel Leduc on 2023/10/10 16:44
 | Alternative page layout for the colibri skin |
| Type | Snippet |
| Category | |
| Developed by | |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
Description
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.
#template('colorThemeInit.vm')
/*-------------------------------------*/
/* 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;
}
/*-------------------------------------*/
/* 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;
}
Before:
After:
"Patch" for using this menu with the Annotation Module
#template('colorThemeInit.vm')
/* 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 #tmAnnotations.active {
border-color: $theme.menuBackgroundColor;
}
/* 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 #tmAnnotations.active {
border-color: $theme.menuBackgroundColor;
}
