Profile Awards With Hover Over Names

Profile Awards With Hover Over Names · by **APE** 2023-09-18, 01:05

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
	PHPBB2
	PHPBB3
	PunBB
	Invision
	ModernBB
	AwesomeBB

This comes in 3 easy steps.

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.

Create a JavaScript

 ACP >>  Modules Tab >>  HTML & JAVASCRIPT >> Javascript codes management >>

 Settings:
Title * : Profile Awards.
Placement : Topic's
Code:

For PHBB3 ModernBB & Invision Forums:

For PHPBB2 Forums:

For PunBB Forums:

For AwesomeBB Forums:

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

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:

 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 :

 Style with CSS:

Spoiler:

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.

A chat World Official Tutorial

This tutorial was written by Ape
Code Written By @Walt From The French Forum With Thanks.