Ask question

Ask Questions and Get Answers from Our Community


Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

Add a simple and effective Reputation System for your Forum


New member
Jun 24, 2019
Hey guys this is a short guide for a template modification you can use for adding a reputation system to your site based on reaction score. This is similar to @AzzidReign guide for trophy points on Xenforo 1 but this is for reaction score and for Xenforo 2. Shout outs to @AzzidReign for providing the bare bones to write this guide. This only works on 2.1 since reactions are not in 2.0

First you will need some images for the ranks. I'm currently using half star and full star images with a completed version having 10 full stars with a bold outline around them to show completion and also starting out with 10 empty stars if you have less than 25 reactions. Feel free to use any images you like. I recommend Flat Icon for some good images.

What this basically will do is when someone gets 25 reactions they will receive half a star. When they reach 50 reactions they will receive a full star and below you can see where it's scaled up to work as a nice little system.

Feel free to change the reaction amount and tooltip text. As you can see it sets up a nice little tooltip as well so users get an idea of how it works.

Go to the template "message_macros".


 <xf:if is="$user.canViewIdentities()">
                            <xf:macro template="custom_fields_macros" name="custom_fields_view"
                                arg-additionalFilters="{{ ['message'] }}"
                                arg-valueClass="pairs pairs--justified" />
Below it add:
<div class="star-ranks" style="padding-top: 8px;">
<xf:if is="{$user.reaction_score} >=  1300"> <img src="/star-ranks-filled/complete-stars.png" data-xf-init="tooltip" title="Full Reputation Master">
<xf:elseif is="{$user.reaction_score} >=  1200" /> <img src="/star-ranks-filled/fullstar-10.png" data-xf-init="tooltip" title="1,200+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  1100" /> <img src="/star-ranks-filled/halfstar-10.png" data-xf-init="tooltip" title="1,100+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  1000" /> <img src="/star-ranks-filled/fullstar-9.png" data-xf-init="tooltip" title="1,000+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  900" /> <img src="/star-ranks-filled/halfstar-9.png" data-xf-init="tooltip" title="900+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  800" /> <img src="/star-ranks-filled/fullstar-8.png" data-xf-init="tooltip"title="800+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  700" /> <img src="/star-ranks-filled/halfstar-8.png" data-xf-init="tooltip" title="700+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  600" /> <img src="/star-ranks-filled/fullstar-7.png" data-xf-init="tooltip" title="600+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  500" /> <img src="/star-ranks-filled/halfstar-7.png" data-xf-init="tooltip" title="500+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  450" /> <img src="/star-ranks-filled/fullstar-6.png" data-xf-init="tooltip" title="450+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  400" /> <img src="/star-ranks-filled/halfstar-6.png" data-xf-init="tooltip" title="400+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  350" /> <img src="/star-ranks-filled/fullstar-5.png" data-xf-init="tooltip" title="350+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  300" /> <img src="/star-ranks-filled/halfstar-5.png" data-xf-init="tooltip" title="300+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  250" /> <img src="/star-ranks-filled/fullstar-4.png" data-xf-init="tooltip" title="250+ Ratings">
<xf:elseif is="{$user.reaction_score} >= 200" /> <img src="/star-ranks-filled/halfstar-4.png" data-xf-init="tooltip" title="200+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  150" /> <img src="/star-ranks-filled/fullstar-3.png" data-xf-init="tooltip" title="150+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  125" /> <img src="/star-ranks-filled/halfstar-3.png" data-xf-init="tooltip" title="125+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  100" /> <img src="/star-ranks-filled/fullstar-2.png" data-xf-init="tooltip" title="100+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  75" /> <img src="/star-ranks-filled/halfstar-2.png" data-xf-init="tooltip" title="75+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  50" /> <img src="/star-ranks-filled/fullstar-1.png" data-xf-init="tooltip" title="50+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  25" /> <img src="/star-ranks-filled/halfstar-1.png" data-xf-init="tooltip" title="25+ Ratings">
    <xf:elseif is="{$user.reaction_score} <  25" /> <img src="/star-ranks-filled/empty-star.png" data-xf-init="tooltip" title="Needs 25+ Ratings for Rep">
That will also give it some nice padding and then any further styling can be made using the "star-ranks" class or whatever you decide to use. You will also need to replace what's inside the <img src=""> quotes with the path to your actual image.

I imagine the same would work with trophy points by replacing reaction_score with trophy_points and also for post count with message_count though that part is untested. You would have to play around with it. Though this is tested and works.

Thank you and I hoped I helped you.

Here's a preview of the result on my site: