Showing rank title in addition to badge in WpForo  


Valinax
Posts: 4
Customer
(@valinax)
Valinax
Joined: 7 months ago

Hello, I have created a series of 13 MyCred ranks on my WpForo/MyCred forum, and I have enabled the integration so the rank badges are working fully according to the points of the user. This is good, but I also want to show the names that I have given the ranks next to the badges on both the user’s profiles and above their forum posts. I could do this by resizing the badges with CSS and editing them to include text, but this would be an awkward way and I was wondering if another solution is available? Thanks

You can see these badges here; the grey one should be titled “New” and the animated bright green one should be titled “Valinaxian”:

https://valinax.com/forum/main/valinax-videos-discussion#post-13

7 Replies
Astghik
Posts: 3454
Admin
(@astghik)
Support Team
Joined: 2 years ago

Hi @valinax,

I'm sorry, but there is not such a feature. I'm going to ask the add-on developers about this. Probably we'll add it in next version release. 

Reply
Astghik
Posts: 3454
Admin
(@astghik)
Support Team
Joined: 2 years ago

@valinax,

add the following js code in your theme's js files and check again, it'll show the rank title.

jQuery.each(jQuery('.wpforo-mycred-rank-wrap'), function (i, val) {
jQuery('<div/>').addClass('wpforo-mycred-rank-title').html(jQuery(val).children('img').attr('title')).insertBefore(jQuery(val).children('img'));
});
Reply
Valinax
Posts: 4
Customer
(@valinax)
Valinax
Joined: 7 months ago

Hi, I appreciate the assistance and that you now plan to add the feature officially. I can't seem to get the code to work if I add it to my functions.php file, am I doing it correctly here?: http://prntscr.com/nlano9

Reply
1 Reply
Astghik
Admin
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3454

Hi @valinax,

Please remove the code from the functions.php file. This is js code it should be added in js files of the active theme. 

Reply
Valinax
Posts: 4
Customer
(@valinax)
Valinax
Joined: 7 months ago

I've found a way to get it working using a code injection plugin as it was not working when I tried to add it through the theme JS files. Would also be great if it can be individually styled through CSS.

Reply
2 Replies
Astghik
Admin
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3454

@valinax,

you can add CSS codes in Dashboard > Forums > Settings > Styles > "Custom CSS code" textarea. 

Reply
Valinax
Customer
(@valinax)
Joined: 7 months ago

Valinax
Posts: 4

Meant to say that it would be great if the different ranks could be styled individually through CSS, but I would presume that this would be a significantly more complex feature to add.

Reply
Share:
Green
Default
Pear
Black Emo
{green}:grinning:
{green}:wink:
{green}:face:
{green}:inlove:
{green}:sweaty:
{green}:surprised:
{green}:lovekiss:
{green}:laugh:
{green}:formalsmile:
{green}:displeased:
{green}:cool:
{green}:resent:
{green}:nerd:
{green}:screaming:
{green}:amazed:
{green}:sad:
{green}:deceitful:
{green}:starryeyes:
{green}:evil:
{green}:shocked:
{green}:tears:
{green}:sulky:
{green}:smile:
{green}:vomited:
{green}:hi:
{green}:afraid:
{green}:crazy:
{green}:rabid:
{green}:fighting:
{green}:nonoise:
{green}:blushed:
{green}:idontknow:
{green}:scared:
{green}:razz:
{green}:kiss:
{green}:eat:
{green}:shutmouth:
{green}:gape:
{green}:suspicious:
{green}:laughingoutloud:
{green}:bruise:
{green}:crying:
{green}:pray:
{green}:serious:
{green}:excitement:
:)
:d
:wink:
:mrgreen:
:neutral:
:twisted:
:arrow:
:shock:
:???:
:cool:
:evil:
:oops:
:razz:
:roll:
:cry:
:eek:
:lol:
:mad:
:sad:
:!:
:?:
:idea:
:hmm:
:beg:
:whew:
:chuckle:
:silly:
:envy:
:shutmouth:
{pear}:happy:
{pear}:smile:
{pear}:laugh:
{pear}:laughingoutloud:
{pear}:crying:
{pear}:exhausted:
{pear}:nerd:
{pear}:surprised:
{pear}:veryhungry:
{pear}:wink:
{blackemo}:laughtertotears:
{blackemo}:gift:
{blackemo}:love:
{blackemo}:inlove:
{blackemo}:shamefaced:
{blackemo}:heart:
{blackemo}:crazy:
{blackemo}:anguished:
{blackemo}:bruise:
{blackemo}:easymoney:
{blackemo}:exhausted:
{blackemo}:vampire:
{blackemo}:shutmouth:
{blackemo}:wink:
{blackemo}:carnival:
{blackemo}:flowers:
{blackemo}:hotdrink:
{blackemo}:party: