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
