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! > Content Box - Removal of space between them
Brakkish Hammerfist (Guild Admin) 6/8/2008 3:16 PM EST : Content Box - Removal of space between them
Brakkish Hammerfist
Posts: 173
Posts With Wolves

Hi, I'm looking to remove the padding/spacing in between my content boxes.


I have some custom borders with chains hanging above and below, they are just 5 or 6 pixes shy of visually connecting it looks like.

Thanks in advance.

http://www.guildportal.com/Guild.aspx?GuildID=262696&TabID=2206755
TopBottom

Mottie (MVP) 6/8/2008 6:47 PM EST : RE: Content Box - Removal of space between them
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Brakkish,

I love the styling! Wood and Metal always looks cool

I think the problem with the chains not meeting is with the default content box styling, they automatically add a break between containers. All you need to do is make your own:

Go to Control Panel > Style & Colors > Content Containers: Left, Center & Right... all three need to be modified. The HTML is below can be posted into all three if you plan on having all columns look the same.

Content Containers (Left, Center and Right)
<table border="0" cellspacing="0" cellpadding="0" width="100%">
 <tr>
  <td class="topleft"></td>
  <td class="topbar"><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 rowspan="2"><div class="ContentBoxBody">$block[content]&nbsp</div></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>
then add the following to your Custom StyleSheet. I copied the existed CSS that the site made for you in blue below (only add it if your Custom StyleSheet is currently blank). The part is green is what needs to be added for your images to work.

Custom StyleSheet
html, body, div, p, table, td, form, img, h1, h2, h3, h4, h5, h6, input, select {font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 9pt;}
body {background-color: #000000;}
form {padding: 3px;border: none;}
img { border: none; }
hr { color: #333333; }
.BannerArea {padding: 10px;text-align: center;color: #FFFFFF;font-size: 130%;font-weight: bold;}
.straightBarWrapper { text-decoration: none; padding: 2px; text-align: left; height: 15px;}
.straightBarSpacer { margin-left: 3px; border-left: solid 1px ; height: 95%;  width: 3px; text-align: center;}
.straightBarNormalTab { font-weight: bold;padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 4px; height: 100%;  text-align: left; }
.straightBarNormalTab a:link {text-decoration: none;}
.straightBarNormalTab a:visited {text-decoration: none; }
.straightBarNormalTab a:hover {text-decoration: none; }
.straightBarNormalTab a:active {text-decoration: none; }
.straightBarActiveTab { font-weight: bold; padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 4px; height: 100%; }
.straightBarActiveTab a:link {text-decoration: none;}
.straightBarActiveTab a:visited {text-decoration: none; }
.straightBarActiveTab a:hover {text-decoration: none; }
.straightBarActiveTab a:active {text-decoration: none; }
.straightBarMouseOverTab { font-weight: bold;  height: 100%; padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 4px;}
.straightBarMouseOverTab a:link {text-decoration: none; }
.straightBarMouseOverTab a:visited {text-decoration: none; }
.straightBarMouseOverTab a:hover {text-decoration: none; }
.straightBarMouseOverTab a:active {text-decoration: none; }
.MoGridRow { text-align: left; }
.AltGridRow {background-color: #000000;color: #FFFFFF;}
.NormGridRow {background-color: #000000;color: #FFFFFF;}
.ContentBox {background-color: #000000;border: solid 1px #333333;}
.ContentBoxTitle {padding-top: 10px;color: #FFFFFF;}
.ContentBoxBody {background-color: #000000;color: #FFFFFF;padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;}
.StateBar {background-color: #000000;color: #FFFFFF;text-align: center;padding: 5px;}
.ForumCategoryHeader {background-color: #000000;color: #FFFFFF;border-width: 1px 1px 1px 1px;border-style: solid;border-color: #333333;padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;margin: 1px;}
.MessageAuthorLinkCell1{width: 135px;}
.MessageAuthorInfoCell1{text-align: center;width: 135px;vertical-align: top;}
.ContentBoxTitleNoBackground {color: #FFFFFF;margin-top: 0px;padding-top: 0px;}
A:active {color: #CCCCCC; text-decoration: none;}
A:link {color: #CCCCCC; text-decoration: none;}
A:hover {color: #CCCCCC; text-decoration: underline;}
A:visited {color: #999999; text-decoration: none;}
.toolTipHeader {color: lime;font-weight: bold;}
#dhtmltooltip {position: absolute;width: 150px;border: solid 1px white;padding: 3px;background-color: black;color: white;visibility: hidden;z-index: 100;}


.topleft { background: #000 url(http://i24.photobucket.com/albums/c13/mikkhammerfist/War-Website/Topleftcorner.jpg) no-repeat; height:84px; width:65px; }
.topbar { background: #000 url(http://i24.photobucket.com/albums/c13/mikkhammerfist/War-Website/Topmiddle.jpg) repeat-x; height:84px; }
.topright { background: #000 url(http://i24.photobucket.com/albums/c13/mikkhammerfist/War-Website/Topright.jpg) no-repeat; height:84px; width:61px; }
.lefttile { background: #000 url(http://i24.photobucket.com/albums/c13/mikkhammerfist/War-Website/Leftverticle.jpg) repeat-y; width:65px; }
.righttile { background: #000 url(http://i24.photobucket.com/albums/c13/mikkhammerfist/War-Website/rightverticle.jpg) repeat-y; width:61px; }
.bottomleft { background: #000 url(http://i24.photobucket.com/albums/c13/mikkhammerfist/War-Website/bottomleft.jpg) no-repeat; height:77px; width:65px; }
.bottomtile { background: #000 url(http://i24.photobucket.com/albums/c13/mikkhammerfist/War-Website/content_boxes_sliced_08.jpg) repeat-x; height:77px; }
.bottomright { background: #000 url(http://i24.photobucket.com/albums/c13/mikkhammerfist/War-Website/bottommiddle.jpg) no-repeat; height:77px; width:61px; }

That's all there is to it...

One more thing I want to mention though, with your borders being so wide, you might want to increase the size of your right and left containers. Go to Control Panel > Site Pages... then find "Home" and in that same row you'll see "Display Options". I personally would make the Left and Right Pane Widths around 250px. Leave the Center Pane Width blank.

Keep up the nice work!
TopBottom

Brakkish Hammerfist (Guild Admin) 6/8/2008 6:54 PM EST : RE: Content Box - Removal of space between them
Brakkish Hammerfist
Posts: 173
Posts With Wolves

You...are,.. truly... amazing! 


Thanks a ton
TopBottom

chefricochet (Guild Admin) 6/9/2008 2:36 AM EST : RE: Content Box - Removal of space between them
chefricochet
Posts: 209
Fingers of Fury!

NICE! OK, I am a dummy, and totally in the dark on doing this! I have designed my page as it is with the little abilities I have.
Would you please visit http://chainmail.guildportal.com
to take a look, and see how great those borders would look!
With the exception of the skull! I would prefer acoat of arms!
Then put in an application, so I can approve you, give you super admin,  and install them?
PLease, I need the help!
    Thank You, Laggin

     http://chainmail.guildportal.com

Laggin
If you love something, set it free! If it doesn't come back; hunt it down, and kill it!
TopBottom

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