Recent Tutorials
Who is online?
In total there are 6 users online :: 1 Registered, 0 Hidden and 5 Guests

Niko!

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Profile Field Backgrounds

View previous topic View next topic Go down

Forumedic

Title :
Gender : Unspecified
Posts : 130
Points : 389
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.forumpromocean.com

PostForumedic on Mon 01 Aug 2016, 16:06

Is it possible to change the field backgeounds when a specific value is reached?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 01 Aug 2016, 16:08

Yes, but you'll need a separate plugin to check the value of each field. I'll look into writing something up later. Wink
Forumedic

Title :
Gender : Unspecified
Posts : 130
Points : 389
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.forumpromocean.com

PostForumedic on Mon 01 Aug 2016, 16:21

Thanks Smile
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 02 Aug 2016, 13:58

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

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. Wink
Forumedic

Title :
Gender : Unspecified
Posts : 130
Points : 389
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.forumpromocean.com

PostForumedic on Tue 02 Aug 2016, 14:57

I'm very confused lol.

Especially on the
Code:
profile-field. lv100 {
part.

Edit: Never mind, I wasn't thinking.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 02 Aug 2016, 15:05

Oh is everything okay now ? Did it work for you, or do you want to try a different method ?
Forumedic

Title :
Gender : Unspecified
Posts : 130
Points : 389
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.forumpromocean.com

PostForumedic on Tue 02 Aug 2016, 15:06

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 Smile

Do I create a new JavaScript for each field though?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 02 Aug 2016, 15:20

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.. )
Forumedic

Title :
Gender : Unspecified
Posts : 130
Points : 389
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.forumpromocean.com

PostForumedic on Tue 02 Aug 2016, 15:50

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];
      }
    }
  }
});
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 02 Aug 2016, 16:06

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;
}
jessy

Title :
Gender : Female
Posts : 101
Points : 442
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://ilgiornaledibordo.forumattivo.com/

Postjessy on Wed 03 Aug 2016, 18:01

It can work with invision ?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 03 Aug 2016, 19:31

@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. Wink

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

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum