Re: [xwiki-users] Help needed with customizing of Toucan skin
On Tue, Aug 31, 2010 at 12:27 PM, Kaya Saman 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 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 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
Re: [xwiki-users] Help needed with customizing of Toucan skin
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 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 Samanwrote:
>>>
>>>
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:
Re: [xwiki-users] Help needed with customizing of Toucan skin
Hello,
On Sat, Aug 28, 2010 at 4:21 PM, Kaya Saman 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 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/
>>>
Re: [xwiki-users] Help needed with customizing of Toucan skin
Hi,
On Sat, Aug 28, 2010 at 12:06 PM, Kaya Saman wrote:
> Thanks very much for the advise and the links.
>
> I read through them and now understand a bit more!!
>
> However, since I attempted to customize the basic toucan.css file by
> commenting out the old image code and adding new image code in. Eg:
>
> body {
> font-size: 87.5%; /* 10px */
> font-family: sans-serif;
> color: #222;
> width: 100%;
> padding: 0;
> margin: 0;
> min-width: 970px;
> ###background-image: url( images/colors/gray/H4x4-GRAY.png );
This is not the way CSS comments work. Because of the parsing error,
the browser ignores the the rule with the wrong syntax and the rule
after. You need to use this syntax:
/* comment on one line or
on multiple lines */
Raluca.
> background-image: url($xwiki.getSkinFile("gpl.png"));
> background-color: #fff;
> }
>
> I am still lost as I'm not actually sure which image makes for the
> background itself - not the default white area where the text goes but
> the area behind the whole wiki that for generic Toucan skin is grey but
> then is changed to purple on the http://platform.xwiki links.
>
> As I've mention I managed to change the top left picture, and the logo
> which was easy. However on my first attempt I did change the rest but
> after altering again things started to go funny!!
>
> I'm really lost with this one.
>
> 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 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
Re: [xwiki-users] Help needed with customizing of Toucan skin
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
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 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
Re: [xwiki-users] Help needed with customizing of Toucan skin
Thanks very much for the advise and the links.
I read through them and now understand a bit more!!
However, since I attempted to customize the basic toucan.css file by
commenting out the old image code and adding new image code in. Eg:
body {
font-size: 87.5%; /* 10px */
font-family: sans-serif;
color: #222;
width: 100%;
padding: 0;
margin: 0;
min-width: 970px;
###background-image: url( images/colors/gray/H4x4-GRAY.png );
background-image: url($xwiki.getSkinFile("gpl.png"));
background-color: #fff;
}
I am still lost as I'm not actually sure which image makes for the
background itself - not the default white area where the text goes but
the area behind the whole wiki that for generic Toucan skin is grey but
then is changed to purple on the http://platform.xwiki links.
As I've mention I managed to change the top left picture, and the logo
which was easy. However on my first attempt I did change the rest but
after altering again things started to go funny!!
I'm really lost with this one.
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 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
Re: [xwiki-users] Help needed with customizing of Toucan skin
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 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
Re: [xwiki-users] Help needed with customizing of Toucan skin
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
Re: [xwiki-users] Help needed with customizing of Toucan skin
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-skin-tp5468570p5471583.html Sent from the XWiki- Users mailing list archive at Nabble.com. ___ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
[xwiki-users] Help needed with customizing of Toucan skin
Hi,
I am attempting to customize the toucan by putting a new background in
and changing the logo.
The logo is the easy part with the change happening in the
Administration GUI under Presentation -> Skin Customization -> Logo
The rest I'm a bit unsure about!!
I have attempted to deconstruct the toucan.css file under the skins
directory in the webapp and then build it back together. I did get some
results but it was highly unstable as after a second edit things started
going funny.
I managed to get a background showing up which was great but it was
pretty slow as the image was too large, I then tried a smaller image
which didn't show at all as the background went completely white??
I can confirm however the parts that make up the background are:
H4x4-GRAY.png
bgxleft-GRAY.png
bgx-GRAY.png
#
bg-GRAY3.png
and
bg-GRAY.png
seem to just be little lines in the middle of the page so no need to
alter those.
What I would really like to do is put a little picture to the right of
the logo, which seems to be the:
#companylogo {
width 740px;
}
...
portion.
I added the code: background-image:
url($xwiki.getSkinFile("myimage.png")); only with no luck whatsoever??
Also how to remove the right and left panels and just make one 'big'
background instead?? - I have an image for this but at ~800kB it's a bit
large so what I will need to do is lower the size then stretch it over
the screen. Is this possible??
Many thanks,
Kaya
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users
