Profile Field Backgrounds

Is it possible to change the field backgeounds when a specific value is reached?

Yes, but you'll need a separate plugin to check the value of each field. I'll look into writing something up later.

Thanks

@Forumedic here's a quick snippet I came up with, which should be easy to manage.

Go to Admin panel > Modules > JS codes management and create a new script with the following settings.

Placement : In the topics

Code:

$(function() {
  var field = $('.profile-field'),
      i = 0,
      j = field.length,

      level_points = [
        100,
        200,
        300,
        400,
        500
      ],

      k,
      l = level_points.length,
      val;

  for (; i < j; i++) {
    val = +$('.value', field[i]).text();
   
    for (k = 0; k < l; k++) {
      if (val >= level_points[k]) {
        field[i].className += ' lv' + level_points[k];
      }
    }
  }
});

In the script you'll see this array :

Code:

      level_points = [
        100,
        200,
        300,
        400,
        500
      ],

This indicates the amount of value needed for a profile field to be applied with a class name. If a profile field is greater than or equal to one of these values it'll be applied with the class name : ".lv{N}" where {N} is the amount of value needed to achieve the level. ( e.g. 100, 200, 300.. )

For example, the following rule will affect all profile fields with a value of 100 or more :

Code:

.profile-field.lv100 {
  background:red;
}

If you want to affect only certain fields be sure to use that field's unique class name :

Code:

.profile-field.posts.lv100 {
  background:red;
}

Let me know if you have any questions, or if this wont work for you.

I'm very confused lol.

Especially on the

Code: profile-field. lv100 {

part.

Edit: Never mind, I wasn't thinking.

Oh is everything okay now ? Did it work for you, or do you want to try a different method ?

I'm about to try, I didn't realize the CSS part was for CSS (I really don't know), I was just staring at it for like 2 minutes until I realized lol. Just give me a minute to see

Do I create a new JavaScript for each field though?

No you only need to create one JavaScript, it'll then apply the number classes to each field that meets the condition. You can narrow down what field you modify by using a field's unique classname. ( e.g. .posts, .reputation, etc.. )

I can't get it to work.

CSS:

Code:

.profile-field.posts.lv1000 {
  background:#8B5!important;
}
.profile-field.likes.lv50 {
  background:#8B5;
}
.profile-field.points.lv20 {
  background:#8B5;
}
.profile-field.coins.lv2000 {
  background:#8B5;
}

JavaScript:

Code:

$(function() {
  var field = $('.profile-field'),
      i = 0,
      j = field.length,
 
      level_points = [
        20,
        50,
        1000,
        2000
      ],
 
      k,
      l = level_points.length,
      val;
 
  for (; i < j; i++) {
    val = +$('.value', field[i]).text();
 
    for (k = 0; k < l; k++) {
      if (val >= level_points[k]) {
        field[i].className += ' lv' + level_points[k];
      }
    }
  }
});

Oh my bad ! I forgot you need to include the prefix "field_" before your field name. ( e.g. field_posts, field_likes.. )

Here I corrected it for you :

Code:

.profile-field.field_posts.lv1000 {
  background:#8B5!important;
}
.profile-field.field_likes.lv50 {
  background:#8B5;
}
.profile-field.field_points.lv20 {
  background:#8B5;
}
.profile-field.field_coins.lv2000 {
  background:#8B5;
}

It can work with invision ?

@Jessy no, unfortunately this script is for Forumactif Edge, but if you'd like something similar for invision please feel free to open a new topic.

@Forumedic is this issue solved, or do you require further assistance ? Let us know when you have a chance.