Adding A badge On The Bottom-Right Corner of The Avatar For Members of A Specific Usergroup?

Hello all! I'd like to give certain groups of staff members a tiny 25x25 px badge in the bottom right corner on the inside of their avatars to show that they're staff members so I can get rid of the rank banner system on my website! I'd like the code to work on both the forum profiles and in blog comments! My forum version is PunBB. 

Thanks in advance!

Edit: @SLGray and @Ange Tuteur I summon you.

Hi,

Would something like this help out?
https://help.forumotion.com/t57595-add-an-image-to-the-rank-name-customizing-ranks

Regards,
Sir Chivas.

So you want something similar to this?

@Forumedic Yes! We'd use a much better image than that though and we'd prefer the badge to be smaller and actually be fully inside the avatar's border.

Gave your post an upvote.

I'm glad I could clear up what you want. Unfortunately, I do not have the necessary skills nor knowledge to further assist you, but, maybe @Ange Tuteur could help assist you on this.

@Forumedic Thanks, and no worries!

@Ange Tuteur Could you please assist us?

Thanks in advance!

It should be possible, however, it would only work in the topics due to some limitations of the forum profile. Although there's always some way..

What's the URL of the forum you want this applied to ?

Thanks! The forum url is http://www.WiiWareWave.com

@Ange Tuteur? Bump.

Sorry for the delay. Add this script to Modules > JS codes management :

Placement : In the topics

Code:

$(function() {
  $('.user:has(a span[style="color:#B697C7"])').find('.user-basic-info > a:first-child').append('<img src="http://2img.net/i/fa/m/gender_female.gif" class="ava-rank"/>');
});

Change the following based on the group :
1. The group color : #B697C7
2. The image : https://2img.net/i/fa/m/gender_female.gif

Lastly add this CSS to your stylesheet :

Code:

.user-basic-info > a:first-child {
  position:relative;
}

.ava-rank {
  position:absolute;
  right:0;
  bottom:0;
}

@Ange Tuteur It worked, but the image is slightly too far to the right. I wanted the badge within the avatar's frame.

It may be related to the problem I mentioned in your other topic. Try pasting the minified CSS instead :

Code:

.user-basic-info>a:first-child{position:relative}.ava-rank{position:absolute;right:0;bottom:0}

@Ange Tuteur Now the staff badge is covering the entire avatar...

Edit: Also can it be made to show up in blog comments as well? I don't care about anywhere other than the current area it show's up in and blog comments. Thanks in advance.

@Forumedic @SLGray any advice on the resizing issue?

Oooh I didn't think of that, in the mean time change the CSS to this :

Code:

.user-basic-info>a:first-child{position:relative}.ava-rank{position:absolute;right:0;bottom:0;width:auto;height:auto}

I'll take a look at the blog comments soon.

@Ange Tuteur It's still not resizing the badge...

Hmm.. try this instead :

Code:

.user-basic-info>a:first-child{position:relative}.ava-rank{position:absolute;right:0;bottom:0;width:auto !important;height:auto !important}

@Ange Tuteur Sorry was feeding my cats and eating breakfast, I'll try the new code now!

Edit: Now the badge doesn't appear at all...what the fronk is going on?!

Edit again: Could it be an issue caused by the circular avatar code? They both use the same forum variable.

Yes, the overflow is the problem. Add this to your CSS :

Code:

.user-basic-info>a:first-child{overflow:visible!important}

@Ange Tuteur It worked, but now the badge is too far to the right and is too low as well. xD

Also one more thing, after the blog issue is solved how would I go about adding different badges to our various staff types? We have Administrators, Moderators, and content providers for our blogs that we'd like to have different badges for and get rid of our rank system for normal members and the banner ranks so our forums look less cluttered.

1. The image is to the absolute corner of the avatar, however, the circular container doesn't make it seem like it is. You can reposition the icon by editing this part in the CSS I gave you previously :

Code:

right:0;bottom:0;

You'll most likely want to modify "right" to something like

Code: right:50px;

2. I'll reiterate on how to do that when I rework it for the blog comments.

@Ange Tuteur Thanks so much! I look forward to it!

Okay, firstly add this CSS to your stylesheet :

Code:

.blog_comment-avatar {position:relative;overflow:visible}
.blog_comment-avatar .ava-rank {width:auto!important;height:auto!important}

Then replace your current script with this one :

Code:

$(function() {
  addGroupLogo('#66163C', 'http://2img.net/i/fa/m/gender_female.gif');
  addGroupLogo('#369E99', 'http://2img.net/i/fa/m/gender_female.gif');
  addGroupLogo('#B697C7', 'http://2img.net/i/fa/m/gender_female.gif');

  /* -- FUNCTION -- */
  function addGroupLogo(color, image) {
    $('.user:has(a span[style="color:' + color + '"])').find('.user-basic-info > a:first-child').append('<img src="' + image + '" class="ava-rank"/>');
    $('a span[style="color:' + color + '"]', '#blog_comments').closest('.posthead').find('.blog_comment-avatar').append('<img src="' + image + '" class="ava-rank"/>');
  };
});

That should work for both posts and blog comments. Now to add an icon for different groups all you need to do is edit the current script, and copy and paste this declaration before

Code: /* -- FUNCTION -- */

:

Code:

addGroupLogo('COLOR', 'IMAGE');

Replace COLOR with the color of the group and IMAGE with the image you want associated with the group. You can copy and paste this as much as you want. As you'll see, I already added 3 group colors as an example, you can edit this as you wish. If you have any questions let me know.

@Ange Tuteur That worked to add multiple user groups, but the position of the badge is unchanged and the badges aren't appearing in blog comments...

It seems the overflow is still hidden on the blog comments. Replace the CSS I gave you with this :

Code:

.blog_comment-avatar {position:relative;overflow:visible!important}
.blog_comment-avatar .ava-rank {width:auto!important;height:auto!important}

To change the position of the badge, modify the previous CSS rule I gave you. This one :

Code:

.ava-rank{position:absolute;right:0;bottom:0}

Edit the bottom and right values to change the positioning of the badge. To something like this for example :

Code:

.ava-rank{position:absolute;right:10px;bottom:10px}

@Ange Tuteur Now the badge is massive and underneath the avatar, I did have to change your code a bit as it left me with an uneven number of {} brackets which completely broke my CSS until I changed the code a bit.

Add this CSS rule to your stylesheet :

Code:

.ava-rank{width:auto !important;height:auto !important}

It'll reset the width and height properties.

@Ange Tuteur Drat...now the size issue is fixed but it's now too far to the left and below the avatar... This code is a tricky little bugger isn't it?

Did you remove the rule that modifies the positioning, or edit it ?

Code:

.ava-rank{position:absolute;right:10px;bottom:10px}

@Ange Tuteur Lmao! I have both of them added to the CSS!

Should I edit the old code or delete it completely and keep the new code?

Add it back in because I don't see the specified properties when inspecting the image element.