vb.org Archive - Staff Avatar Background

Page 2 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- Modification Requests/Questions (Unpaid) (https://vborg.vbsupport.ru/forumdisplay.php?f=112)

- - Staff Avatar Background (https://vborg.vbsupport.ru/showthread.php?t=120582)

peterska2

07-13-2006 10:15 PM

Quote:

Originally Posted by slappy

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

Thanks.

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

Regards,

From the vB Manual

Quote:

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

HTML Code:

<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

07-13-2006 10:21 PM

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

07-13-2006 10:23 PM

Thanks Kerry-Anne:

I was thinking of the javascript structure:

Code:

<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. :D

Regards,

Wired1

07-13-2006 10:39 PM

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

07-14-2006 09:56 AM

For you if you want ^^ :

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

For team :

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

Code:

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

07-14-2006 12:17 PM

Quote:

Originally Posted by slappy

Something like this?

Code:

<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..
http://img55.imageshack.us/img55/156...orepeat6bq.jpg

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

peterska2

07-14-2006 12:24 PM

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

Allan

07-14-2006 12:39 PM

Quote:

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

07-14-2006 12:46 PM

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

Wired1

07-14-2006 01:38 PM

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:

Quote:

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?

Allan

07-14-2006 02:33 PM

Another problem, the avatar to members don't show :surprised:

Wired1

07-14-2006 03:22 PM

odd, I was testing w/ a local user, worked fine for me.

Allan

07-14-2006 03:26 PM

Do you have same code to me ? (post top)

can you put your code here which I compare ?

Wired1

07-14-2006 06:26 PM

it's pretty much like what slappy posted, except I don't have an extra space after the groupid # like he does:

Code:

<if condition="$post[usergroupid]==X ">

When I get home I'll post my code. If you want to see it in action, got to the house of help (in sig), go to off topic forum near the top. You'll see a test thread there. I believe I still have the code active (can't see site from work).

slappy

07-14-2006 06:34 PM

Oops. That space was just because I took out a groupid number and replaced it with an "X". The space should not be there. The original was:

<if condition="$post[usergroupid]==6">

I'll fix my example code now.

Regards,

Allan

07-14-2006 07:01 PM

Quote:

Originally Posted by Wired1

it's pretty much like what slappy posted, except I don't have an extra space after the groupid # like he does:

Code:

<if condition="$post[usergroupid]==X ">

Ok, thanks ;)

Same problem, avatar members don't show

Quote:

Originally Posted by Allan

Same problem, avatar members don't show

I have find !!

One was missing an <else /> at the end, before no usergroup :banana:

Bubble #5

07-15-2006 10:53 PM

What is it that you guys are trying to do? Posting a background image per usergroup is already a hack :bunny:

slappy

07-15-2006 11:03 PM

Reading from the top would enlighten you that this thread is about using the vbulletin staff avatar, with the cutout for a photo or private avatar image added, or with just the staff title of the appropriate usergroup, at the choice of the staff member.

Various options and code to accomplish placement and alignment of the staff avatars, as used here with inserts, were discussed, as was custom vbulletin staff avatars and the code to display them correctly by usergroup.

Regards,

Wired1

07-18-2006 01:56 AM

so, does anyone have any improvements to make on this?

peterska2

07-21-2006 01:35 PM

This is the version that I have working on my site. It's still done with tables, but it works perfectly and each staff member has their own badge too.

I made a couple of adjustments to get the alignment right with my badges though. If anyone needs a plain PSD template to work with these instructions, then just let me know and I'll fix it up for you.

Code:

        <if condition="$show['avatar']">

<!-- check for staff -->

<if condition="in_array($post[usergroupid], array(5,6,7))">

<!-- I am staff so do this -->

<td class="alt2">

   <table cellpadding="4" cellspacing="0" border="0" width="124" height="82" align="center" background="images/$post[username]_avatar.gif" nowrap="nowrap" no-repeat>

      <tr>

         <td width="48%">&nbsp;</td>

<td><img src="$post[avatarurl]" height="56" width="56" align="center"></td>

      </tr>

   </table>

</td>

<else />

<!-- I am not staff 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>

Wired1

07-21-2006 04:09 PM

PSD would be great.

Why not use $post[avwidth] $post[avheight] in the staff avatar though?

My only gripe with what we've come up so far is with avatars of varing size. Mine's 47x50, another guy's got 48x50, etc. Gotta make a big one for the guy who has a 125x125 somehow though :) Isn't there a way through PHP GD to do image manipulation?

peterska2

07-21-2006 04:16 PM

1 Attachment(s)

Thats why I specified the size in there. It adjusts the size of the avatar to fit the badge.

If you want to take a look at them in use on my site, you will see that they have been shrunk significantly to fit the badges.

FYI, the original size avatars in use by me and my co-admin are attached.

My moderator does not have an avatar so his badge does not show.

I'll sort the basic PSD file out later and post it up as a release with everyone who has contributed as co-authors.

Snyper

07-21-2006 04:32 PM

Hello Allan,

great, can you post the psd and Font ????

Greets :D

Quote:

Originally Posted by Allan

For you if you want ^^ :

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

For team :

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

Code:

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 -->

Wired1

07-31-2006 03:30 AM

Quote:

Originally Posted by peterska2

I'll sort the basic PSD file out later and post it up as a release with everyone who has contributed as co-authors.

That'd be cool :)

peterska2

07-31-2006 03:51 AM

I'll get it sorted out shortly.

Just need to tidy up the PSD I'm using.

peterska2

07-31-2006 06:55 AM

Here we go: Staff avatars

Allan

07-31-2006 07:31 AM

Quote:

Originally Posted by Snyper

Hello Allan,

great, can you post the psd and Font ????

Greets :D

Check Mp ;)

Digitalus

12-19-2006 08:18 PM

Quote:

Originally Posted by Allan (Post 1030243)

For you if you want ^^ :

http://img208.imageshack.us/img208/8388/exemple13bp.png

https://vborg.vbsupport.ru/

For team :

http://img48.imageshack.us/img48/4491/badgeadmin8fm.png

http://img48.imageshack.us/img48/839...derator7bd.png

http://img83.imageshack.us/img83/440...derator5oi.png

http://img228.imageshack.us/img228/9...gecoder8fb.png

http://img83.imageshack.us/img83/603...nslator6hy.png

Code:

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 -->

Allan,

Can you upload the PSD file and the fonts please?

Thanks...

KristerSwe

01-07-2007 04:48 PM

Hello all.
Am new about this and like this mod alot and can someone
provide us newbies with a How to and final code for this
wonderful hack ...

Thanks " "Hat off"Ladies and gentlemen"Well done"

All times are GMT. The time now is 06:27 PM.

Page 2 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01426 seconds Memory Usage 1,867KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (1)bbcode_html_printable (11)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (29)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: