Profile Awards With Hover Over Names

Go down

Profile Awards With Hover Over Names

Post by APE on February 6th 2018, 4:00 pm

Profile Awards With Hover Over Names

Dear members,

We are often asked how you can add an item to your profiles and add a name to the items when you hover over them.
I have made an awards system using this.

Great news is We now have a code that is easy to use and understand With thanks to @Walt From the French support forum.

This comes in 3 easy steps.



Step 1
Create a new profile filed.

ACP >>   Users & Groups Tab >>   Users >> Profiles >>

Settings:
Type : Text Zone.
Name : Profile Rewards (Or what ever your like)
Description : (what ever your like)
Display :  Profile    Messages
Display type : (what ever your like)
Who can modify the profile field value ? Moderators
Display this field for users that are at least : (what ever your like)
Separator :
(what ever your like)
Default content * :
Code:
[center][table][tr][td class="scrollable-zone"]No Awards Yet[/td][/tr][/table][/center]
Max length : 15000


Now save.





Step 2


Create a JavaScript
ACP >>   Modules Tab >>   HTML & JAVASCRIPT >> Javascript codes management >>

Settings:
Title * : Profile Awards.
Placement : Topic's
Code:
Code:
$(function() {
  var all_items_images = [
    'https://i62.servimg.com/u/f62/12/23/10/57/blue11.png', //Reward 1
    'https://i62.servimg.com/u/f62/12/23/10/57/dark_g11.png',  // Reward 2
    'https://i62.servimg.com/u/f62/12/23/10/57/gree11.png', // Reward 3
    'https://i62.servimg.com/u/f62/12/23/10/57/orange12.png', // Reward 4
    'https://i62.servimg.com/u/f62/12/23/10/57/perp12.png', // Reward 5
    'https://i62.servimg.com/u/f62/12/23/10/57/red10.png', // Reward 6
    
  ];
  
  var all_items_legend = [
    
    'You hit 100 posts',                  // Reward 1
    'You hit 200 posts',                  // Reward 2
    'You hit 500 posts',                  // Reward 3
    'You hit 5000 posts',                 // Reward 4
    'You get 100 likes',                  // Reward 5
    '10 Or More Items From Credit Store', // Reward 6
    
  ];
  
  $('.postprofile .scrollable-zone img').each(function() {
    var a = all_items_images.indexOf( $(this).attr('src') );
    $(this).attr('title', all_items_legend[a]);
  });
});

Save.

The only way to give a title to each item is to find it with the URL of the image. That's why we have to list in the variable all_items_images all the images available in this profile zone. I already put in this variable all the items that were in your profile, but if there are others, you will have to add it.

In order to give a title to each item, we have the variable all_items_legend, and each line is the legend of the equivalent image in the all_items_images variable.

For example :



So if you add images, you will add the legends in the same order... I hope I'm clear ahah



Step 3

Adding your Awards to your members profile's:
Go to your members profile you want to add a Award to and add one of the following codes found in the list below.


Adding your Awards :
I have made 6 for you but you can make your own if you wish.
See Awards:

Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/blue11.png[/img]


Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/dark_g11.png[/img]


Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/gree11.png[/img]


Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/orange12.png[/img]


Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/perp12.png[/img]


Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/red10.png[/img]
Adding more than one:
Say you want to add the first one and the last one just do the following

Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/blue11.png[/img][img]https://i62.servimg.com/u/f62/12/23/10/57/red10.png[/img]

You will have to add the code where you see this part of the code. No Awards Yet
the code should look something like this
Code:
[center][table][tr][td class="scrollable-zone"][img]https://i62.servimg.com/u/f62/12/23/10/57/blue11.png[/img][img]https://i62.servimg.com/u/f62/12/23/10/57/red10.png[/img][/td][/tr][/table][/center]

Note: You will have to add this (Manually) to each member (sadly This system does not have a auto fill setting) Then Save.

And this is the result :


This should work in all forums unless you have made a lot of change to your Templates.
I hope you like this little cool setting.
If you have any problems Please feel free to make a thread in the main forum linking me to this thread and tagging me.






avatar
APE
Administrator
Administrator

Male Posts : 13284
Reputation : 1401
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


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