The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to colorize the points fields

View previous topic View next topic Go down

Solved How to colorize the points fields

Post by th4nhc0n9 on October 18th 2014, 11:02 am

In my forum, there is Points field.
E.g Points: 100000
With "Points" label, I can set color for it. However with the value 100000, it displays with default style of label. It is possible to change 100000 with color and bigger font size by CSS. Thanks
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: How to colorize the points fields

Post by _Twisted_Mods_ on October 18th 2014, 11:41 am

by css no because its not connected to a element .. you would have to use javascript
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: How to colorize the points fields

Post by Mati on October 18th 2014, 11:45 am

I think i have done this before but I'll give it a try.
avatar
Mati
Active Poster

Posts : 1900
Reputation : 288
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

Solved Re: How to colorize the points fields

Post by Luffy on October 18th 2014, 1:03 pm

Hello,

To change the Points color you mist go to
Admin Panel >> Users & Groups >> Users >> Profiles
and press the edit button ( Edit ) next to the points field and change the color of the default. That should change your "points" text to the color you chose.





avatar
Luffy
Manager
Manager

Male Posts : 4922
Reputation : 507
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to colorize the points fields

Post by Mati on October 18th 2014, 1:05 pm

I think he want to change the numbers Wink
avatar
Mati
Active Poster

Posts : 1900
Reputation : 288
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

Solved Re: How to colorize the points fields

Post by Luffy on October 18th 2014, 1:15 pm

Yes, i misunderstood! Thanks Mati and sorry for the wrong answer! Confused





avatar
Luffy
Manager
Manager

Male Posts : 4922
Reputation : 507
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to colorize the points fields

Post by Ange Tuteur on October 18th 2014, 5:23 pm

Hello th4nhc0n9,

Try this :
Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In the topics
Paste the code below :
Code:
$(function() {
 var color = '#F00', ptsName = 'Points',
 p = $('.postprofile'), reg = new RegExp('(<span.*?>'+ptsName+': <\\/span>)( \\d+)<br>','i');
 for (i=0; i<p.length; i++) if (reg.test(p[i].innerHTML)) p[i].innerHTML = p[i].innerHTML.replace(reg, '$1<span style="color:'+color+';">$2</span><br>');
});

You only need to modify the first two variables :

color : the color you want the points to be. Currently it is red.

ptsName : the name of your points field. If your points field is "Points" you don't need to change this variable value.
avatar
Ange Tuteur
Forumaster

Male Posts : 13177
Reputation : 2882
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to colorize the points fields

Post by th4nhc0n9 on October 18th 2014, 5:33 pm

Thank Ange. However, I have tried but I don't see the changes.
I see in the code, it is to change the color only, is it change the font size also?
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: How to colorize the points fields

Post by Ange Tuteur on October 18th 2014, 5:35 pm

Oooh I forgot about the font size ! Here, replace your script by this one :
Code:
$(function() {
  var ptsName = 'Points',
  p = $('.postprofile'), reg = new RegExp('(<span.*?>'+ptsName+': <\\/span>)( \\d+)<br>','i');
  for (i=0; i<p.length; i++) if (reg.test(p[i].innerHTML)) p[i].innerHTML = p[i].innerHTML.replace(reg, '$1<span class="pointsValue">$2</span><br>');
});

Then use this CSS to style the value :
Display > Colors > CSS stylesheet
Code:
.pointsValue {
  color:#F00;
  font-size:12px;
  font-weight:bold;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13177
Reputation : 2882
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to colorize the points fields

Post by th4nhc0n9 on October 18th 2014, 5:53 pm

It is still KO. Could you check again? Thanks.
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: How to colorize the points fields

Post by Ange Tuteur on October 18th 2014, 5:56 pm

Oops sorry I checked and your field is colored. The HTML is a bit different, so I changed it up for you forum. Try now ^^
Code:
$(function() {
 var ptsName = 'Points',
 p = $('.postprofile'), reg = new RegExp('(<span.*?><span.*?>'+ptsName+'<\\/span>: <\\/span>)( \\d+)<br>','i');
 for (i=0; i<p.length; i++) if (reg.test(p[i].innerHTML)) p[i].innerHTML = p[i].innerHTML.replace(reg, '$1<span class="pointsValue">$2</span><br>');
});
avatar
Ange Tuteur
Forumaster

Male Posts : 13177
Reputation : 2882
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to colorize the points fields

Post by th4nhc0n9 on October 18th 2014, 6:01 pm

It is OK now. Thank U so much!!!! Very good
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: How to colorize the points fields

Post by Ange Tuteur on October 18th 2014, 6:11 pm

You're welcome !

Topic archived

Have a great weekend ! Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13177
Reputation : 2882
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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