Board Remodel + Image in Description Woes

[Counterklock]

I haven't the foggiest idea if this belongs in Templates or in Plugins, so apologies in advance if I guessed wrong! I have a few problems I need help with.

1. ) I am working on a board remodel template acquired here (used with permission of Tumbleweed) for my site and I have been stumped. I am using the Board Description Plugin to add images to my descriptions, and would like to have the images centered vertically so that they are more or less aligned with the description text (see below for an example of my current situation - the images center themselves to the top left of the cell). The support thread for this plugin seems to be dead and I can't find any hint on that thread that anyone else has tried what I'm trying to do. 

Is it even possible to vertically center these images that are inserted by this plugin? If so, how? If not, what is an alternative way of inserting images into my board description? I'd like to avoid having to resize and redo these images. 

2.) The subboards on my forum can't seem to decide where they want to align themselves, especially subboards with longer names. Is there any way I can make the subboards look neater and more organized without having to re-order them in the board structure? (See screenshot of the not-so-neat subboards)

Obligatory Evidence Screenshot of Misbehaving Board: Click to Enlarge



I can provide more screenshots upon request, but as I'm tinkering with this template on a theme not accessible to guests, I cannot give a link to the site. I can, however, make a live mockup forum with the codes I have, and I can, of course, provide template codes + CSS.

[Tumbleweed]

For #2 you'll either need to make the width wider (in this css class: .sub_border) so it accommodates your longest sub board name or just remove the width totally and it'll fit to size. That will fix the suboard title not going on two lines, if that is part of the problem.  I haven't tested this to see if you have a gazillion subboards, what happens when there is not enough room and it goes to the next line but doing the latter above will fix the two lines within a sub-board name. When I get more time, I'll add more subboards to see what happens but doing the above may actually fix the the second line of titles so they start aligned to the left again, if that makes sense.

For #1, I cannot get the image to be in the middle vertically using that plugin and appearing in the middle no matter how little or lot you have in the description area. I'm looking for alternatives and right now playing with just using css and I have one image for all boards in the middle vertically but now to target each board with a different image is where I'm currently not getting anywhere and keeping the image in the middle:
putteraroundix.proboards.com/

I'm posting the link although when you check I may have things in a mess but right now, it looks good with one image for each board.

[Counterklock]

#2) The most subboards I have on my boards is five, and those are the ones shown in the screenshot. Deleting the width definitely fixed the alignment issue there (see the screenshot below), but I'm now unsure if the configuration of the subboard links as such fit with the aesthetic of the board. That's a bridge I'll cross when I get to it, though.




#1) I suspected that the plugin would not be at all helpful when adding board description images. What you have now looks fantastic, but definitely I'd need to be able to add different images for each board.

I made my own testing/mockup site to play around on (so my tinkering didn't disturb my poor members on my main forum) and started experimenting a bit with alternatives to adding images to the description beyond the plugin, and I came up with the idea of using a table, with one cell containing the image and the other the text. [table][tr][td]
[IMG]IMG URL HERE WOO[/IMG][/td]
[td]
Description here woooooooo.[/td][/tr][/table]
The upside is that the image does more or less end up vertically centered as I'm hoping for. The downside to this method is it feels rather clunky and the padding seems to be a bit off, and the font size does not adhere to the default size set for board description texts no matter what I do. 

EDIT:

A member suggested that simply not displaying the subboard links at all could be a viable option as well. I'm finding that this option is much more aesthetically pleasing, but am also seeking feedback from my other forum members as well. 

[Tumbleweed]

Jun 30, 2016 19:31:48 GMT -8 Counterklock said:

#2) The most subboards I have on my boards is five, and those are the ones shown in the screenshot. Deleting the width definitely fixed the alignment issue there (see the screenshot below), but I'm now unsure if the configuration of the subboard links as such fit with the aesthetic of the board. That's a bridge I'll cross when I get to it, though.




#1) I suspected that the plugin would not be at all helpful when adding board description images. What you have now looks fantastic, but definitely I'd need to be able to add different images for each board.

I made my own testing/mockup site to play around on (so my tinkering didn't disturb my poor members on my main forum) and started experimenting a bit with alternatives to adding images to the description beyond the plugin, and I came up with the idea of using a table, with one cell containing the image and the other the text. [table][tr][td]
[IMG]IMG URL HERE WOO[/IMG][/td]
[td]
Description here woooooooo.[/td][/tr][/table]
The upside is that the image does more or less end up vertically centered as I'm hoping for. The downside to this method is it feels rather clunky and the padding seems to be a bit off, and the font size does not adhere to the default size set for board description texts no matter what I do. 

EDIT:

A member suggested that simply not displaying the subboard links at all could be a viable option as well. I'm finding that this option is much more aesthetically pleasing, but am also seeking feedback from my other forum members as well. 

It does look better without the sub-boards. I haven't had a chance to mess with that anymore and not sure when I will but maybe with us both working on it when we can, we'll come up with a solution. Sorry, I wish I had had a quick answer for you.

[Counterklock]

Two heads are always better than one. Take your time with it, as I know this is one big holiday weekend for most of North America what with Canada Day and Independence Day. There is no rush at all and I appreciate all the help you've given me thus far!

[Tumbleweed]

O.K. I think I have it worked out by using css if you want to go that route. (Disable the plugin you were using.)

Now I hope I can remember what all I changed since I'd fiddle for a few minutes and then would be gone for hours. lol But here we go. Go to the Board list template and add the blue and add the red if you don't have that there:



<div class="the_des_border" style="vertical-align:middle;">
<div class="board_img"></div>
<p class="description">$[board.description]</p>




Now go to the the style sheet and add this to the bottom:

/*this sets the image for all boards*/
.board_img{
width:240px;
height:200px; 
float:left;
background-repeat:no-repeat;
background-position: center center;
vertical-align:middle;
}
/*this is for adding the image to each board*/
#board-11 div.board_img{
background-image:url(storage.proboards.com/3422154/i/3oAqVkS_n4N16h_0JzR0.png)!important;
}
#board-4 div.board_img{
background-image:url(storage.proboards.com/3422154/i/WkuRE_FIScAzFJE8VcQm.png)!important;
}

You'll need to set the width/height to that of the image size you will use and replace the blue links with that of your images. You can get the board id by just clicking on the board.

Now I don't recall if I changed other things in the css so here is the whole css so you can compare what you have to what I have:

SPOILER: Click to show

/*board remodel css*/
.boards div.content.cap-bottom{border:0px;padding:0px;
}
/*remove div.container.boards if you want all title bars this color*/
div.container.boards.container>.title-bar{
background-color: #444444!important;
background-image:none;
font-size:20px;
}
/*this puts the background behind all the boxes*/
.boards table.list td{
background-color: #444444!important;
border:#444444;
padding-right:8px;
}
/*this is the box for the icon border*/
.the_icon_border{
display: table;
background-color: #545454!important;
border:4px solid #666666;width:80px;
}
.the_icon_border p{
display: table-cell;
vertical-align: middle;text-align:center;

height:100px!important;
padding:8px;
}
/*this is the border around threads-posts-latest-date*/
.the_border {
height:100px!important;
background-color: #545454!important;
border:4px solid #666666;
padding:8px;
margin:8px;
}
/*this is the border around descriptions*/
.the_des_border{
display: table;
width:98%;
background-color: #545454!important;
border:4px solid #666666;
height:60px;
text-align:left;
min-height:100px!important;
}
.the_des_border p{padding:8px!important;
display: table-cell;
vertical-align:middle;
height:100%;
min-height:50px!important;
}
/*this is the border around sub-boards*/
.sub_border{float:left;margin:4px;
height:18px;
padding:4px;
margin-top:8px;
background-color: #545454!important;
border:2px solid #666666;
}
/*You can change the font size here for threads-posts-latest
or you can change the font in the class the_border
for the date size to be changed you need special css*/
.inner_bkg{text-align:left;
background-color:#666666;margin-bottom:6px;padding:2px;width:100%;
}
/*this sets the width of threads-posts-latest and needs to be here for fluidity*/
.posts_threads{width:340px!important;height:100px!important;text-align:left;
}
/*for the board name*/
.boards .main .link a{font-size:22px;margin-bottom:6px;
}
.the_des_border div{vertical-align:middle;height:100%;
}
.board_img{width:240px;height:200px;float:left;
background-repeat:no-repeat;
background-position: center center;
vertical-align:middle;
}
#board-11 div.board_img{
background-image:url(http://storage.proboards.com/3422154/i/3oAqVkS_n4N16h_0JzR0.png)!important;
}
#board-4 div.board_img{
background-image:url(http://storage.proboards.com/3422154/i/WkuRE_FIScAzFJE8VcQm.png)!important;
}

Let me know how it goes.

[Counterklock]

I've disabled the plugin, input all code (The first chunk in the board list as prescribed, and the second bit at the bottom of the style sheet) but I can't get the images to show still. I did a side-by-side comparison of the CSS codes but only found minor differences that shouldn't impact whether or not the images display (unless of course they do).

[Tumbleweed]

Jul 2, 2016 7:41:04 GMT -8 Counterklock said:

I've disabled the plugin, input all code (The first chunk in the board list as prescribed, and the second bit at the bottom of the style sheet) but I can't get the images to show still. I did a side-by-side comparison of the CSS codes but only found minor differences that shouldn't impact whether or not the images display (unless of course they do).

Do you have it on that test site you posted? I don't see the div added but maybe I'm not viewing the right theme? Anyway, just to make sure the css is actually targeting a board do a simple test like:

#board-11{border:1px solid red;
}

..and see if a red border shows up. I am having you do that because I see you added a class to align the board names to the right and maybe the css just isn't finding the board. Long shot but we need to rule out things.

[Counterklock]

I do have it on the test site and the theme visible to guests is the same as before, I just fiddled with the banner and background to see how they might possibly work with a possible future color scheme and forgot that I was still in my 'Board Remodel Tinkering' theme. I'm so sorry for the confusion!

The '#board-11{border:1px solid red;}' CSS has been added and a red border is now showing around Board 11, so it's definitely finding the board.

Earlier yesterday I also temporarily switched my CSS with the CSS you gave above and had no meaningful change in regards to having the images appear, so I don't think it's a CSS issue.

Edit!!:

On a hunch, I copied the coding over to my main forum as my testing forum didn't quite seem right (By all accounts, this coding should have worked, but it didn't, and I've got no idea why. Likewise, there's some weird things going on with the CSS with fonts not displaying as they should, which I thought suspicious) and everything is working fine and dandy!

Please excuse my tossing your image URLs in as they were closest at hand at the time.


I haven't the foggiest clue why my test forum wasn't cooperating properly. 

I have now run into another problem I'll admit I just did not think of until now: the image-less boards in my OOC sections as well as all subboards now have a nice empty space. Is there any way to make it so only specific boards are targeted by this code?

[Tumbleweed]

Jul 3, 2016 17:28:31 GMT -8 Counterklock said:

I do have it on the test site and the theme visible to guests is the same as before, I just fiddled with the banner and background to see how they might possibly work with a possible future color scheme and forgot that I was still in my 'Board Remodel Tinkering' theme. I'm so sorry for the confusion!

The '#board-11{border:1px solid red;}' CSS has been added and a red border is now showing around Board 11, so it's definitely finding the board.

Earlier yesterday I also temporarily switched my CSS with the CSS you gave above and had no meaningful change in regards to having the images appear, so I don't think it's a CSS issue.

Edit!!:

On a hunch, I copied the coding over to my main forum as my testing forum didn't quite seem right (By all accounts, this coding should have worked, but it didn't, and I've got no idea why. Likewise, there's some weird things going on with the CSS with fonts not displaying as they should, which I thought suspicious) and everything is working fine and dandy!

Please excuse my tossing your image URLs in as they were closest at hand at the time.


I haven't the foggiest clue why my test forum wasn't cooperating properly. 

I have now run into another problem I'll admit I just did not think of until now: the image-less boards in my OOC sections as well as all subboards now have a nice empty space. Is there any way to make it so only specific boards are targeted by this code?

No problem using those images. You will just need to remove the width and height in that first class and add them to each board you have an image on. So it would be like this:
Edit: Hold on a bit before you do the below, there may be more you need to do, give me a sec...
O.K. Figured it out. Go ahead and do what I said here:

/*this sets the image for all boards*/
.board_img{
float:left;
background-repeat:no-repeat;
background-position: center center;
vertical-align:middle;
}
/*this is for adding the image to each board*/
#board-11 div.board_img{
width:240px;
height:200px;
background-image:url(s2154.storage.proboards.com/3422154/i/3oAqVkS_n4N16h_0JzR0.png)!important;
}
#board-4 div.board_img{
width:240px;
height:200px;
background-image:url(s2154.storage.proboards.com/3422154/i/WkuRE_FIScAzFJE8VcQm.png)!important;
}


If for some reason you want your descriptions off to the side like it is with an image then just move the height and not the width.

And then remove the height in this which I bolded:

/*this is the border around descriptions*/
.the_des_border{
display: table;
width:98%;
background-color: #545454!important;
border:4px solid #666666;
height:60px;
text-align:left;
min-height:100px!important;
}

Not sure why I had those there anyway.

[Counterklock]

The code you provided absolutely did the trick!

Between last night and today, though (before I put in this new batch of code) something happened and now the images are once more aligning with the top left corner of the screen. I checked both the coding in the CSS and the board list template and nothing has changed. I laughed seeing it because we're so close, and yet the vertical alignment seems to have taken a break on us again. Both vertical-align: middle bits are intact within the CSS and board list template. 




Here is the board template code snippet...
  <div class="the_des_border" style="vertical-align:middle;" >
  <div class="board_img"></div>
  <p class="description">$[board.description]</p>
... and here is the CSS, just in case I fiddled with something and didn't notice. 

/*this sets the image for all boards*/
.board_img{
float:left;
background-repeat:no-repeat;
background-position: center center;
vertical-align: middle;
}

Please let me know if I should post more of the code just in case.

I still do have the plugin working on my main forum for another few themes, but I disabled it for this theme so in theory it should not be a factor here.

[Tumbleweed]

Gosh, that sounds like me, when I get one thing fixed I break another. lol

Here is my board list as it is now: ( putteraroundix.proboards.com/ )


<table class="list" role="grid">
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
                   <td><div class="the_icon_border"><p>$[board.icon]</p></div></td>
                   <td class="posts_threads">
                       <div class="the_border">
<div class="inner_bkg">
                    {if $[board.threads] == -1}N/A{else}$[board.threads]{/if} Threads and
{if $[board.posts] == -1}N/A{else}$[board.posts]{/if} Posts                  
                           </div>
                   
                    <div class="latest last">
{if $[board.posts] > 0}
{if $[board.last_thread]}
                        <div class="inner_bkg">In: $[board.last_thread.recent_link]</div>
                        <div class="inner_bkg">By: $[board.last_thread.last_post.created_by]</div>
                        <div class="inner_bkg"><span class="date">$[board.last_thread.last_post.created_on]</span></div>
{/if}
{/if}
                        </div>
                       </div>
                   </td>
                     
<td class="main clickable">
                       <span class="link">$[board]</span>
                     
