On Tue, Aug 31, 2010 at 12:27 PM, Kaya Saman <kayasa...@gmail.com> wrote: > Many thanks for all the advise and tips Raluca!!
You're welcome! :) 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 > _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users