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 « J'aime »

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 « J'aime »

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 « J'aime »

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 « J'aime »

+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 « J'aime »

Je reviens ici des années plus tard sur ce vieux fil de discussion. Moi aussi, j’aimerais que les badges soient plus visibles - comme un flair Reddit, près de leur nom sur leurs publications. De plus, j’adorerais pouvoir exécuter une requête pour savoir qui a le plus de badges (gamifier la communauté comme @bartv le souhaitait).

Il y a ce composant qui pourrait être utile : (avec une note sur une alternative de plugin Pavilion aussi)

Et cela ne devrait pas être trop compliqué si vous avez accès à l’explorateur de données. :+1:

3 « J'aime »

Merci.

Et cela ne devrait pas être trop compliqué si vous avez accès à l’explorateur de données. :+1:

Je viens de réussir à faire quelque chose de cet effet - une requête SQL pour afficher les utilisateurs avec leurs badges.

1 « J'aime »