{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />
<div class="the_des_border" style="vertical-align:middle;">
                            <div class="board_img"></div>  
                           
                       <p class="description">$[board.description]</p>
                     
<!--{if $[board.num_mods]}
<p class="moderators">
Moderator{if $[board.num_mods] != 1}s{/if}:
{foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
{foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}
</p>
{/if}-->

                       </div>
                       
                     {if $[board.sub_board]}

{if $[board.sub_board] != 1}{/if}
{foreach $[board.sub_board]}<div class="sub_border"><a href="$[board.sub_board.href]">$[board.sub_board.name]</a></div> {/foreach}

{/if}  

</td>
</tr>
{else}
<tr id="$[board.content_id]" class="$[board.content_class]">
                   <td><div class="the_icon_border"><p>$[board.icon]</p></div></td>
<td class="main clickable redirect last" colspan="4">
<span class="link">$[board]</span><br />
                       <div class="the_des_border"><p class="description">$[board.description]</p></div>
</td>
</tr>
{/if}
{/foreach}
{if !$[board]}
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
{/if}
</tbody>
</table>



And the css. Notice I just added some css to move my board title to the right like you have yours. No need for a special div.


/*board remodel css*/
.boards div.content.cap-bottom{border:0px;padding:0px;
}
/*remove div.container.boards if you want all title bars this color*/
div.container.boards.container>.title-bar{
background-color: #444444!important;
background-image:none;
font-size:20px;
}
/*this puts the background behind all the boxes*/
.boards table.list td{
background-color: #444444!important;
border:#444444;
padding-right:8px;
}
/*this is the box for the icon border*/
.the_icon_border{
display: table;
background-color: #545454!important;
border:4px solid #666666;width:80px;
}
.the_icon_border p{
display: table-cell;
vertical-align: middle;text-align:center;

height:100px!important;
padding:8px;
}
/*this is the border around threads-posts-latest-date*/
.the_border {
height:100px!important;
background-color: #545454!important;
border:4px solid #666666;
padding:8px;
margin:8px;
}
/*this is the border around descriptions*/
.the_des_border{
display: table;
width:98%;
background-color: #545454!important;
border:4px solid #666666;
text-align:left;
}
.the_des_border p{padding:8px!important;
display: table-cell;
vertical-align:middle;
}
/*this is the border around sub-boards*/
.sub_border{float:left;margin:4px;
height:18px;
padding:4px;
margin-top:8px;
background-color: #545454!important;
border:2px solid #666666;
}
/*You can change the font size here for threads-posts-latest
or you can change the font in the class the_border
for the date size to be changed you need special css*/
.inner_bkg{text-align:left;
background-color:#666666;margin-bottom:6px;padding:2px;width:100%;
}
/*this sets the width of threads-posts-latest and needs to be here for fluidity*/
.posts_threads{width:340px!important;height:100px!important;text-align:left;
}
/*for the board name*/
.boards .main .link a{font-size:22px;margin-bottom:6px;
}
.the_des_border div{vertical-align:middle;
}
/*#board-11.board_img{
background-image:url(http://storage.proboards.com/3422154/i/3oAqVkS_n4N16h_0JzR0.png)!important;
}*/
.board_img{float:left;
background-repeat:no-repeat;
background-position: center center;
vertical-align:middle;
}
#board-11 div.board_img{width:240px;height:200px;
background-image:url(http://storage.proboards.com/3422154/i/3oAqVkS_n4N16h_0JzR0.png)!important;
}
#board-4 div.board_img{width:240px;height:200px;
background-image:url(http://storage.proboards.com/3422154/i/WkuRE_FIScAzFJE8VcQm.png)!important;
}
#board-2 div.board_img{padding:-4px!important;
}
.board .link a:link{float:right;margin-right:16px;
}


[Counterklock]

I know, right? Just when I thought everything was going smoothly. lol. 

I did a side-by-side comparison of our CSS as I'm pretty sure that the problem lies within it, but I couldn't find anything that jumped out at me. I'm posting mine here in hopes that I missed something. 

(And I wasn't aware that the board title was using a special div to do the thing, as I used the Proboards Visual Editor to set the font + align it to the right. Should I fix that, and if so, how?)

/*board remodel css by Tumbleweed of Proboards Support*/
.boards div.content.cap-bottom{border:0px;padding:0px;
}
/*remove div.container.boards if you want all title bars this color*/
div.container.boards.container>.title-bar{
background-color: #081121!important;
background-image:none;
font-size:20px;
}
/*this puts the background behind all the boxes*/
.boards table.list td{
background-color: #081121!important;
border:#0f1a29;
padding-right:8px;
}
/*this is the box for the icon border*/
.the_icon_border{
display: table;
background-color: #081121!important;
border:2px solid #0f1a29;
}
.the_icon_border p{
display: table-cell;
vertical-align: middle;text-align:center;
height:100px!important;width:80px;
padding:8px;
}
/*this is the border around threads-posts-latest-date*/
.the_border {
height:100px!important;
background-color: #081121!important;
border:4px solid #0f1a29;
padding:8px;
margin:8px;

}
/*this is the border around descriptions*/
.the_des_border{
display: table;
width:98%;
background-color: #081121!important;
border:4px solid #0f1a29;

text-align:left;
}
.the_des_border p{padding:8px!important;
display: table-cell;
vertical-align:middle;
}
/*this is the border around sub-boards*/
.sub_border{float:left;width:90px;margin:4px;
height:25
   px;
padding:2px;
margin-top:8px;
background-color: #0c1a31!important;
border:1px solid #0f1a29;
}
/*You can change the font size here for threads-posts-latest
or you can change the font in the class the_border
for the date size to be changed you need special css*/
.inner_bkg{text-align:left;
background-color:#0c1a31;margin-bottom:6px;padding:2px;width:250px;
}
/*this sets the width of threads-posts-latest and needs to be here for fluidity*/
.posts_threads{width:340px!important;height:100px!important;text-align:left;
}
/*for the board name*/
.boards .main .link a{font-size:22px;margin-bottom:6px;
}

/*this sets the image for all boards*/
.board_img{
float:left;
background-repeat:no-repeat;
background-position: center center;
vertical-align:middle;
}

/*MAIN IC BOARD IMAGES*/
#board-18 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i66.tinypic.com/2yx4vpz.jpg)!important;
}
#board-19 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i67.tinypic.com/16m0dfl.jpg)!important;
}
#board-20 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i68.tinypic.com/25s7k00.jpg)!important;
}
#board-56 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i65.tinypic.com/15s5082.jpg)!important;
}
#board-57 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i68.tinypic.com/34g24r7.jpg)!important;
}
#board-58 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i65.tinypic.com/350wkmw.jpg)!important;
}
#board-21 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i66.tinypic.com/2i0xekx.jpg)!important;
}
#board-45 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i65.tinypic.com/wv1jqd.jpg)!important;
}
#board-46 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i63.tinypic.com/2ai4igl.jpg)!important;
}
#board-39 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i65.tinypic.com/292wjdi.jpg)!important;
}
#board-40 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i67.tinypic.com/trgh.jpg)!important;
}
#board-37 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i63.tinypic.com/2rqhhlk.jpg)!important;
}
#board-63 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i66.tinypic.com/k3qctj.jpg)!important;
}
#board-41 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i64.tinypic.com/2j1l81y.jpg)!important;
}
#board-50 div.board_img{
   width:200px;
height:80px;
background-image:url(http://i68.tinypic.com/nbz0o3.jpg)!important;
}



[Tumbleweed]

(And I wasn't aware that the board title was using a special div to do the thing, as I used the Proboards Visual Editor to set the font + align it to the right. Should I fix that, and if so, how?)

On your test site you have this around the title which is aligning it right. I mean that is just fine but thought if you recopied my template, you could just add the css instead. (I'm just copying from "view source" to see your code so it'll look different in the template or maybe using Visual Editor, it just adds that div? Little confused at the mo.)

<div align="right"><a class="board-link board-3" href="/board/3/board">This is a board</a></div>




But the above doesn't matter, and especially since it really isn't working on your test site anyway so now I'll do a comparison of your css and let you know if I find anything.




Counterklock ,  I was almost ready to go to bed, giving up for the night, but thought I'd give it one more shot and I figured it out and it was my fault (so sorry). But right now I'm too tired to explain and I'm not even sure I'm understanding as I'm dog tired, but put the height 200px back into a couple of your image lines and see if it fixes it. (Just do a couple just as a test.)

#board-20 div.board_img{
width:200px;
height:80px;
background-image:url(http://i68.tinypic.com/25s7k00.jpg)!important;
}

We aren't out of the woods yet, as I need to rethink how I'm doing that again. Although it centers in the middle now, I'm missing something that isn't right still.

[Counterklock]

(Oh gosh, please don't not sleep because of this! It certainly isn't my intention to cause you to be sleep deprived!)

I think the Visual Editor adds a Div to the mix (because I swear I did not add a div in for changing the font and alignment), which is odd, but I've gone in and added '.board .link a:link{float:right;margin-right:16px;}' anyways to make things nice and neat. 

Putting the height back to 200px definitely worked on both the testing site and my main forum. I even tinkered with setting it between 90-120px for individual boards to center things a little bit better, though if there's something not right I'll defer to your judgement. Since we're so close to figuring things out, I've set the theme to default on the main forum. Hopefully all the coding checks out.

Also!! I have a few final things a few members pointed out to me that I will admit I completely missed but are nonetheless a bit jarring.
 
1.) The 'newest threads+posts+whodunnit / No posts here' info to the left of each board is not vertically centered. Is it at all possible to center this? 

2.) The '# Viewing' seems to have a weird wrapping issue when board titles are long enough to interfere with it. Is it possible to move the #Viewing to its own line either above or b or below the board title, or within the board description box itself?