Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Removing the space between content boxes
Rabbyt (New Admin) 9/25/2008 11:48 PM EST : Removing the space between content boxes
Rabbyt
Posts: 53
Posts With Wolves

Hello!

I've tried implementing the advice given on various forum topics, but I am still unable to remove the space between my content boxes...which, unfortunately, is making my soul cry.

We all know that crying souls are never a good thing!

Hence, I would like to remedy this situation of mine.  Any advice/tips/coding would be GREATLY appreciated!  Our guild site is theblackhand.guildportal.com.


Also, the overall layout seems to be a little too dark, in my opinion.  What do you guys think?  Any ideas for improvements, while still keeping the thematic feel to the site?  Or should I just keep everything the same (minus the space between the content boxes, of course!)

Thanks!

Rabbyt
TopBottom

Mottie (MVP) 9/26/2008 2:47 AM EST : RE: Removing the space between content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Rabbyt!

Just go into the custom content box HTML and remove the <br> at the bottom 



Control Panel > Style & Colors > Content Containers

Then edit all three containers: Left, Center and Right. The last part of the HTML should look like this (this is the center container):
...
<table border="0" cellspacing="0" cellpadding="-10" width="100%">
<tr>
<td class="cbottomleft"></td>
<td class="cbottomtile">&nbsp;</td>
<td class="cbottomright"></td>
</tr>
</table><br>
Remove the <br> in red. Oh, and the cellpadding="-10" doesn't really do anythng.
TopBottom

Rabbyt (New Admin) 9/26/2008 4:30 AM EST : RE: Removing the space between content boxes
Rabbyt
Posts: 53
Posts With Wolves

Excellent!  That worked perfectly for the center column!  Thanks Mottie! 

However, I still have some space between the content boxes on the left and right...any suggestions?
TopBottom

Grymn (New Admin) 9/26/2008 4:36 AM EST : RE: Removing the space between content boxes
Grymn
Posts: 580
Zomgawsh Poster

I would guess change the "cbottomleft" to "lbottomleft," for the left column and "rbottomleft" for the right columns and so on.

This is only a guess, however.
TopBottom

Mottie (MVP) 9/26/2008 5:11 AM EST : RE: Removing the space between content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Your soul can stop crying

Change the height in red to 73px
.lbottomright, .rbottomright  { background: url(http://i8.photobucket.com/albums/a36/mikestillman2003/leftrightbottomright.png) no-repeat; height:73px; width:42px; }
TopBottom

Rabbyt (New Admin) 9/26/2008 5:31 AM EST : RE: Removing the space between content boxes
Rabbyt
Posts: 53
Posts With Wolves

Dude...Mottie....

YOU SERIOUSLY ROCK!!!!!

Thank you!
TopBottom

fuzzhead (New Admin) 9/29/2008 5:00 PM EST : RE: Removing the space between content boxes
fuzzhead
Posts: 295
Fingers of Fury!

Mottie said:
Then edit all three containers: Left, Center and Right. The last part of the HTML should look like this (this is the center container):
...
<table border="0" cellspacing="0" cellpadding="-10" width="100%">
<tr>
<td class="cbottomleft"></td>
<td class="cbottomtile">&nbsp;</td>
<td class="cbottomright"></td>
</tr>
</table><br>


Hmmm... I must be stupid because when I open the edit boxes for each container, they're all blank. So, I tried just entering the code (as Mottie posted above) and clicking "Enable". But when I click the "Save" button, an error message pops up saying that information is missing.

So my question is, what is the first step to this process?
TopBottom

Mottie (MVP) 9/29/2008 6:42 PM EST : RE: Removing the space between content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hiya fuzzhead!

This is the post I was referring to... it explains how to add a theme to your site using CSS. The content container HTML I posted here was cut off because the part we were interested in was at the end.

The post above was how I used to define my box borders, but there is a newer method that allows you to add a different custom box border for every content box on your page. You can find that post here.
TopBottom

fuzzhead (New Admin) 9/30/2008 5:34 AM EST : RE: Removing the space between content boxes
fuzzhead
Posts: 295
Fingers of Fury!

So if I understand this correctly, all I would need to do is add the following to the Custom CSS:

    .LeftContentZone .spacer {height:0px;}
    .CenterContentZone .spacer {height:0px;}
    .RightContentZone .spacer {height:0px;}

By doing this, it should eliminate the space between every content box on every page, right?
TopBottom

Mottie (MVP) 9/30/2008 11:16 AM EST : RE: Removing the space between content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Well yes and no LOL

I think the problem here is I changed my custom content box HTML between these two posts.

In this older post of how to add a theme using CSS, you will see that the custom content box HTML ends with a line break "<br>"... Here is the complete code for the "center" content box so there is no confusion (the break is in red).
<table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="ctopleft"></td>
  <td class="ctoptile"><div class="ContentBoxTitle">$block[title]&nbsp</div></td>
  <td class="ctopright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="clefttile"></td>
  <td class="ContentBoxBody">$block[content]&nbsp</td>
  <td class="crighttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="cbottomleft"></td>
  <td class="cbottomtile">&nbsp;</td>
  <td class="cbottomright"></td>
</tr>
</table>
</td></tr></table>
<br>
In this newer post of how to have a different style for each content box, the custom content box HTML was completely changed. And instead of a line break "<br>", I added a "<div class="spacer"></div>". This is colored blue in the HTML below:

<div id="box_$block[title]">
<div class="ContentBox">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="topleft"></td>
  <td class="toptile"><div class="ContentBoxTitle">$block[title]&nbsp;</div></td>
  <td class="topright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lefttile"></td>
  <td class="ContentBoxBody">$block[content]&nbsp;</td>
  <td class="righttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="bottomleft"></td>
  <td class="bottomtile">&nbsp;</td>
  <td class="bottomright"></td>
</tr>
</table>
</div>
<div class="spacer"></div>
</div>

The reason this was done was do that you could modify the spacing between each content box. To set the spacing for the entire site, just add this line to the CSS. I call this the "base" CSS definition.

.spacer {height:10px;}

If you want to remove the spacing from an entire column like the right column on my test-site 3, you can add this CSS. But add it BELOW the base ".spacer" CSS definition.

.RightContentZone .spacer {height:0px;}

You could also remove the spacing between two content boxes. All you have to do is pick the box above the space you want to remove and set that spacer CSS to zero. Lets say I want to remove the spacing between a box called "Server Status" (at the top) and "Who's Online" (below it). All I need to do is add this CSS.

#box_Server_Status .spacer {height:0px;}

Ok, so I hope that helps clarify everything! 

TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%