Thursday, April 25, 2013

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

In the previous part of this post I showed you how you can  customize your achievement level representation
with CSS styles. In this post we will customize it using javascript code  in a way that will allow us to display different images for each level.

First you will need 5 images for each level. For example I will be using these images

each one representing a level of achievements. Upload your images to a place where you can reach them from your community site, I'll upload them to the SiteAssets library of my community site.

Now go to your Community Reputation Settings page
(Site settings -> Communitiy Administration -> Reputation settings)  and under Achievement level representation group select that you wish to diplay your achivement levels as text.

Under the titles for levels we will enter  html tags that will represent our images like this :
  <img src="/mcs/SiteAssets/Rank1.png" alt="" />

Here you can see how my reputation settings look after i have modified them:

If we look how our achievement level is represented now we will see it is still displayed as plain text, not as image.

To display this tags we will have to add some javascript.
Again open your master page in SharePoint Designer and add this script just above </head> tag:

And under the script add this following CSS style to override the default style that comes with the text represantation:


As you can see I did this to change the height and width of the container that will hold my image so that my image is displayed entirely.

My end result looks like this:

1 comment: