Hi Kaya, While I haven't worked with Toucan skin before, the easiest way to edit the .css file of any skin is to get the Firebug addon for the Firefox browser. Then its just a matter clicking on the html in the main panel, and seeing what css is related to which part of the skin in the right panel. http://getfirefox.com/ http://getfirebug.com/ Hope that helps, Lockie -- View this message in context: http://xwiki.475771.n2.nabble.com/Help-needed-with-customizing-of-Toucan-sk… Sent from the XWiki- Users mailing list archive at Nabble.com.

Hello, I tend to think that your CSS selectors are not specific enough. See http://www.w3.org/TR/CSS2/cascade.html . You have to make sure that your CSS rules are taken in account after the default XWiki CSS rules (ex: CSS StyleSheet linked in the header after the default ones that contain the rules that you want to change => this can be done by using skin extensions http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial ) and you have to make sure that your selector's specificity is correct. Raluca. On Sat, Aug 28, 2010 at 9:38 AM, Kaya Saman <kayasaman(a)gmail.com> wrote:

Ok I actually managed to sort this out.... First up I played around with the style.css file and used the @include statement to include the css for the red background just to try out. I then created a new css style sheet called bg-mod.css under /usr/local/apache-tomcat-6.0/webapps/xwiki/skins/toucan/css/colors in my FreeBSD jail which has this content: body#body, #allviewpanels .accordionTabContentBox{background-image: url( ../../images/colors/gray/H4x4-GRAY.png); } body#body #xwikimaincontainer, body.hideright #xwikimaincontainer, body#body.hideright #xwikimaincontainerinner, body.importbody #xwikimaincontainerinner, body.exportbody #xwikimaincontainerinner, body.adminbody #xwikimaincontainerinner, body.hidelefthideright #xwikimaincontainerinner, body#body.hidelefthideright #xwikimaincontainerinner { background-image :url( ../../images/colors/bg/gpl.png) ; } #xwikimaincontainerinner, body#body.editbody #xwikimaincontainerinner, body#body.eportbody #xwikimaincontainer, body#body.importbody #xwikimaincontainer, body#body.adminbody #xwikimaincontainer, body#body.hidelefthideright #xwikimaincontainer, body#body.hideleft #xwikimaincontainer, body#body.editbody #xwikimaincontainer { background-image :url( ../../images/colors/bg/gpl_right.png) ;} body#body.editbody #globallinks, #globallinks, #rightPanels, #editPanels.panels{ background-image: url( ../../images/colors/bg/gpl.png);} #company { background-image: url( ../../images/colors/bg/gpl.png); } I then created the subdir under images/colors called bg and uploaded some files into it. My style.css file now looks like so: @import "microformats.css"; @import "toucan.css"; @import "css/colors/bg-mod.css"; After that was done and tested I edited the toucan.css file generating this code: #companylogo { padding: 0; ###background-color: #FFF; ###background-color: #666; background-color: #transparent; margin-right: 220px; ###margin-right: 0px; height: 80px; ###background-image: url($xwiki.getSkinFile("sunv210mod.png")); } What seems to not have been working is the url($xwiki.getSkinFile("sunv210mod.png") line I got from here: http://platform.xwiki.org/xwiki/bin/view/DevGuide/Skins#HD.OverridingtheSki… I mean either it does work or I just don't know how to use it but never the less what I wanted to achieve is done to an extent :-) Thanks for all the help and regards, Kaya On 08/28/2010 11:32 AM, Raluca Stavro wrote:

Hello, On Sat, Aug 28, 2010 at 4:21 PM, Kaya Saman <kayasaman(a)gmail.com> wrote: $xwiki.getSkinFile("sunv210mod.png") searches the image file like this : 1. in the current skin 1.1 in the specified Skin Document ( http://platform.xwiki.org/xwiki/bin/view/DevGuide/Skins#HA.CreatingaSkindoc… ) 1.2 if no success, in the '/skins/myskin/' directory (in your case: '/skins/toucan/') 1.3 if no success, in the '/resources/' directory 2. if no success, in the parent skin (if the current skin is a Skin Document and has set a parent skin) 3. if no success, in the default base skin directory (the one set it 'xwiki.cfg') So, do like you did with the other images - put it under the '/bg/' directory and use a relative path for the url: #companylogo { background-image: url(../../images/colors/bg/sunv210mod.png); } or attach the image to the current Skin Document. Raluca.

On Tue, Aug 31, 2010 at 12:27 PM, Kaya Saman <kayasaman(a)gmail.com> wrote: You're welcome! :) Raluca.