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:
- 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 :
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:
 - 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 :
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.
|
Hitskin.com
by 
Facebook
Twitter
Pinterest
Youtube
