Sunday, April 28, 2013

How to customize you community site badges

In my previous two posts I have shown you how to customize  level achievements of your members on your community site, but there is one more achievement your members can receive - badges.

Badges are special awards that administrators of community sites can give to those members they feel have given extra efforts in the community. Once a member receives a badge it is displayed throughout the site like this:

Badges are nothing more then items in a list that contain just one field (Badge name). Administrators can add new badges or modify existing ones in that list. The list is also called Badges and is created automatically in your community site.

For example my Badges list contains two badges:
Now lets modify their looks. Once again you should find those images that you would like to represent your badges.
For example:

Then upload them somewhere to SharePoint where you can reach them from your community site (I have uploaded them to the Site Assets library of my community site). To make the solution more generic be sure to name your images with the same name of the badge they are representing (like Professional and Expert in my case).

To make those images appear as our badges we will add some javascript and CSS styles. Open your site in SharePoint designer and add this following javascript to your page header

Be sure to match your image extension if it is different from .jpg.
Also we will override two css styles, one for the image (.ms-comm-giftedBadgeIcon) and one for the text of the badge (.ms-comm-giftedBadgeText) to make any necessary adjustments (most likely image size).

This are my styles (I have also added them to my site master):

And here is my end result:


  1. To which page do you add the code block and where do I find the CSS page?

  2. You can use a script editor web part and add it to every page that the badges are displayed in, or simply add it to page header using SharePoint Designer as suggested by Borislav. Same can be done with the CSS.

  3. Thanks Borislav for your post. Very useful.

  4. Thanks Grgić. This is a informative post. It will help to every SharePoint Consultant.

  5. Great stuff. In this example it appears the javascript shows how to add one badge icon that would apply to all community members that have been given any badge status. What if you want a different badge for each status, i.e. one for Expert, Guru, Professional, etc.? Can you show the javascript with two or more different badges.