Work in progress - gray & white Vanilla style

germain

Hi,
I'm working at customizing my message board through a simple edition of the default vanilla CSS files. Everything is quite all right (http://i69.servimg.com/u/f69/10/09/09/64/captur10.jpg), but my head is banging against a wall when it comes to the account page (http://i69.servimg.com/u/f69/10/09/09/64/captur12.png).
How can I fill it totally with a white background (at least wide-long)?

Stash

Any chance you could either:

1. put it online somewhere I could view it in a browser
2. or, save the theme and style you are creating and make that a downloadable ZIP file?

Debugging CSS is easy (well, easier) when you can tear it apart with Firebug

germain

I can't put it online for now, but I'll be able to upload a little package as described in your 2nd line.
One thing I must warn about if I don't want to see you getting mad : the style is kinda made of adhesive tape and scratches of paper as I'm far from being experimented.
I'll edit this comment within one hour, inserting a download link.
One hour later : http://files.me.com/germainbuisine/kgok2q

Stash

That's the best kind of style

germain

I think I found. In Safari's developper tool I noticed there was a tiny little div line upon the account page which corresponded to the account history. In the CSS, there was no height attribute, so I added some.

#AccountHistory{margin-left:320px;height: 450px;}

And... voilà! http://i69.servimg.com/u/f69/10/09/09/64/captur13.png

Next step : adding the rounded corner -_-

candyman

Very nice work: I'd like to see when it's finished: is it possible?

germain

thank you! I'll write a comment here and whisper you when it's done.
It's a personal work for a personal message board, so there won't be any copyright s**t, then I might release it as an addon through vanillaforums.org...? The problem is I don't know if I'll be able to perform a continuous support about it once used in other configurations.

Stash

Bung this in your CSS

-moz-border-radius:8px;		/* Firefox */

That should cover most eventualities
And, of course, you'll need the ie-css2.htc file

That also handles simple, black drop shadows/ box-shadows in IE as well, so if you're not using them, try using the simpler curved-corner js (that ie-css3.htc is based off) instead.

If you don't want all four corners to be rounded (a limitation of the above) then you'll need to use the significantly heavier Curvy Corners or its jQuery equivalent.

Stash

@germain, you can always release it and say you can only support it periodically...

germain

in fact, in my first drafts, I didn't originally want rounded corners on top and on bottom, only on top ; it's just I couldn't find the way to extend the white content 'till the end of the browser's window. But I may have found a way and avoid the s**ty corners, I'll test that tonight.

Too much rounded corners kill rounded corners^^

germain

@[-Stash-], that would be an idea. I would be frustrated if not... so much time spent on it ^^'

Stash

I couldn't agree more, that's why I thought I'd provide some options. I've used all of the above in various places and found them to be the best way of achieving rounded corners cross browser.

Oh, and I always feed them to IE using conditional comments so as not to have sensible browsers downloading more than they need to.

germain

Thanks for your help.
I change the title of this discussion so as to keep it for further informations/questions during my work.