The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

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

View previous topic View next topic Go down

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

Post by Rukiafan on February 10th 2016, 11:08 pm

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

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

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Sir Chivas™ on February 12th 2016, 9:49 pm

Hi,

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

Regards,
Sir Chivas.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

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

Post by Genesis on February 12th 2016, 11:11 pm

So you want something similar to this?

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

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

Post by Rukiafan on February 13th 2016, 8:25 pm

@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. Wink

Gave your post an upvote. Wink

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Genesis on February 15th 2016, 2:30 am

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.

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

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

Post by Rukiafan on February 15th 2016, 7:38 pm

@Forumedic Thanks, and no worries! Wink

@Ange Tuteur Could you please assist us? Wink

Thanks in advance! Very Happy

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 15th 2016, 8:00 pm

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

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 15th 2016, 11:43 pm

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


Last edited by Rukiafan on February 15th 2016, 11:47 pm; edited 2 times in total (Reason for editing : Autocorrect mishap...>_>)

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Rukiafan on February 17th 2016, 7:25 pm


Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 18th 2016, 11:48 am

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://illiweb.com/fa/m/gender_female.gif" class="ava-rank"/>');
});

Change the following based on the group :
1. The group color : #B697C7
2. The image : http://illiweb.com/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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 18th 2016, 8:05 pm

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

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 18th 2016, 8:33 pm

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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 18th 2016, 8:59 pm

@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. Wink

@Forumedic @SLGray any advice on the resizing issue? Wink


Last edited by Rukiafan on February 18th 2016, 10:30 pm; edited 4 times in total (Reason for editing : Added info.)

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 19th 2016, 3:14 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 19th 2016, 4:46 pm

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

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 19th 2016, 4:55 pm

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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 19th 2016, 6:58 pm

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

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

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


Last edited by Rukiafan on February 19th 2016, 7:09 pm; edited 3 times in total (Reason for editing : Added info...)

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 19th 2016, 8:45 pm

Yes, the overflow is the problem. Add this to your CSS :
Code:
.user-basic-info>a:first-child{overflow:visible!important}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 19th 2016, 8:58 pm

@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. Wink

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 20th 2016, 1:22 am

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 20th 2016, 1:26 am

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

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 22nd 2016, 5:32 pm

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://illiweb.com/fa/m/gender_female.gif');
  addGroupLogo('#369E99', 'http://illiweb.com/fa/m/gender_female.gif');
  addGroupLogo('#B697C7', 'http://illiweb.com/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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 22nd 2016, 7:30 pm

@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...:/

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 23rd 2016, 3:59 pm

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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 23rd 2016, 7:32 pm

@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. :/

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 24th 2016, 6:48 pm

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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 24th 2016, 7:36 pm

@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? scratch

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on February 25th 2016, 11:19 am

Did you remove the rule that modifies the positioning, or edit it ?
Code:
.ava-rank{position:absolute;right:10px;bottom:10px}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on February 25th 2016, 7:37 pm

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

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

Rukiafan
Forumember

Posts : 266
Reputation : 8
Language : English

Back to top Go down

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

Post by Ange Tuteur on March 4th 2016, 12:02 am

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum