FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 30 users online :: 0 Registered, 0 Hidden and 30 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Profile Field Backgrounds

View previous topic View next topic Go down

Forumedic
Forumedic

Gender : Unspecified
Posts : 130
Points : 3057
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.forumpromocean.com

PostForumedic Mon 01 Aug 2016, 16:06

Is it possible to change the field backgeounds when a specific value is reached?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Forumedic

Gender : Unspecified
Posts : 130
Points : 3057
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.forumpromocean.com

PostForumedic Mon 01 Aug 2016, 16:21

Thanks Smile
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Forumedic

Gender : Unspecified
Posts : 130
Points : 3057
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.forumpromocean.com

PostForumedic 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Forumedic

Gender : Unspecified
Posts : 130
Points : 3057
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.forumpromocean.com

PostForumedic 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Forumedic

Gender : Unspecified
Posts : 130
Points : 3057
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.forumpromocean.com

PostForumedic 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
jessy

Gender : Female
Posts : 102
Points : 3111
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://ilgiornaledibordo.forumattivo.com/

Postjessy Wed 03 Aug 2016, 18:01

It can work with invision ? Profile Field Backgrounds 1f61a
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Sponsored content

PostSponsored content

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