Please upgrade here. These earlier versions are no longer being updated and have security issues.

Work in progress - gray & white Vanilla style

edited April 2010 in Vanilla 2.0 - 2.3
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)?

Comments

  • 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 :)
  • edited April 2010
    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
  • That's the best kind of style :D
  • 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 -_-
  • Very nice work: I'd like to see when it's finished: is it possible?
  • edited April 2010
    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.
  • Bung this in your CSS
    -moz-border-radius:8px;		/* Firefox */
    -webkit-border-radius:8px; /* Safari and Chrome */
    -opera-border-radius:8px; /* Opera < 10.5 */
    -khtml-border-radius:8px; /* Konqueror - Linux KDE */
    border-radius:8px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
    behavior: url(ie-css3.htc);
    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.
  • @germain, you can always release it and say you can only support it periodically...
  • 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^^
  • @[-Stash-], that would be an idea. I would be frustrated if not... so much time spent on it ^^'
  • 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.
  • Thanks for your help.
    I change the title of this discussion so as to keep it for further informations/questions during my work.
Sign In or Register to comment.