Need help with a template hack!

All files from this thread

File Name	File Size		Posted by	Date
read_tpl.php	4.5 KB	open | download	Ryan	06/09/2004	Read message

o.k here's what I have, a template which displays an Avatar, Location & number of posts in a box


To get this, in 'read.tpl' I've put -

{loop MESSAGES}
<table width="100%" class="PhorumStdTableHackedGlobal">
<tr>
<td valign="top" width="200" height="100%" nowrap>
<table width="100%" height="100%" class="PhorumStdTableHacked">
<tr>
<td valign="top" width="200" height="100%" nowrap><p>
<a name="{MESSAGES->message_id}"></a><div class="PhorumReadBodyHead"><strong>{MESSAGES->linked_author}</strong><br> ({MESSAGES->ip})</br><br></p><p align="center">
<div class="PhorumReadBodyHead">{MESSAGES->datestamp}<br></br><p>{IF MESSAGES->user->locale_name}{LANG->LocaleName}:&nbsp;{MESSAGES->user->locale_name}{/IF}<br /></p>
</td>
</tr>
</table>
{IF MESSAGES->parent_id 0}
</td><td valign="top"><div class="PhorumStdBlock"><b style="background-color:#FFFFF0"><div class="PhorumReadBodySubject"></div><font color=#999999>
{MESSAGES->subject}</font></b>&nbsp;<br></br>
{ELSE}
</td><td valign="top"><div class="PhorumStdBlock"><b style="background-color:#FFFFF0"><div class="PhorumReadBodyHead"><strong><font color=#999999>{MESSAGES->subject}</strong></font></b>&nbsp;<br></br>
{/IF}
<div class="PhorumReadBodyText">{MESSAGES->body}</div><br />
<br />
{IF ATTACHMENTS}
{IF MESSAGES->attachments}
{LANG->Attachments}:
{ASSIGN MESSAGE_ATTACHMENTS MESSAGES->attachments}
{LOOP MESSAGE_ATTACHMENTS}
<a href="{MESSAGE_ATTACHMENTS->url}">{MESSAGE_ATTACHMENTS->name} ({MESSAGE_ATTACHMENTS->size})</a>&nbsp;&nbsp;
{/LOOP MESSAGE_ATTACHMENTS}
{/IF}
{/IF}
</div>

{if MODERATOR true}
<div class="PhorumReadNavBlock" style="text-align: left;">
<span class="PhorumNavHeading PhorumHeadingLeft">{LANG->Moderate}:</span>&nbsp;{if MESSAGES->threadstart true}
<a class="PhorumNavLink" href="javascript:if(window.confirm('{LANG->ConfirmDeleteThread}')) window.location='{MESSAGES->delete_url2}';">{LANG->DeleteThread}</a>&bull;<a class="PhorumNavLink" href="{MESSAGES->move_url}">{LANG->MoveThread}</a>{if MESSAGES->closed false}&bull;<a class="PhorumNavLink" href="{MESSAGES->close_url}">{LANG->CloseThread}</a>{/if}{if MESSAGES->closed true}&bull;<a class="PhorumNavLink" href="{MESSAGES->reopen_url}">{LANG->ReopenThread}</a>{/if}
{/if}
{if MESSAGES->threadstart false}
<a class="PhorumNavLink" href="javascript:if(window.confirm('{LANG->ConfirmDeleteMessage}')) window.location='{MESSAGES->delete_url1}';">{LANG->DeleteMessage}</a>&bull;<a class="PhorumNavLink" href="javascript:if(window.confirm('{LANG->ConfirmDeleteMessage}')) window.location='{MESSAGES->delete_url2}';">{LANG->DelMessReplies}</a>
{/if}
&bull;<a class="PhorumNavLink" href="{MESSAGES->hide_url}">{LANG->HideMessage}</a>&bull;<a class="PhorumNavLink" href="{MESSAGES->edit_url}">{LANG->EditPost}</a>
</div>
{/if}
<div class="PhorumReadNavBlock" style="text-align: left;">
<span class="PhorumNavHeading PhorumHeadingLeft">{LANG->Options}:</span>&nbsp;<a class="PhorumNavLink" href="{MESSAGES->reply_url}">{LANG->Reply}</a>&bull;<a class="PhorumNavLink" href="{MESSAGES->quote_url}">{LANG->QuoteMessage}</a>&bull;<a class="PhorumNavLink" href="{MESSAGES->report_url}">{LANG->Report}</a>{if MESSAGES->edit 1}&bull;<a class="PhorumNavLink" href="{MESSAGES->edituser_url}">{LANG->EditPost}</a>{/if}
</div>
</td>
</tr>
</table></div>
<br /><br />
<div align="center">
{/loop MESSAGES}

{if PAGES}
<div class="PhorumNavBlock" style="text-align: left;">
<span class="PhorumNavHeading">{LANG->Pages}:</span>&nbsp;
{if URL->PREVPAGE}<a class="PhorumNavLink" href="{URL->PREVPAGE}">{LANG->PrevPage}</a>{/if}
{if URL->FIRSTPAGE}<a class="PhorumNavLink" href="{URL->FIRSTPAGE}">{LANG->FirstPage}...</a>{/if}
{loop PAGES}<a class="PhorumNavLink" href="{PAGES->url}">{PAGES->pageno}</a>{/loop PAGES}
{if URL->LASTPAGE}<a class="PhorumNavLink" href="{URL->LASTPAGE}">...{LANG->LastPage}</a>{/if}
{if URL->NEXTPAGE}<a class="PhorumNavLink" href="{URL->NEXTPAGE}">{LANG->NextPage}</a>{/if}
</div>
<span class="PhorumNavHeading PhorumHeadingLeft">{LANG->CurrentPage}:</span>{CURRENTPAGE} {LANG->of} {TOTALPAGES}
</div>
{/if}
<br /><br />


I have two small problems.
Firstly, I can't seem to make both boxes the same size all the time. Obviously, the left box changes depending on the size of avatar, info etc...so I want the message box to stay the same size regardless of how much is written in it. I can't seem to get them to be be constant in relation to each other.

After the first message, the bit that says 'Options' appears inside the box rather than below it as in the first message


Can anybody help!!

Mike







Edited 4 time(s). Last edit at 06/14/2004 02:27PM by Mandingo.

> Firstly, I can't seem to make both boxes the same
> size all the time.

Put a table around both of those tables, try something like this:

<table cellspacing="5" cellpadding="2" border="0"> <tbody>
<tr>
<td valign="top"><table height="100%" cellspacing="1" border="1">
<tbody>
<tr>
<td>username (IP logged) info etc.</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"><table height="100%"cellspacing="1" border="1">
<tbody>
<tr>
<td>subject, message, etc.</td>
</tr>
<tr>
<td>Options, etc.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Try something to this extent.

Also, you could try something like this. It's what you wrote, only using something like what I posted before. It makes both tables you used the same height, no matter the length or shortness of either table (also cleaned up some of the code, like <br /> for the </br>).

Attachment is read_tpl.php, just download, take off the .php and change _tpl to .tpl.

Thanks for your help, but it still doesn't work. The mesage box now resizes it's width according to what's written in it, and the 'options' field is now inside the box on all messages, making it the wrong size in relation to the box on the left all the time :-(

I thought you wanted options inside the box? Or did you want it under the entire span of both the left and right side?

Try it again with the two tables in one table, and put the right one, where the comments is, to width="100%" if not already, in the first table's td for that, and the table tag representing the right side. Then, if not already done, put a fixed width in the first table's td for the left side, and for the table's tag representing the left side. You could also try a style for the left side, like style="width: 170px". Css overrides most html commands.

O.k. I will try it, thanks for all your help!
Yep, I wanted the 'options' outside the box ;-)

O.K. I got it working! Thanks SO MUCH!

I just need to span the options under the entire span of both the left and right sides. Can't work that out either, sorry I'm a dumbo! But learning...;-) Apart from that, it's 100% working!

For the options box, since the first table (with border="0" is holding the two to those sizes, once you finish up the typing for the first two tables, try

<tr>
<td colspan="2">(options stuff)</td>
</tr>

before you get to the final </tbody></table> The border from the table won't show up set at zero, but if you put a class style in the td with a border set in the css, it'll put a nice border just for that td.

Excellent! Thanks again!

;-)