From version 15.2
To version < 16.1
edited by Dmitry Bakbardin
on 2013/11/24 10:49
Change comment: There is no comment for this version

Summary

Details

Page properties
Parent
... ... @@ -1,0 +1,1 @@
1 +Extension.WebHome
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.XWikiGuest
1 +xwiki:XWiki.Haru
Default language
... ... @@ -1,0 +1,1 @@
1 +en
Tags
... ... @@ -1,0 +1,1 @@
1 +colibri|CSS
Content
patchresults.png
Author
... ... @@ -1,0 +1,1 @@
1 +xwiki:XWiki.Haru
Size
... ... @@ -1,0 +1,1 @@
1 +85.0 KB
Content
EXOExtensionCode.ExtensionClass[0]
Compatibility
... ... @@ -1,0 +1,1 @@
1 +Tested on 3.1, 2.7
ExtensionCode.ExtensionClass[0]
Description
... ... @@ -1,0 +1,94 @@
1 +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:
2 +
3 +{{code language="css"}}
4 +/* Author: Dmitry Bakbardin
5 + License: LGPL
6 +*/
7 +
8 [email protected] "$xwiki.getSkinFile('../skins/colibri/colibri.css', true)";
9 +
10 + /* Round TOP */
11 +
12 +#mainmenu {
13 + border-radius: 15px 15px 0px 0px;
14 + -moz-border-radius: 15px 15px 0px 0px;
15 + -webkit-border-radius: 15px 15px 0px 0px;
16 +}
17 +
18 +#contentmenu, #docExtraTabs, .xwikitabbar, #editmenu, h1.xwikipaneltitle {
19 + border-radius: 10px 10px 0px 0px;
20 + -moz-border-radius: 10px 10px 0px 0px;
21 + -webkit-border-radius: 10px 10px 0px 0px;
22 +}
23 +
24 +.xwikitabbar li a, .xwikitabbar li.active a, #tmAnnotations { /* All Tabs (NON-Acive + Active Tabs) round corners */
25 + border-radius: 5px 5px 0px 0px;
26 + -moz-border-radius: 5px 5px 0px 0px;
27 + -webkit-border-radius: 5px 5px 0px 0px;
28 +}
29 +
30 + /* Round BOTTOM */
31 +
32 +#footerglobal {
33 + border-radius: 0px 0px 15px 15px;
34 + -moz-border-radius: 0px 0px 15px 15px;
35 + -webkit-border-radius: 0px 0px 15px 15px;
36 +}
37 +
38 +#xdocFooter, #docextrapanes, .xwikipanelcontents, #mainEditArea { /* #docextrapanes - Content Area for "tabs content" */
39 + border-radius: 0px 0px 10px 10px;
40 + -moz-border-radius: 0px 0px 10px 10px;
41 + -webkit-border-radius: 0px 0px 10px 10px;
42 +}
43 +
44 + /* Round TOP-BOTTOM */
45 +
46 +#xwikimaincontainerinner {
47 + border-radius: 20px;
48 + -moz-border-radius: 20px;
49 + -webkit-border-radius: 20px;
50 +}
51 +
52 +.actionmenu .tmCreate, .submenu, .button, .commentcontainer, #globallinks, .xdialog-box, .panel { /* .actionmenu .tmCreate - menu item "Create" */
53 + border-radius: 15px;
54 + -moz-border-radius: 15px;
55 + -webkit-border-radius: 15px;
56 +}
57 +
58 +
59 + /* Shadows */
60 +
61 +#mainContentArea, #mainEditArea, .xwikipanelcontents, #docextrapanes, #xdocFooter { /* Inner shadow in content area */
62 + -webkit-box-shadow: inset 0 0px 1px #000;
63 + -moz-box-shadow: inset 0 0px 1px #000;
64 + box-shadow: inset 0 0px 1px #000;
65 +}
66 +
67 +.button, .submenu {
68 + -webkit-box-shadow: 1px 1px 1px #000;
69 + -moz-box-shadow: 1px 1px 1px #000;
70 + box-shadow: 1px 1px 1px #000;
71 +}
72 +
73 +input.button {
74 + -webkit-box-shadow: none;
75 + -moz-box-shadow: none;
76 + box-shadow: none;
77 +}
78 +
79 +.actionmenu .tmCreate, .submenu, #globallinks {
80 + -webkit-box-shadow: inset 0 0px 2px #ffffff;
81 + -moz-box-shadow: inset 0 0px 2px #ffffff;
82 + box-shadow: inset 0 0px 2px #ffffff;
83 +}
84 +
85 +.xwikitabbar li a { /* All Tabs "Comments", "Annotations" etc. */
86 + -webkit-box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
87 + -moz-box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
88 + box-shadow: inset 0px 1px 1px #FFFFFF, 0 0 2px #000;
89 +}
90 +{{/code}}
91 +
92 += Results =
93 +
94 +[[[[image:patchresults.png||style="display: block; margin-left: auto; margin-right: auto;" width="860"]]>>attach:patchresults.png||rel="__blank"]]
Type
... ... @@ -1,0 +1,1 @@
1 +other
Only Custom Installation instructions
... ... @@ -1,0 +1,1 @@
1 +No
Prerequisites & Additional Installation Instructions
... ... @@ -1,0 +1,26 @@
1 +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 +2. Copy abovementioned CSS code and paste it in ##Style## section.
3 +3. Save document
4 +4. Have fun
5 +
6 +PS. If you don't like "shadows" - just remove **Shadows** section and get flat-styled variant. Feel free to play with numbers also.
7 +
8 +**OR**
9 +
10 +1. Save this code in a file, e.g. ##colibripatch.css##
11 +2. Attach it to the skin page.
12 +3. Enter edit mode for skin page as shown above.
13 +4. Add(((
14 +{{code}}
15 [email protected] "$xwiki.getSkinFile('colibripatch.css', true)";
16 +{{/code}}
17 +)))to ##Style## section.
18 +5. Save page
19 +6. Watch results.
20 +
21 +**OR**
22 +
23 +1. Just append following code to ## /skins/colibri/colibri.css ## file.
24 +In this case it will affect XWiki globally: both main wiki and all virtual wikies (if you use XEM).
25 +
26 +First two ways will have effect only in a local wiki.
Summary
... ... @@ -1,0 +1,1 @@
1 +CSS for Colibri for changing corner to a round style
License Name
... ... @@ -1,0 +1,1 @@
1 +GNU Lesser General Public License 2.1
license
... ... @@ -1,0 +1,1 @@
1 +LGPL
Name
... ... @@ -1,0 +1,1 @@
1 +Round Corner Colibri CSS
contributors
... ... @@ -1,0 +1,1 @@
1 +Dmitry Bakbardin
compatibility
... ... @@ -1,0 +1,1 @@
1 +Tested on 3.1, 2.7
Authors
... ... @@ -1,0 +1,1 @@
1 +xwiki:XWiki.Haru
XWiki.XWikiComments[0]
Date
... ... @@ -1,0 +1,1 @@
1 +2011-09-19 12:18:02.0
Author
... ... @@ -1,0 +1,1 @@
1 +xwiki:XWiki.MaximeSinclair
Comment
... ... @@ -1,0 +1,1 @@
1 +Works fine with xwiki 2.7. Thanks for the good job Dmitry.
XWiki.XWikiComments[1]
Date
... ... @@ -1,0 +1,1 @@
1 +2011-09-19 13:02:50.0
Author
... ... @@ -1,0 +1,1 @@
1 +xwiki:XWiki.Haru
Reply To
... ... @@ -1,0 +1,1 @@
1 +0
Comment
... ... @@ -1,0 +1,1 @@
1 +Welcome! :-)

null

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

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. 

Get Connected