Round Corner Colibri CSS
Last modified by Dmitry Bakbardin on 2024/07/05 18:10
 | CSS for Colibri for changing corner to a round style |
| Type | Other |
| Category | |
| Developed by | |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
| Compatibility | Tested on 3.1, 2.7 |
Table of contents
Description
If somebody gets bored of the default Colibri "squared" style, you can easily make it "round" with this extension. Just use following custom CSS in your Colibri-based skin:
/* Author: Dmitry Bakbardin
License: LGPL
*/
@import "$xwiki.getSkinFile('../skins/colibri/colibri.css', true)";
/* Round TOP */
#mainmenu {
border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
}
#contentmenu, #docExtraTabs, .xwikitabbar, #editmenu, h1.xwikipaneltitle {
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
}
.xwikitabbar li a, .xwikitabbar li.active a, #tmAnnotations { /* All Tabs (NON-Acive + Active Tabs) round corners */
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
/* Round BOTTOM */
#footerglobal {
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-radius: 0px 0px 15px 15px;
}
#xdocFooter, #docextrapanes, .xwikipanelcontents, #mainEditArea { /* #docextrapanes - Content Area for "tabs content" */
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
}
/* Round TOP-BOTTOM */
#xwikimaincontainerinner {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.actionmenu .tmCreate, .submenu, .button, .commentcontainer, #globallinks, .xdialog-box, .panel { /* .actionmenu .tmCreate - menu item "Create" */
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
/* Shadows */
#mainContentArea, #mainEditArea, .xwikipanelcontents, #docextrapanes, #xdocFooter { /* Inner shadow in content area */
-webkit-box-shadow: inset 0 0px 1px #000;
-moz-box-shadow: inset 0 0px 1px #000;
box-shadow: inset 0 0px 1px #000;
}
.button, .submenu {
-webkit-box-shadow: 1px 1px 1px #000;
-moz-box-shadow: 1px 1px 1px #000;
box-shadow: 1px 1px 1px #000;
}
input.button {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.actionmenu .tmCreate, .submenu, #globallinks {
-webkit-box-shadow: inset 0 0px 2px #ffffff;
-moz-box-shadow: inset 0 0px 2px #ffffff;
box-shadow: inset 0 0px 2px #ffffff;
}
.xwikitabbar li a { /* All Tabs "Comments", "Annotations" etc. */
-webkit-box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
-moz-box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
}
License: LGPL
*/
@import "$xwiki.getSkinFile('../skins/colibri/colibri.css', true)";
/* Round TOP */
#mainmenu {
border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
}
#contentmenu, #docExtraTabs, .xwikitabbar, #editmenu, h1.xwikipaneltitle {
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
}
.xwikitabbar li a, .xwikitabbar li.active a, #tmAnnotations { /* All Tabs (NON-Acive + Active Tabs) round corners */
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
/* Round BOTTOM */
#footerglobal {
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-radius: 0px 0px 15px 15px;
}
#xdocFooter, #docextrapanes, .xwikipanelcontents, #mainEditArea { /* #docextrapanes - Content Area for "tabs content" */
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
}
/* Round TOP-BOTTOM */
#xwikimaincontainerinner {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.actionmenu .tmCreate, .submenu, .button, .commentcontainer, #globallinks, .xdialog-box, .panel { /* .actionmenu .tmCreate - menu item "Create" */
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
/* Shadows */
#mainContentArea, #mainEditArea, .xwikipanelcontents, #docextrapanes, #xdocFooter { /* Inner shadow in content area */
-webkit-box-shadow: inset 0 0px 1px #000;
-moz-box-shadow: inset 0 0px 1px #000;
box-shadow: inset 0 0px 1px #000;
}
.button, .submenu {
-webkit-box-shadow: 1px 1px 1px #000;
-moz-box-shadow: 1px 1px 1px #000;
box-shadow: 1px 1px 1px #000;
}
input.button {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.actionmenu .tmCreate, .submenu, #globallinks {
-webkit-box-shadow: inset 0 0px 2px #ffffff;
-moz-box-shadow: inset 0 0px 2px #ffffff;
box-shadow: inset 0 0px 2px #ffffff;
}
.xwikitabbar li a { /* All Tabs "Comments", "Annotations" etc. */
-webkit-box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
-moz-box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
}
Results
Prerequisites & Installation Instructions
- Edit skin page you use. For default skin: XWiki.Default page. Use Administration application in default page set or use direct link http://localhost:8080/xwiki/bin/edit/XWiki/DefaultSkin?editor=object&classname=XWiki.XWikiSkins
2. Copy abovementioned CSS code and paste it in Style section.
3. Save document
4. Have fun
PS. If you don't like "shadows" - just remove Shadows section and get flat-styled variant. Feel free to play with numbers also.
OR
- Save this code in a file, e.g. colibripatch.css
2. Attach it to the skin page.
3. Enter edit mode for skin page as shown above.
4. Addto Style section.@import "$xwiki.getSkinFile('colibripatch.css', true)";
5. Save page
6. Watch results.
OR
- Just append following code to /skins/colibri/colibri.css file.
In this case it will affect XWiki globally: both main wiki and all virtual wikies (if you use XEM).
First two ways will have effect only in a local wiki.
