Round Corner Colibri CSS

Last modified by Dmitry Bakbardin on 2013/11/24 10:49

cogCSS for Colibri for changing corner to a round style
TypeOther
Developed by

Dmitry Bakbardin

Rating
Rate!
0 Votes
LicenseGNU Lesser General Public License 2.1
Compatibility

Tested on 3.1, 2.7

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

Results

patchresults.png

Prerequisites & Installation Instructions

  1. 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

  1. 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. Add
    @import "$xwiki.getSkinFile('colibripatch.css', true)";
    to Style section.
    5. Save page
    6. Watch results.

OR

  1. 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. 

Tags: colibri CSS
Created by Dmitry Bakbardin on 2011/09/11 06:36
    

Get Connected