Profile Awards With Hover Over Names

Go down

Tutorial 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.

  Available for all version's:
 Icon  version Tested 
Profile Awards With Hover Over Names Phpbb210PHPBB2Profile Awards With Hover Over Names Yes10
Profile Awards With Hover Over Names Phpbb310PHPBB3Profile Awards With Hover Over Names Yes10
Profile Awards With Hover Over Names Punbb10PunBBProfile Awards With Hover Over Names Yes10
Profile Awards With Hover Over Names Invisi11InvisionProfile Awards With Hover Over Names Yes10
Profile Awards With Hover Over Names Modern10ModernBBProfile Awards With Hover Over Names Yes10
Profile Awards With Hover Over Names 15210AwesomeBBProfile Awards With Hover Over Names Yes10

This comes in 3 easy steps.



Profile Awards With Hover Over Names N112Create 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.







Profile Awards With Hover Over Names N213Create a JavaScript


ACP >>   Modules Tab >>   HTML & JAVASCRIPT >> Javascript codes management >>

 Settings:

Title * : Profile Awards.
Placement : Topic's
Code:
For PHBB3  ModernBB & Invision  Forums:

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]);
  });
});
For PHPBB2 Forums:

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
    
  ];
  
  $('.postdetails .scrollable-zone img').each(function() {
            var a = all_items_images.indexOf( $(this).attr('src') );
            $(this).attr('title', all_items_legend[a]);
          });
        });
For PunBB Forums:

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
    
  ];
  
  $('.pun .post .scrollable-zone img').each(function() {
            var a = all_items_images.indexOf( $(this).attr('src') );
            $(this).attr('title', all_items_legend[a]);
          });
        });
For AwesomeBB Forums:

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
    
  ];
  
  $('.post-aside .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 :

Profile Awards With Hover Over Names CBGrrqL

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


Profile Awards With Hover Over Names N312Adding 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:
Profile Awards With Hover Over Names Blue11
Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/blue11.png[/img]

Profile Awards With Hover Over Names Dark_g11
Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/dark_g11.png[/img]

Profile Awards With Hover Over Names Gree11
Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/gree11.png[/img]

Profile Awards With Hover Over Names Orange12
Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/orange12.png[/img]

Profile Awards With Hover Over Names Perp12
Code:
[img]https://i62.servimg.com/u/f62/12/23/10/57/perp12.png[/img]

Profile Awards With Hover Over Names Red10
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 :
Profile Awards With Hover Over Names Ezgif_17
  Style with CSS:
Spoiler:

Code:
.scrollable-zone {
background-color: #222; /* Background color */
display: block;
max-height: 35px; /* Hight of the box */
overflow: auto;
border: 1px solid #000 !important; /* outside border*/
box-shadow: 0 10px 6px rgba(255,255,255,0.13) inset,0 -10px 6px rgba(0,0,0,0.05) inset; /* Boxshadow */
cursor: pointer; /* mouse hand pointer */
}

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.





Last edited by APE on August 11th 2020, 2:13 pm; edited 10 times in total


Profile Awards With Hover Over Names Left1212Profile Awards With Hover Over Names Center11Profile Awards With Hover Over Names Right112
Profile Awards With Hover Over Names Ape_b110
Profile Awards With Hover Over Names Keep_s10
Profile Awards With Hover Over Names Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 16127
Reputation : 1735
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

TonnyKamper and trajce like this post

Back to top Go down

Tutorial Re: Profile Awards With Hover Over Names

Post by Ape on August 9th 2020, 4:58 am

This Tutorial was updated With new codes So it works with all version's
Any problem's please make a new thread linking this topic.


Profile Awards With Hover Over Names Left1212Profile Awards With Hover Over Names Center11Profile Awards With Hover Over Names Right112
Profile Awards With Hover Over Names Ape_b110
Profile Awards With Hover Over Names Keep_s10
Profile Awards With Hover Over Names Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 16127
Reputation : 1735
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

SarkZKalie, TonnyKamper and trajce like this post

Back to top Go down

Back to top


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