Wednesday, April 24, 2013

How to customize your achievement level representation in community site (Part 1)

In a Community site, as member accumulates points, they reach specific levels as milestones of achievement. Those levels are represented across you site and can be displayed in two ways.

You can display them as :

Images Text

The way levels are displayed can be set through your Community Reputation Settings page
(Site settings -> Communitiy Administration -> Reputation settings) under Achievement level representation group.

We can see that you can choose only what way levels are represented and if they are represented through text, you can specify a title for each level.

But what if you want to change images that represent different levels?

I will show you two different ways to accomplish this.

In my first example I will  replace those little blue squares with an image of  a four leaf clover so when a user achieves another level he will get another clover to represent his new status.

For this I will need two images, one to represent awarded  levels and one to represent remaining levels. I will use this two:

When you create your own  images you will have to upload them somewhere on your SharePoint site where they will be reachable. I've added my images to SiteAssets library of my community site.

If we inspect default images for displaying levels we can see they are nothing more then <div> tags that have some CSS styles that makes them look like blue squares. We will  simply override those styles to represent levels with our own images.

For this we will edit our community site master page in SharePoint designer. To do this open your site in SharePoint Designer and choose Master Pages from the left navigation. If you are not sure which master page you should edit, select each file and the one that has Set as Default button in your designers ribbon greyed out is the one your site is currently using.

When you have opened your master page in designer, you just have to insert this style script above your </head> tag:

Be sure to modify the script so that you point to your images and if needed adjust your height and width. Also you can save this styles to a file and just reference that file in your master page (that would be the proper way to do this).

This is my end result:

I will show you the second way to customize your achievement level representation in part 2 of this post.


  1. Excellent Post, I just tried this and it looks great. Way better than the out of the box little blue bars.

    Question for you, have you played around with customizing the gifted badges at all? The little blue badge now looks so small next to the 4 leaf reputation clovers.

    Ideally I would love to be able to have a different gifted badge image for Expert, Professional, or whatever other level we might have. I was wondering if using the concepts from your Part 2 article if you think that would be possible?

    Thanks again for the really helpful Blog articles.

  2. Hi, I'm glad you liked my post.
    I have created another post that deals with badges,so you can check it out:

  3. Very nice post.However; i am unable to see the image icon for achievement level as i already selected option 'Display achievement level as image'.

    Please suggest if there is any reason to not displaying image.

  4. Hi Rahul, can you please provide more information. You say that your images are not displaying, are you referring to default SharePoint images (blue squares) or your custom images?