Hello, On Sat, Aug 28, 2010 at 4:21 PM, Kaya Saman <kayasa...@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.OverridingtheSkincomponents
$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.CreatingaSkindocument ) 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. > > 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, >> >> 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<kayasa...@gmail.com> wrote: >> >>> Thanks Lockie for the suggestion only the same thing is happening!! >>> >>> Firebug definitely shows the CSS alright but I alter what the screen is >>> telling and nothing happens even though Firebug reports the change after >>> a refresh.... >>> >>> The issue is that the CSS is quite complex and am no CSS expert meaning >>> that if things are dependent on certain criteria I won't be able to see it. >>> >>> Am back where I started I guess :-( >>> >>> Regards, >>> >>> Kaya >>> >>> >>> On 08/28/2010 03:51 AM, Lockie wrote: >>> >>>> 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 >>>> >>>> >>> _______________________________________________ >>> users mailing list >>> users@xwiki.org >>> http://lists.xwiki.org/mailman/listinfo/users >>> >>> >> _______________________________________________ >> users mailing list >> users@xwiki.org >> http://lists.xwiki.org/mailman/listinfo/users >> > > _______________________________________________ > users mailing list > users@xwiki.org > http://lists.xwiki.org/mailman/listinfo/users > _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users