Staff Avatar Background

[peterska2]

Originally Posted by slappy

Yep. I was adding it while you were correcting my omission.

Thanks.

Is the use of the else / if considered better formatting?

Regards,

From the vB Manual

vBulletin template conditionals do not natively support 'else if', but you can easily replicate its behavior by nesting conditionals as follows:

<if condition="$my_variable == 1">
    <p>My variable is equal to one.</p>
<else />
    <if condition="$my_variable == 2">
        <p>My variable is equal to two.</p>
    <else />
        <p>My variable is equal to neither one nor two.</p>
    </if>
</if>

[Wired1]

Ok, now to get complicated. I THINK this can be done with some CSS and DIVs, not sure.

Having the badge.png overlay the avatar so that you keep the rounded edges of the inside box (assuming that's what people use when they create their own badges). Either way the overlay can help hide the fact that some avatars are different sizes (or at least help you from making a badge for EVERY avatar size).

That would also allow for better positioning, as for right now, it's not REALLY in position. You could use some creative table and cell creation to force it there, but with multiple usergroups and avatar sizes that'd quickly become a pain in the side.

[slappy]

Thanks Kerry-Anne:

I was thinking of the javascript structure:

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>

<p>
This example demonstrates the if..else if...else statement.
</p>

Still have alot to learn.

Regards,

[Wired1]

FYI I've made a post at WDF for help for potential CSS solutions to my new question concerning CSS layers and the like:

http://www.webdesignforums.net/showthread.php?t=24578


Now for this hack we've all worked on to kick some booty, some type of backend that would easily allow you to assign badges to usergroups would rock, w/ some dynamic code that'd create some/all of the conditionals. AdminCP stuff. Yes, this is way out of my forte

[Allan]

For you if you want ^^ :

• For team :

• Code:

<!-- START - TEST FOR AVATAR HACK -->
<if condition="$show['avatar']">
<!-- ADMIN -->
<if condition="$post[usergroupid]==6">
<!-- I am an admin so do this -->
<td class="alt2">
  <table cellpadding="5" cellspacing="0" border="0" width="150" height="70" align="center">
      <tr>
        <td background="$stylevar[imgdir_misc]/badge6.png" nowrap="nowrap" no-repeat><img src="$post[avatarurl]" height="56" width="56" align="right"></td>
      </tr>
  </table>
</td>
<!-- ADMIN -->
<else />
<!-- MODERATOR -->
<if condition="$post[usergroupid]==7 ">
<td class="alt2">
  <table cellpadding="5" cellspacing="0" border="0" width="150" height="70" align="center">
      <tr>
        <td background="$stylevar[imgdir_misc]/badge7.png" nowrap="nowrap" no-repeat><img src="$post[avatarurl]" height="56" width="56" align="right"></td>
      </tr>
  </table>
</td>
<!-- MODERATOR -->
<else />
<!-- SUPER MODERATOR -->
<if condition="$post[usergroupid]==5 ">
<td class="alt2">
  <table cellpadding="5" cellspacing="0" border="0" width="150" height="70" align="center">
      <tr>
        <td background="$stylevar[imgdir_misc]/badge5.png" nowrap="nowrap" no-repeat><img src="$post[avatarurl]" height="56" width="56" align="right"></td>
      </tr>
  </table>
</td>
<!-- SUPER MODERATOR -->
<else />
<!-- CODER -->
<if condition="$post[usergroupid]==10 ">
<td class="alt2">
  <table cellpadding="5" cellspacing="0" border="0" width="150" height="70" align="center">
      <tr>
        <td background="$stylevar[imgdir_misc]/badge10.png" nowrap="nowrap" no-repeat><img src="$post[avatarurl]" height="56" width="56" align="right"></td>
      </tr>
  </table>
</td>
<!-- CODER -->
<else />
<!-- TRANSLATOR -->
<if condition="$post[usergroupid]==9 ">
<td class="alt2">
  <table cellpadding="5" cellspacing="0" border="0" width="150" height="70" align="center">
      <tr>
        <td background="$stylevar[imgdir_misc]/badge9.png" nowrap="nowrap" no-repeat><img src="$post[avatarurl]" height="56" width="56" align="right"></td>
      </tr>
  </table>
</td>
<!-- TRANSLATOR -->
<else />
<!-- NO GROUP -->
  <td class="alt2">
      <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>
  </td>
<!-- NO GROUP -->
</if>
</if>
</if>
</if>
</if>
</if>
<!-- END - TEST FOR AVATAR HACK -->

[Smiry Kin's]

Originally Posted by slappy

Something like this?

<if condition="$show['avatar']">
<!-- check for admin -->
<if condition="$post[usergroupid]==6">
<!-- I am an admin so do this -->
<td class="alt2">
  <table cellpadding="5" cellspacing="0" border="0" width="124" height="82" align="center">
      <tr>
        <td background="$stylevar[imgdir_misc]/badge.png" nowrap="nowrap" no-repeat><img src="$post[avatarurl]" height="64" width="59" align="right"></td>
      </tr>
  </table>
</td>
<else />
<if condition="$post[usergroupid]==X ">
<!-- I am in this usergroup so do this -->
<td class="alt2">
  <table cellpadding="5" cellspacing="0" border="0" width="124" height="82" align="center">
      <tr>
        <td background="$stylevar[imgdir_misc]/badge2.png" nowrap="nowrap" no-repeat><img src="$post[avatarurl]" height="64" width="59" align="right"></td>
      </tr>
  </table>
</td>
<else />
<!-- I am not in either of those groups so do this -->
  <td class="alt2">
      <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>
  </td>
</if>
</if>
</if>

Oops. Look like the else needs to be else/if .

doesnt seem to work.. i get this..


dont care to much about it being out of postition, but i just dont see why the no repeat isnt working.

[peterska2]

You need to adjust the height and width settings for the size of the badge that you are using.

[Allan]

Originally Posted by peterska2

You need to adjust the height and width settings for the size of the badge that you are using.

No, it's size to avatar Which is too big

[peterska2]

Yes but the table height and width need to match the images.

[Wired1]

Gotta love that we've got an admin that is the ONLY person on the board who has a large avatar, 125x125. Yep, it's an animated gif. No, can't make them change it. Bastid.

One guy @ WDF said this:

I would probably put two img elements in one div (or two divs with a background in one div, whichever) and layer them over each other with absolute positioning + z-index to specify which is on top. Alternatively, put them in the right order. The point is, use two elements instead of just the one. Alternatively, you can do it the same way it is right now, except with the thing you want in the whole as a background. Then use the background-position property to put the avatar where it needs to go.

This help anyone?