Creating boxes on the main page of forum

[Sam]

Hi all,

I was just wondering if anyone knows how you make a main box header for Proboards V5 like on my forum: www.forum.sy-transport.co.uk

Currently it is done via the following code:

<table width="80%" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td class="titlebg" width="100%" colspan="3" height="30" align="center">
<font size=2><b>South Yorkshire Transport Forum Information</B></font>
</td>
</tr>
<tr>
<td width="33%" class="windowbg2" vAlign="top">
<font size=2>Staff Members</font><br />
<br />
<a href="http://www.forum.sy-transport.co.uk/index.cgi?action=viewprofile&user=admin">Admin</a><br />
<br />
<a href="http://www.forum.sy-transport.co.uk/index.cgi?action=viewprofile&user=dougie">Dougie</a><br />
<br />
<a href="http://www.forum.sy-transport.co.uk/index.cgi?action=viewprofile&user=maltabus">Maltabus</a><br />
<br />
<a href="http://www.forum.sy-transport.co.uk/index.cgi?action=viewprofile&user=siy2007">Siy2010</a><br />
<br />


</td>
<td width="33%" class="windowbg" vAlign="center">
<font size=2><img src="http://i294./mm102/sytforum/sytforum.gif" /></a>


</td>
<td width="33%" class="windowbg2" vAlign="top">
<font size=2>Information / Rules</font><br />
<br />
<a href="http://www.sy-transport.co.uk/about.htm">About Us</a><br />
<br />
<a href="http://www.sy-transport.co.uk/guidelines.htm">Forum Rules & Guidelines</a><br />
<br />
<a href="http://www.sy-transport.co.uk/faq.htm">Frequently Asked Questions</a><br />
<br />
<a href="http://www.sy-transport.co.uk/membership.htm">Membership</a><br />
</td>
</tr>
<tr>
<td width="100%" height="10" valign="top" colspan="3" class="windowbg"><p align="center"><a href="http://www.sy-transport.co.uk/welcome.htm"><font
size="2"><b>ALL NEW MEMBERS PLEASE READ <i>THIS</i> BEFORE PROCEEDING.</b></font></a></p></td>
</tr>

<tr>
<td width="100%" height="10" valign="top" colspan="3" class="windowbg"><p align="center"><a href="http://www.sy-transport.co.uk/contact.htm" target="_blank"><img src="http://i294./mm102/sytforum/Contact_Us.gif" border="0" alt="[Contact Us]"></a> <a href="http://www.sy-transport.co.uk/fleetlists/index.htm" target="_blank"><img src="http://i294./mm102/sytforum/Fleetlists.gif" border="0" alt="[Fleetlists]"></a> <a href="http://www.sy-transport.co.uk/index.htm" target="_blank"><img src="http://i294./mm102/sytforum/Information.gif" border="0" alt="[Information]"></a> <a href="http://www.sy-transport.co.uk/maps.htm" target="_blank"><img src="http://i294./mm102/sytforum/Maps.gif" border="0" alt="[Maps]"></a> <a href="http://www.sy-transport.co.uk/maps.htm" target="_blank"> </p></td>
</tr>

<tr>
<td width="100%" height="10" valign="top" colspan="3" class="windowbg"><p align="center">Page View Logged</p></td>
</tr>

<tr>
<td width="100%" height="10" valign="top" colspan="3" class="windowbg"><p align="center"><strong>© South Yorkshire Transport 2006 - 2012. All Rights Reserved.</strong></p></td>
</table>

However when this is put into place, everything is correct apart from the background of the box. Could someone modify this slightly so that it will display correctly please?

Many thanks for any help provided.

Thanks,
Sam

[Brian]

Go to your themes and choose Colors & Styles, and then select the Style Sheet tab for whichever skin you're on.

Place this code at the bottom of your Style Sheet:

.pbtable .content > table > tbody > tr > td {
 border: @content_area_border;
 border-right-width: 0px;
 border-bottom-width: 0px;
 table-layout: fixed;
 overflow: hidden;
 padding: 4px;
}
.pbtable .content > table > tbody > tr > td:first-child {
 border-left-width: 0px;
}
.pbtable .content > table > tbody > tr:first-child > td {
 border-top-width: 0px;
}



