Forum needs Critiquing: Single Column Style

garvin

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 (http://www.bryangarvin.com) 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: http://www.bryangarvin.com/vanilla/

jimw

I think it looks really good. You've done a great job fitting into WP.

garvin

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.

prince_of_oreon

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>"

garvin

Shouldn't be. Since the order is the div calls are as follows: <div align="center"><img src="http://www.bryangarvin.com/wp-content/themes/ambiru/images/headernav.jpg" 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.

takai

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.

garvin

@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.

Felipe

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

class="getridofthisspace"

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.

EDIT:

aaaayyyyy

that's it

garvin

Hrm.. added a display:block to it and still doesn't change anything.

prince_of_oreon

garvin, it disappeared in Firefox.

garvin

@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 devlounge.net's vanilla, which you also have trouble with.