Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Forum needs Critiquing: Single Column Style

edited August 2006 in Vanilla 1.0 Help
I used the basic explanation from DevLounge about how to incorporate vanilla into a wordpress design. All though, mine is a bit different as my content width is 500. So, it severely constricted the room for the actual post with the panel on the side. My eventual goal is to make a second panel.php file to go on the bottom of the page and then take the Who's Online extension and break it out of the list style into just name, name, name style so that it fits the width. Or - another thought it is to go with how my blog ( is laid out at the bottom, so that the panel would be broken up into 2 200px columns. Anyone willing to give me a few tips and hints on how to accomplish this, I'd be very very appreciative. Really, I'd like to move the panel to the bottom all together, but after about 4 hours of tweaking different peices of CSS and looking up and down different themed php files, I just gave up. Regardless, here is the link. I want to make a few more changes, but for the purpose of getting it critiqued, here is the link:


  • I think it looks really good. You've done a great job fitting into WP.
  • edited August 2006
    My only current issue, other then the problem with the side panel, is this:


    I can't figure out why that space is there in between the navigation and the header.
  • edited August 2006
    garvin wrote: "I can't figure out why that space is there in between the navigation and the header." I'd venture it is this: "<div style="clear: both"></div>"
  • edited August 2006
    Shouldn't be. Since the order is the div calls are as follows: <div align="center"><img src="" alt="" height="330" width="545" usemap="#headernav" border="0"></div> <div id="wrap" class="clearfix"> <div id="header_vanilla"> </div> <div id="nav" class="clearfix"> </div> <map name="headernav">All the map stuff</map> <div style="clear: both"></div> <div id="theboard"> I could see that if the div style="clear..." was in between the navigation and the rest, but its not.
  • You've done a good job. One problem I notice is the white space above the avatar of the person who starts a discussion.. Probably just a minor CSS issue. I'm using Firefox, so I don't know if this shows up in other browsers. Either way it looks surprisingly good for how small it is. I guess it demonstrates Vanilla's flexibility.
  • edited August 2006
    @takai -> I was definitely scared to attempt such a task. But, yah - I'm very pleased with it as well. Just wish that side panel was built more like Wordpress' sidebar so that I could easily move stuff around, add <divs> in certain areas, etc. But, I'll learn. I'm at the intermediary level for CSS, and PHP... 50% of the time, i know what the line is doing, such as include tags and echo/print tags. However, I could never code anything from scratch. @everyone -> if you care to login just to see how everything functions etc, you can anonymously use the name: guest, pass: guest. I think eventually I'm going to make this a private board, however for the time being, in the hopes of fixing all of the bugs and getting more constructive criticism from the masses, I'm going to keep it open to everyone for now. Also, you'll notice that these posts are all pretty old, minus a few made today. The reason is, we are on a phpbb forum currently, I crossed over a few of the posts from there, but would like to get off of phpbb ASAP to use this. Its just a forum for about 15 people.
  • edited August 2006
    About the space> the image "header_nav.jpg" should be displayed as a block and not inline.
    When displayed by default (inline), an image is considered as text and will be on the same baseline as most (text) characters except there is space reserved under the baseline for letters like q, g, p or y.
    As a block, the behavio(u)r is completely different: if not inline, no need anymore for "a few more pixels in case this inline flow would need it".

    You can add
    to this image (and close the < i m g /> tag as it should be in Xhtml 1.0 Strict). And in the stylesheet:
    img.getridofthisspace { display: block; }
    BTW, border="0" and align="center" have nothing to do in a Xhtml 1.0 Strict document.



    that's it
  • Hrm.. added a display:block to it and still doesn't change anything.
  • garvin, it disappeared in Firefox.
  • @prince_of_oreon -> seriously, what version of firefox are you using? are you on pc or mac? the reason i ask is because i have firefox 1.5 on XP and it works fine, as does's vanilla, which you also have trouble with.
This discussion has been closed.