How to show badges in the message list?

Hi,

I’m interested in using badges to gamify our community some more. While they’re great for people who receive them, badges are also still quite ‘invisible’ on the site, and I feel that doesn’t encourage the desired behaviour as much as it could.

The closest I’ve come is to instruct members to use a badge as their title:


The drawbacks of this approach are:

  • People need instruction to display the badge
  • Visibility is low
  • There’s no hyperlink to badge info
  • You can only use one badge at a time

Is there a way that we can show selected (not all!) badges in the message list and apply styling?

For example, here’s how we have styled our ‘Staff’ group. It would be great if I could have a small number of badges here too with some styling (color+icon) and a link to their info pages:


Any ideas?

7 Likes

Something like this?

Exactly, but I assume those are user groups, not badges?

I’m not following. Work has been put into the User Card so that “higher” (eg. “gold”) badges get display priority and the “more” link will bring up the others a member has received.

Much thought and effort has been put into reducing distraction from the topic read flow, (eg. no Signatures) so I can’t imagine where having a mess of Badges showing in posts would be a good thing.
Consider a member that has ~3 dozen badges, would you really want to see all of them every post?

That said, there are plugin-outlets available and a plugin that would do that could be put together.

Yes, but you would first have to click on someone’s name to ‘discover’ those badges. My hypothesis is that not many people do so, which means many users won’t learn about the available badges.

Agreed, that would be bad. That’s why I said "show selected (not all!) badges" - I imagine having a very small number of such badges that would play a key role in our community.

How do I get a fancy box and color around my user group name like that @Trash

Just a CSS customization in Admin, Customize, CSS. Target the CSS class that element is in – press f12 in your browser to inspect the element and get the class name.

2 Likes

I posted the css code here Primary group class not available on usercard and user page if you want use it.

It works on staff group (admins and mods). Add label after your nickname, on post, on user-card and in your profile).

For primary groups it works only on post. I’m not be able to do the same in user-card and profile because there’s no different class between group’s members and other users.
I’m only a beginner in css but here on Discourse you’ll find professionists in css that can help you.

3 Likes

I too would like to mark certain badges to appear in the message list, without having to take away users’ ability to set their title. For example, I’ve got users who are the project leads for particular projects and they will want to indicate that in their title, but I also want to display the manually-granted badge which indicates that they are employees of our company. If it’s only visible on the user card, it won’t be discovered by other users very often.

3 Likes

+1 for making certain prized badges visible without having to click on their card. Our group has users who spend endless hours researching and contributing, and we would like to recognize and reward that behavior. I’m not suggesting you should clutter it with trivial badges like “first quote”.

4 Likes

Coming here years later to this old thread. I too, would like Badges to show up more prominently - like a Reddit flair, near their name on their posts. Also, I’d love to be able to run a query to find out who has the mosts badges (gamifying the community like @bartv wanted).

There’s this component which might be useful: (with a note about a Pavilion plugin alternative too)

And this shouldn’t be too tricky if you have access to the data explorer. :+1:

3 Likes

Thanks.

And this shouldn’t be too tricky if you have access to the data explorer. :+1:

Just managed to do something to this effect just now - a sql query to show users with their badges.

1 Like