How to Customize Community Site

Repost from

https://web.archive.org/web/20160124184643/http://mysharepointinsight.blogspot.co.uk:80/2013/04/how-to-customize-you-community-site.html

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

<script type="text/javascript">
function setBadge() {
var badges = document.getElementsByClassName("ms-comm-giftedBadgeIcon");
var i = 0;
while (i < badges.length) {
try {
badges[i].src = "/mcs/SiteAssets/" + badges[i].title + ".jpg";
}
catch (err) { }
i = i + 1;
}
}
_spBodyOnLoadFunctionNames.push("setBadge");
</script>
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):

<style type="text/css">
.ms-comm-giftedBadgeIcon
{
width:50px;
}
.ms-comm-giftedBadgeText
{
color:Green !important;
font-weight:bold;
}
</style>
And here is my end result: