Postbit Customisation

[Roph]

I'm trying to (or at least I'd like to ) Tidy up the postbit a little; mainly around the avatar and surrounding information.

On a default smf (and pretty much any SMF forum I've ever seen) the avatar, username, karma (if enabled) and postcount etc sort of just float over there, with nothing but empty space seperating them from the posts. here's a screenshot of your average post on the forum:

http://img453.imageshack.us/img453/7772/postbit1rs6.png

As you see, kind of messy. Here's a screenshot from a (vBulletin) forum I frequent, and what they've done with the postbit is simply awesome:

http://img391.imageshack.us/img391/9404/postbit2af2.png

I wouldn't exactly call myself a HTML guru or anything, and something like this is kind of, well, way above my head. At best I just change images and basic css ~_~

Would anybody be interested in giving it a shot? Of course not identical to the second screenshot, but along the lines of something as organised. I'd be moderately ok at editing a rough template probably. I'd image alot of people would be interested in this also

[Roph]

* Silverline peers into the darkness~

Nobody there?

Anyway, I've had a few more shots at this, though I still come up short. The forum's favourite error to throw in my face is the "unable to load template 'main'" error, which would indicate I suck

I have a basic understanding of HTML, and only a familiarity with PHP ;-; But I think that armed with the right knowledge of where to put stuff in without breaking anything, creating a few tables around the avatar / surrounding things in a way similar to the screenshot wouldn't be too hard, would it?

[L.G.S]

Yeah I asked this ageeeess ago but didn't get anywhere with it, I would love to have this because it would make the forum just look so more professional and clean. I'd help ya out but I only know a bit of HTML and not enough to have a good outcome, sorry

[m3talc0re]

What exactly is it that you're trying to do? Have you viewed how I've got mine? View my forums, link's in my sig.

[L.G.S]

Your forums do not have any sort of modified post information template though

He means like this: http://img391.imageshack.us/img391/9404/postbit2af2.png

and for example like IPB where there are tables around the information which makes it look much better.

[m3talc0re]

Actually mine is modified more than you think. Click a member name. As for these "tables" around IPB's, I don't see 'em?

[L.G.S]

Actually mine is modified more than you think. Click a member name. As for these "tables" around IPB's, I don't see 'em?

Depends on the theme. Default IPB doesn't have them but custom themes do.

Your version is nice but it's not what I think the poster is looking for, nor me.

I will try to find a preview of what I mean somewhere.

[Roph]

Oh hi guys =D

I thought I'd bump this thread with an example of where I've got so far:

http://rmrk.net/index.php/topic,10661.0.html?theme=11

I still need to finish up a few things, but I'd consider it almost complete =o I'm not sure how I'd distribute it once I've finished it, as I've done alot of editing to the display template, though maybe I could find a way.

[N3lson]

Like this one?

[rockinaway]

^^^Thats a very nice one, still kinda cluttered but you need all that info

[L.G.S]

Like this one?

http://img411.imageshack.us/img411/1482/semttulohp2.jpg

Could ya upload somewhere else please, it doesn't work

[Roph]

I get the same, I guess that server is down then.

I've done some more work on mine, here's a link. I still need to sort out the gender icon placement yet.

[rockinaway]

Looks good... I will have a go on my forum later on..

[L.G.S]

I get the same, I guess that server is down then.

I've done some more work on mine, here's a link. I still need to sort out the gender icon placement yet.

Looks excellent. Could ya post the changes you made ?

[N3lson]

^^^Thats a very nice one, still kinda cluttered but you need all that info

Like this one?

http://img411.imageshack.us/img411/1482/semttulohp2.jpg

Could ya upload somewhere else please, it doesn't work

what doesn´t work ...?

[rockinaway]

The link I guess

[N3lson]

The link I guess

the link of the imagshack?
the link work fine...

[Roph]

Re-uploaded for those who can't seem to load it from that one:

http://img171.imageshack.us/img171/3415/semttulohp2ss1.jpg

[Roph]

Looks excellent. Could ya post the changes you made ?

Alright, here's a tidied up version, I've been tweaking it a little.

Here's screenshots of it in action:



[edit] Updated: (30th June '07) both Display.template.php and style.css.

Always keep backups of your files that you're editing in case something goes wrong!

I assume you have at least some basic knowledge of HTML / CSS and possibly some PHP with this. If your forum's avatar size isn't 105x150 like mine (probably isn't ) you'll have to edit this to suit your own forum.



In display.template.php, find

Code Select Expand

// Show information about the poster of this message.
and

Code Select Expand

// Done with the information about the poster... on to the post itself
(wording my vary between themes but it should say something similar).

Delete everything in between those two lines, and replace it with this:

Code Select Expand

// Here begins the custom postbit.
echo '
<table width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
<tr>
<td valign="top" width="165" rowspan="2" style="overflow: hidden;">
<table border="0" cellpadding="0" cellspacing="0" width="159" background="' . $settings['images_url'] . '/postbit/top.gif">

<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="22">
<tr>
<td width="8"></td>
<td width="130" align="center"><b>', $message['member']['link'],' </td>
<td>
<div align="center">
&nbsp;';

// Gender icons are shown up top next to the username, in a special area.
if (!empty($settings['show_gender']) && $message['member']['gender']['image'] != '')
echo '
', $message['member']['gender']['image'], '';

//close the postbit top bar and show the main postbit area, including avatar backing:
echo '</div>
</td>
</tr>
</table>

</td>
</tr>
</table></center></b></div><div class="postbit-main"><center><table border="0" cellpadding="0" cellspacing="0" width="109" height="154">
<tr>

<td background="' . $settings['images_url'] . '/postbit/avatarback.gif" valign="middle" align="center">';
// If the user has avatar display set to ON, Display the avatar itself:
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
', $message['member']['avatar']['image'], '';
//if the avatar was shown or not, close it's table.
echo'
</td>
</tr>
</table><div class="postbit-info"><span class="postbit-main-info">';

// Show the member's primary group (like 'Administrator') if they have one. ##Uncomment this to enable. I have it disabled as their primary group is displayed text in a single star image.##
/* if (isset($message['member']['group']) && $message['member']['group'] != '')
echo '
  ', $message['member']['group'], '<br />';  */



// Don't show these things for guests.
if (!$message['member']['is_guest'])
{
// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
echo '
', $message['member']['group_stars'], '<br />';
echo '
  ', $message['member']['post_group'], '<br />';
 
// Show the member's custom title, if they have one.
if (isset($message['member']['title']) && $message['member']['title'] != '')
echo '
  ', $message['member']['title'], '<br />';

// Is karma display enabled?  Total or +/-?
if ($modSettings['karmaMode'] == '1')
echo '
', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '<br />';
elseif ($modSettings['karmaMode'] == '2')
echo '

', $modSettings['karmaLabel'], ' +', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '<br />';

// Is this user allowed to modify this member's karma?
if ($message['member']['karma']['allow'])
echo '
<a href="', $scripturl, '?action=modifykarma;sa=applaud;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.' . $context['start'], ';m=', $message['id'], ';sesc=', $context['session_id'], '">', $modSettings['karmaApplaudLabel'], '</a>
<a href="', $scripturl, '?action=modifykarma;sa=smite;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';m=', $message['id'], ';sesc=', $context['session_id'], '">', $modSettings['karmaSmiteLabel'], '</a><br />';

// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', $settings['use_image_buttons'] ? '<img src="' . $message['member']['online']['image_href'] . '" alt="' . $message['member']['online']['text'] . '" border="0" style="margin-top: 2px;" />' : $message['member']['online']['text'], $context['can_send_pm'] ? '</a>' : '', $settings['use_image_buttons'] ? '<span class="smalltext"> ' . $message['member']['online']['text'] . '</span>' : '', '<br />';

// Show how many posts they have made.
echo '
  ', $txt[26], ': ', $message['member']['posts'], '
  <br />';



// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
', $message['member']['blurb'], '<br />
';

//This finishes up the main template.
echo'</div></span>';

// Following is the bottom bar, which contains the contact info and email, online buttons, etc.
echo '
<div class="postbit-bottom">', $message['member']['icq']['link'], '
', $message['member']['msn']['link'], '
', $message['member']['aim']['link'], '
', $message['member']['yim']['link'], '';

// Show the profile, website, email address, and personal message buttons.
if ($settings['show_profile_buttons'])
{
// Don't show the profile button if you're not allowed to view the profile.
if ($message['member']['can_view_profile'])
echo '
<a href="', $message['member']['href'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/icons/profile_sm.gif" alt="' . $txt[27] . '" title="' . $txt[27] . '" border="0" />' : $txt[27]), '</a>';

// Don't show an icon if they haven't specified a website.
if ($message['member']['website']['url'] != '')
echo '
<a href="', $message['member']['website']['url'], '" title="' . $message['member']['website']['title'] . '" target="_blank">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/www_sm.gif" alt="' . $txt[515] . '" border="0" />' : $txt[515]), '</a>';

// Don't show the email address if they want it hidden.
if (empty($message['member']['hide_email']))
echo '
<a href="mailto:', $message['member']['email'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt[69] . '" title="' . $txt[69] . '" border="0" />' : $txt[69]), '</a>';

// Since we know this person isn't a guest, you *can* message them.
if ($context['can_send_pm'])
echo '
<a href="', $scripturl, '?action=pm;sa=send;u=', $message['member']['id'], '" title="', $message['member']['online']['label'], '">', $settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/im_' . ($message['member']['online']['is_online'] ? 'on' : 'off') . '.gif" alt="' . $message['member']['online']['label'] . '" border="0" />' : $message['member']['online']['label'], '</a>';
}
}
// Otherwise, show the guest's email.
elseif (empty($message['member']['hide_email']))
echo '
<br />
<br />
<a href="mailto:', $message['member']['email'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt[69] . '" title="' . $txt[69] . '" border="0" />' : $txt[69]), '</a><center></div>';

// End custom postbit here. Phew!

Ok, that's the template down, now for the images. Go to the images directory of the theme you're editing, and create a new folder called postbit. (example: http://yoursite.com/forums/Themes/!theme-name!/images/postbit/).

Put these images in there if you want to use the light version:



Or these in there for the dark version:



That's the images done. One more thing left to do is the CSS. Open up your CSS file for your theme, and add this to the end for the light version:

Code Select Expand

/* Tidy up the postbit a little */

.postbit-main
{
padding-top: 4px;
background-color: #D3D2DA;
width: 159px;
}

/*add dotted seperators in between the information in the postbit - looks alot nicer than plain old underline. */
.postbit-main-info
{
border-bottom: dotted 1px #999999;
}


.postbit-info
{
padding-top: 4px;
padding-bottom: 4px;
width: 130px;
}

.postbit-bottom
{
padding-top: 6px;
width: 159px;
height: 22px;
background-color: #B6B3BE;
}

Or this to your css for the dark version:

Code Select Expand

/* Tidy up the postbit a little */

.postbit-main
{
padding-top: 4px;
background-color: #39364A;
width: 159px;
}

/*add dotted seperators in between the information in the postbit - looks alot nicer than plain old underline. */
.postbit-main-info
{
border-bottom: dotted 1px #999999;
}

.postbit-info
{
padding-top: 4px;
padding-bottom: 4px;
width: 130px;
}

.postbit-bottom
{
padding-top: 6px;
width: 159px;
height: 22px;
background-color: #546075;
}

After doing this, you should be done, and should be looking at your cool new postbits .

Of course, customize the images / CSS etc to suit your own forum =)

If not, then eek . I'd advise you to backup your display.template.php file, incase it doesn't go well for you, in which case you can restore it.

[L.G.S]

Thanks for this!

Anyway to make it like the other one too? EG how the boxes has 2 pixel border like here:

http://img171.imageshack.us/img171/3415/semttulohp2ss1.jpg

Makes it look cleaner and neater