[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
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-ski... Sent from the XWiki- Users mailing list archive at Nabble.com.
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
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 <[email protected]> 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 [email protected] http://lists.xwiki.org/mailman/listinfo/users
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<[email protected]> 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 [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
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.OverridingtheSkin... 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<[email protected]> 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 [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
Hi, On Sat, Aug 28, 2010 at 12:06 PM, Kaya Saman <[email protected]> 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<[email protected]> 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 [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
Hello, On Sat, Aug 28, 2010 at 4:21 PM, Kaya Saman <[email protected]> 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.OverridingtheSkin...
$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.CreatingaSkindocu... ) 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<[email protected]> 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 [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
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<[email protected]> 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.OverridingtheSkin...
$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.CreatingaSkindocu... ) 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<[email protected]> 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 [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
On Tue, Aug 31, 2010 at 12:27 PM, Kaya Saman <[email protected]> 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<[email protected]> 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.OverridingtheSkin...
$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.CreatingaSkindocu... ) 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<[email protected]> 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 [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
participants (3)
-
Kaya Saman -
Lockie -
Raluca Stavro