Now paste following code in your Headers / Footers (located under Structure):

<div class="container pbtable">
<div class="title-bar">
<h2>South Yorkshire Transport Forum Information</h2>
</div>
<div class="content">
<table width="100%" cellpadding="4" cellspacing="1" align="center">
<tr>
<td width="33%" class="windowbg2" vAlign="top">
<font size=2>Staff Members</font><br />
<br />
<a href="http://www.forum.sy-transport.co.uk/index.cgi?action=viewprofile&user=admin">Admin</a><br />
<br />
<a href="http://www.forum.sy-transport.co.uk/index.cgi?action=viewprofile&user=dougie">Dougie</a><br />
<br />
<a href="http://www.forum.sy-transport.co.uk/index.cgi?action=viewprofile&user=maltabus">Maltabus</a><br />
<br />
<a href="http://www.forum.sy-transport.co.uk/index.cgi?action=viewprofile&user=siy2007">Siy2010</a><br />
<br />


</td>
<td width="34%" class="windowbg" vAlign="center">
<font size=2><img src="http://i294./mm102/sytforum/sytforum.gif" /></a>


</td>
<td width="33%" class="windowbg2" vAlign="top">
<font size=2>Information / Rules</font><br />
<br />
<a href="http://www.sy-transport.co.uk/about.htm">About Us</a><br />
<br />
<a href="http://www.sy-transport.co.uk/guidelines.htm">Forum Rules & Guidelines</a><br />
<br />
<a href="http://www.sy-transport.co.uk/faq.htm">Frequently Asked Questions</a><br />
<br />
<a href="http://www.sy-transport.co.uk/membership.htm">Membership</a><br />
</td>
</tr>
<tr>
<td width="100%" height="10" valign="top" colspan="3" class="windowbg"><p align="center"><a href="http://www.sy-transport.co.uk/welcome.htm"><font
size="2"><b>ALL NEW MEMBERS PLEASE READ <i>THIS</i> BEFORE PROCEEDING.</b></font></a></p></td>
</tr>

<tr>
<td width="100%" height="10" valign="top" colspan="3" class="windowbg"><p align="center"><a href="http://www.sy-transport.co.uk/contact.htm" target="_blank"><img src="http://i294./mm102/sytforum/Contact_Us.gif" border="0" alt="[Contact Us]"></a> <a href="http://www.sy-transport.co.uk/fleetlists/index.htm" target="_blank"><img src="http://i294./mm102/sytforum/Fleetlists.gif" border="0" alt="[Fleetlists]"></a> <a href="http://www.sy-transport.co.uk/index.htm" target="_blank"><img src="http://i294./mm102/sytforum/Information.gif" border="0" alt="[Information]"></a> <a href="http://www.sy-transport.co.uk/maps.htm" target="_blank"><img src="http://i294./mm102/sytforum/Maps.gif" border="0" alt="[Maps]"></a> <a href="http://www.sy-transport.co.uk/maps.htm" target="_blank"> </p></td>
</tr>

<tr>
<td width="100%" height="10" valign="top" colspan="3" class="windowbg"><p align="center">Page View Logged</p></td>
</tr>

<tr>
<td width="100%" height="10" valign="top" colspan="3" class="windowbg"><p align="center"><strong>© South Yorkshire Transport 2006 - 2012. All Rights Reserved.</strong></p></td>
</table>
</div>
</div>


This should mimic your table, but in a V5 fashion.

[Sam]

Works perfectly, thank you very much.

[Sam]

Brian

Just a quick question, when minimising the size of my internet window, the image half dissapears, where as before on V4 it remained static and the other 2 colums where the text are shrank in size to accomodate this. Is there any chance you could potentially look at helping me fix this please?

V5 forum is available on: testsyt.freemessageboards.com/

Thanks,
Sam

[Brian]

Go into your Style Sheet tab again and look for this line (Hint: Ctrl+F opens a search bar):

table { table-layout: fixed; }



And change it to this:

table { table-layout: auto; }



Also, remove the following line from the code I made you put in earlier:

overflow: hidden;

[Sam]

Works perfect, thank you very much Brian.