[Tutorial] Reputation Levels

First topic message reminder :

With this code you can customize the reputation profile by adding levels according to the reputation number.



Create a new JavaScript code with the following content (The placement "In topics" only):

Code:

/*
 *  Application: Reputation Levels
 *  Date: 14/06/2018
 *  Version: 2.014062018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
function bs_reputation_ipb() {
 
/*
 * Configure below the levels for the reputation profile,
 * with the respective number needed to win it.
 * You can also add a class to customize the element.
 */
 
var reputation = [
    {
      reputation: 0,
      level: "Neutral",
      class: "zero"
    },
    {
      reputation: 1,
      level: "Beginner"
    },
    {
      reputation: 10,
      level: "Regular"
    },
    {
      reputation: 20,
      level: "Good"
    },
    {
      reputation: 35,
      level: "Great"
    },
    {
      reputation: 50,
      level: "Excellent",
      class: "awesome"
    }
];
 
/*
 * No need to change anything from here down
 */

    var post = $(".post"),
        level = "",
        repClass = "",
        BreakException = {};

    $.ajax({
        url: post.first().find("a[href^='/u']").attr("href"),
        type: "GET",
        success: function(data) {
            var fieldName = $("#field_id-14", data).find("dt").text().split(" ")[0],
                regExp = RegExp("<span[^>]*>(?:<span[^>]*>)?(" + fieldName + ")(?:<\\/span>)?\\s:\\s<\\/span>\\s*(\\d+)", "g");
            $.each($(".post"), function(idx) {
                $(this).html(
                    $(this).html()
                    .replace(regExp, "<div class='reputation-bs'>$1 : $2<br><span class='title' style='font-weight:normal'></span></div>")
                );
                var repDiv = $(".reputation-bs", this),
                    fieldValue = repDiv.text().match(/\d+/);
                try {
                    $.each(reputation, function(i, item) {
                        if (item.reputation <= fieldValue) {
                            level = (item.level) ? item.level : "",
                            repClass = (item.class) ? item.class : "";
                        } else {
                            throw BreakException;
                        }
                    });
                } catch (e) {
                    if (e !== BreakException) throw e;
                }
                repDiv.addClass(repClass).find(".title").text(level);
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
 
};
$(function() {
    bs_reputation_ipb();
});

Add the following in your css stylesheet:

Code:

.reputation-bs {
  background-color: #DFF0D8;
  font-weight: bold;
  padding: 3px 8px;
  display: block !important;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #3C763D;
  margin: 5px auto;
  font-family: Lato,Arial,Helvetica,sans-serif;
  font-size: 13px;
  margin-bottom: 5px;
  max-width: 123px;
  text-align: center;
}
.reputation-bs.zero {
  background: none repeat scroll 0% 0% rgba(222, 222, 222, 0.34);
  color: #6e6e6e;
}

The instructions are inside the code.

AP > Modules > Points/Reputation > Reputation

Thank you SLGray. Now it works.

You're welcome.

I made a little modification in the code!