Lilianne E. Blaze wrote: > Guillaume Lerouge wrote: >> Hi Lilianne, >> >> On Tue, Aug 11, 2009 at 8:36 AM, Lilianne E. Blaze < >> [email protected]> wrote: >> >>> Asiri Rathnayake wrote: >>>> Hi, >>>> >>>> On Tue, Aug 11, 2009 at 11:07 AM, Lilianne E. Blaze < >>>> [email protected]> wrote: >>>> >>>>> Hello, >>>>> Could you please consider writing a short tutorial on creating / >>>>> modifying skins? >>>>> >>>> Did you search the mailing archives first? ;) >>> I did. Sorry, I can see how the above question might suggest I didn't, >>> but it should be obvious from the following - I mean the .css part. >>> There's almost nothing about it. And it would be nice if the tutorial >>> described how to change some basic things without extensive css / web >>> design experience. >>> >>>> http://markmail.org/message/5jemyf2rdjp4w4s3 >>>> >>>> - Asiri >>> Greetings, Lilianne >>> >> The easiest way to change the logo is described here: >> http://enterprise.xwiki.org/xwiki/bin/view/GettingStarted/ChangingTheLogoAndThePanels >> >> Simply attach a file 220px wide by 80px high named logo.png to >> .../xwiki/bin/view/XWiki/DefaultSkin > > Yes, I did RTM. > > What I'm asking is: > > 1) Assuming I have a logo with arbitrary width and height, what do I > need to change in toucan.css? Which classes and selectors? > > 2) Assuming I want to replace the "<img src="$!logourl" alt="XWiki" > width="200" height="70"/>" part with a "<table> ... </table>", and its > size isn't set (it contains both pictures and text), what do I change to > remove the hardcoded width and height? So the height of this area > adjusts to what I actually put in there and how it renders in a specific > browser?
Hi Lilliane, Everybody seems to avoid the right answer: it's really hard to make this kind of changes to the Toucan skin. Here's what you must change in order to resize the skin for a new logo: toucan.css: - lines 883, 889, 890, 897, 1144, 1179, 1196, 1197, 1202, 1203, 1213, 1214: change the width/height to those of your image - line 1074: change the background position to -height of image You can use a great tool for web developers, FireBug, a Firefox extension, to inspect the HTML and its CSS, and find out which rules affect any element. Hopefully, the next skin will make it much easier to change the logo, without having to change any CSS at all. -- Sergiu Dumitriu http://purl.org/net/sergiu/ _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
