Many thanks for all the advise and tips Raluca!! I really appreciate that :-)
Best regards, Kaya On 30/08/2010 10:50, Raluca Stavro wrote: > 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 > _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users