User Reputation Badge Plugin

plugin
1

Finally ready with the User Reputation Badge plugin, as discussed here. What this badge will do is allow users to have a small custom badge/text next to their name (Junior Member, Senior Member, etc). Something like this:

As shown above, the user (with trust level 4) has a badge/title next to their name. This can be styled as you wish.

This is accomplished by creating five groups and syncing them with the automatic trust level groups. Once users are put into custom groups based on their trust level, and the group set to ‘primary’, the users can then be styled based on their groups, ie. their trust levels.

Here is how to set it up:

After rebuilding, Add five groups - for example New, Basic, Member, Regular, Leader. You can do this however you like - New Member, Junior Member, etc or whatever fits your community style.

Check the field ‘Automatically set as primary group’.

Under the field that says ‘Users who register with an email domain that exactly matches one in this list will be automatically added to this group:’ write the trust level of the users you want to put in the group as follows:
Trust Level 0 - Write ‘trustlevel0.com’ (without the quotes)
Trust Level 1 - Write ‘trustlevel1.com’ (without the quotes)
Trust Level 2 - Write ‘trustlevel2.com’ (without the quotes)
Trust Level 3 - Write ‘trustlevel3.com’ (without the quotes)
Trust Level 4 - Write ‘trustlevel4.com’ (without the quotes)
So, you would write trustlevel0.com for the New group, trustlevel1.com for the Basic group, and so on.

Click save. The job will automatically keep running every minute (we will adjust the time based on how it performs and scales). You can trigger it manually via Sidekiq to check if the plugin is running properly.

Once you have confirmed that users are getting added to the right groups, you can style them with css. For example, you can play with this code:

.topic-meta-data .username.Leader::after {
    content: "Leader";
    margin-left: 1.6em;
    background-color: #5bc0de;
    border-radius: 0.40em;
    padding: .2em .6em .3em;
    color: white;
}

Change .username.Leader to your group name, for example, .username.GroupName

Thank you to the people who made this possible - @ambisoft, the dev and also @stevenpslade and @OnceWas for their time and help.

Update: This is broken atm, please do not install.

11 Likes
2

Moved this into the #plugin category. #plugin:extras is for non-plugins, like external software, browser extensions, CMS, etc.

2 Likes
3

Thanks. I couldn’t put it into the main plugins category though, just had two options - broken plugins and plugin extras. Am I missing something or is that a bug?

2 Likes
4

Access to #plugin requires TL2 or TL3, not sure which one…

1 Like
5

Getting this error after installing the plugin.

Can't hydrate plugin without an `id`
6

@SMT I have updated the plugin slightly. Can you try rebuilding and see if the issue has been solved now?

If it still shows the error, can you please walk me through the steps you took to install the plugin?

7

is there any way to put the name and title under the avatar? like:

It’s possible add icons to name or emoji?

8

Working perfectly now. Thank you.

2 Likes
9

@marcospreviato Yes, of course. See if the following code (put it in your css) works:

.names.trigger-user-card {
left: -65px;
position: absolute;
}

.topic-meta-data .username.Leader::after {
background-color: #5bc0de;
border-radius: 0.4em;
color: white;
content: “Leader”;
left: -28px;
margin-left: 1.6em;
padding: 0.2em 0.6em 0.3em;
position: absolute;
top: 23px;
}

This will look like this:

Yep, this is also possible - images, icons, emojis, unicode symbols; all can be inserted. For example, change the second code to:

.topic-meta-data .username.Leader::after {
background-color: #fff;
border-radius: 0.4em;
color: #000;
content: “\f25b”;
font-family: fontawesome;
left: -22px;
margin-left: 1.6em;
padding: 0.2em 0.6em 0.3em;
position: absolute;
top: 23px;
}

This inserts a font awesome icon:

Hope this helps :slight_smile:

2 Likes
10

OMG, thanks man, amazing work!

I can not hit the different username sizes

Look:

http://vidaoverwatch.com/t/robos-da-overwatch-possuidores-de-alma-origens-de-bastion-e-zenyatta/99

1 Like
11

@marcospreviato different username sizes meaning? Can you please explain?

1 Like
12

see in my link my name: Lokize its corretcly align but the name seigneurlima its incorrectly.

I will return to the side, is a space in place as well, I will try to solve and put the result to help the people who have the same question

13

Yes, the CSS is wide enough to accommodate the avatar, but wide usernames will either overflow or expand the width.

A problem with expanding might be that it makes the post content area narrower
.
It might be possible to force break-word, but in my experience that tends to not be ideal.

Having overflow scroll could work, but I think that would look just plain weird for a username.

1 Like
14

yes I tried and got bad :joy: :joy: :joy:

15

@marcospreviato if you want that style, one solution would be to reduce the topic/post container width. That way, long usernames will fit nicely. If you have issues, let me know.

I tried your style, and also tried the horizontal style with an icon along with a badge label. I am going with just the username and an icon for the badge. Its minimalistic and doesn’t feel overdone. Plus, members will learn what each icon stands for pretty quickly.

1 Like
16

yes I’ll try later, the problem is that it is a space where would be the username …

@P16 how to remove this space? i try this:

white-space: nowrap;

and not working!

Pasted image1043×108 6.07 KB

17

@marcospreviato you want to remove the space between the two posts (the little grey horizontal area between the posts)?

1 Like
18

no,i want remove the space that was after putting the username to the left

19

Maybe

div.regular.contents {
  margin-top: 0;
}

There would still need to be some vertical space for the div.post-info so div.contents wouldn’t move all the way up, but it should help some.

I’m afraid anything more would require changing the HTML and not be only a CSS tweak.

2 Likes
20

Does that solve your issue @marcospreviato?

1 Like