IMPORTANT

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

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» 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

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month

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

None

[ 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

avatar
Forumedic

Gender : Unspecified
Posts : 130
Points : 977
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
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?
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4733
Points : 9875
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

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

PostForumedic on Mon 01 Aug 2016, 16:21

Thanks Smile
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4733
Points : 9875
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Forumedic

Gender : Unspecified
Posts : 130
Points : 977
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
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.
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4733
Points : 9875
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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 ?

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Forumedic

Gender : Unspecified
Posts : 130
Points : 977
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
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?
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4733
Points : 9875
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.. )

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Forumedic

Gender : Unspecified
Posts : 130
Points : 977
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
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];
      }
    }
  }
});
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4733
Points : 9875
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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;
}

--------

Ange Tuteur
Tips and TricksContact Me

avatar
jessy

Gender : Female
Posts : 102
Points : 1031
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
View user profile http://ilgiornaledibordo.forumattivo.com/

Postjessy on Wed 03 Aug 2016, 18:01

It can work with invision ?
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4733
Points : 9875
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

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