[xwiki-devs] Skin tutorial, custom logo?
Hello, Could you please consider writing a short tutorial on creating / modifying skins? For example, how to use a custom logo? Right now I'm trying to replace standard Toucan logo with my own with a couple links below it, I tried replacing <div id="companylogo"> fragment in global.vm, but I'm completely stuck with the css part. The logo and the links are there all right, but the layout is wrong. And I can't simply search-and-replace all 220s and 80s, because it's not a single picture but a table with 2 pictures and 5 links inside. I'd probably manage to do it by trial and error, but then I'd have no idea if it looks the same on other systems. It's probably easy, but my knowledge of css is rudimentary (basically I know what it is, how to apply it, and how to use it for fonts, sizes and colors; layouts are beyond me). It would be nice to have a basic tutorial like "if you want to replace the logo with your own picture enter it's size here, here and here, if you want to replace it with arbitrary html change this, this and this so the height of the logo area isn't hardcoded". Greetings, Lilianne
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? ;) http://markmail.org/message/5jemyf2rdjp4w4s3 - Asiri
For example, how to use a custom logo?
Right now I'm trying to replace standard Toucan logo with my own with a couple links below it, I tried replacing <div id="companylogo"> fragment in global.vm, but I'm completely stuck with the css part. The logo and the links are there all right, but the layout is wrong. And I can't simply search-and-replace all 220s and 80s, because it's not a single picture but a table with 2 pictures and 5 links inside. I'd probably manage to do it by trial and error, but then I'd have no idea if it looks the same on other systems.
It's probably easy, but my knowledge of css is rudimentary (basically I know what it is, how to apply it, and how to use it for fonts, sizes and colors; layouts are beyond me).
It would be nice to have a basic tutorial like "if you want to replace the logo with your own picture enter it's size here, here and here, if you want to replace it with arbitrary html change this, this and this so the height of the logo area isn't hardcoded".
Greetings, Lilianne
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
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
On Aug 11, 2009, at 8:36 AM, Lilianne E. Blaze 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.
Changing the logo is possible and not too hard for CSS/HTML experts but we know it's just too hard for normal users. Thus we have decided to remedy this in the new skin that is planned for XE 2.0 final release early september. New skin proposal: http://bit.ly/OTRIC Thanks -Vincent
http://markmail.org/message/5jemyf2rdjp4w4s3
- Asiri
Greetings, Lilianne
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/ChangingTheLogoAnd... Simply attach a file 220px wide by 80px high named logo.png to .../xwiki/bin/view/XWiki/DefaultSkin Guillaume
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Guillaume Lerouge Product Manager - XWiki Skype: wikibc Twitter: glerouge http://guillaumelerouge.com/
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/ChangingTheLogoAnd...
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?
Guillaume
Greetings, Lilianne
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/ChangingTheLogoAnd...
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/
participants (5)
-
Asiri Rathnayake -
Guillaume Lerouge -
Lilianne E. Blaze -
Sergiu Dumitriu -
Vincent Massol