Boxes around avatars and postbit information...

[TylerK10]

Can someone help me put a border and background around avatars and postbit information, exactly how it is on TeamXbox (and also center the username and user title)?

Colors and pixel width don't matter, so I guess it could just be a black border with a white background and any with for now. That, I can always edit later.

(I've seen some threads with tutorials on similar ways of doing this but they're not quite what I'm trying to do.)

[alkahf]

postbit_legacy

Hollo
1 - Open: Postbit Templates > postbit_legacy template:
serch for:

<td class="alt2" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px">

Replace with:

<td class="alt2" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px" align="center">

2 - serch for:

				<div class="smallfont">
					&nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
				</div>

Replace with:

                <table align="center" cellpadding="6" cellspacing="0" style="border: 1px solid #5B5B5B; background: #FFFFFF;">
                <tr>
                  <td valign="top">
                    <div><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></div>
                  </td>
                </tr>
                </table>

3 - serch for:

				<if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if>
				<if condition="$post['field2']"><div>$vbphrase[location_perm]: $post[field2]</div></if>
				<if condition="$post['age']"><div>$vbphrase[age]: $post[age]</div></if>
				<div>
					$vbphrase[posts]: $post[posts]
				</div>

Replace with:

<if condition="$post[joindate]">
    <input type="text" name="joindate" size="30" value="$vbphrase[join_date]: $post[joindate]" style="border-style:solid; border-width:1px; font-size:8pt; vertical-align:middle; letter-spacing:0;; padding-left:2px; padding-right:2px; padding-top:1px; padding-bottom:1px; color:#000000; background-color:#FFFFFF"><br>
    <if condition="$post[field2]">
    <input type="text" name="location" size="30" value="$vbphrase[location_perm]: $post[field2]" style="border-style:solid; border-width:1px; font-size:8pt; vertical-align:middle; letter-spacing:0;; padding-left:2px; padding-right:2px; padding-top:1px; padding-bottom:1px; color:#000000; background-color:#FFFFFF"><br></if>
    <if condition="$post[age]">
    <input type="text" name="age" size="30" value="$vbphrase[age]: $post[age]" style="border-style:solid; border-width:1px; font-size:8pt; vertical-align:middle; letter-spacing:0;; padding-left:2px; padding-right:2px; padding-top:1px; padding-bottom:1px; color:#000000; background-color:#FFFFFF"><br></if>
    <input type="text" name="posts" size="30" value="$vbphrase[posts]: $post[posts]" style="border-style:solid; border-width:1px; font-size:8pt; vertical-align:middle; letter-spacing:0;; padding-left:2px; padding-right:2px; padding-top:1px; padding-bottom:1px; color:#000000; background-color:#FFFFFF"><br> 
</if>
<br />

Click Save.
Thats all


akahf

[TylerK10]

Thanks! Although a good start, it's not 100% what I want to do. I tried to modify it myself with no luck.

I want there to be a 1px or so space between the username and avatar because usernames with characters that hang under (y, g, q, j, etc.) they are overlapping the avatar. I see TeamXbox fixed that with a one or two pixel space between it but I do not know how to add it.

Also, I want the user titles and ranks to display under the avatar. And I don't want the instant messaging icons centered. My maximum avatar width is 150px. Can I set the boxes for the information parts to 150px wide only at all times? And whenever I try to adding more padding between the text and the border it just stretches the whole thing.

[alkahf]

Code number 2 change to:

                <div align="center">
					<table cellpadding="6" cellspacing="0" style="border: 1px solid #5B5B5B; background: #FFFFFF;" width="154" height="104">
                <tr>
                  <td valign="top">
                    <div><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></div>
                  </td>
                </tr>
                </table></div>

And past in postbit_legacy template above code:

			<if condition="$post['usertitle']"><div class="smallfont">$post[usertitle]</div></if>

In Code number 3 you can change codes:
size="30"
To:
size="20" or 22 or 25

That is all my help
Good luck

alkahf