We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Team Icons and Ranks in Member List
Topic Started: Mar 2 2012, 08:19 PM (1,827 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code Name: Team Icons and Ranks in Member List

What the code does: There is three sets of codes here. The first code installs team icons and pip ranks on the member list, the second code installs only team icons on the member list and the third code only installs pip ranks on the member list. Preview

How to use the code: Install as instructed and view the notes for extra details.

How to install the code: Only install one of the three codes.

All themes: Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
One theme: Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Layout: Very Bottom

Install team icons and pip ranks:
Code:
 
<script type="text/javascript">
function addIcon(group, image) {
$('#member_list_full tr[class*="row"]').each(function () {
if ($(this).find('td:eq(1)').html() === '' + group + '') {
$(this).find('td:eq(1)').html('<img src="' + image + '" alt="Team Icon" />');
}
});
}

$('#member_list_full tr[class*="row"]').each(function () {
$(this).find('td:eq(1)').after('<td class="rank"><em>No Rank</em></td>');
});

$('#member_list_full tbody th:eq(1)').after('<th width="20%">Rank</th>');
$('#member_list_full tbody th[width="28%"]').attr('width', '18%');
$('#member_list_full thead th, #member_list_full td.c_head, #member_list_full td.c_foot').attr('colspan', '7');

function addPip(p_count, image) {
$('#member_list_full tr[class*="row"]').each(function () {
if (parseInt($(this).find('td:eq(5)').html().replace(/,/g, ''), 10) >= p_count) {
$(this).find('td.rank').html('<img src="' + image + '" alt="Pip" />');
}
});
}

addIcon('GROUP_NAME', 'TEAM_ICON_IMAGE_URL');
addIcon('GROUP_NAME', 'TEAM_ICON_IMAGE_URL');

addPip('AMOUNT_OF_POSTS_NEEDED_TO_GAIN_RANK', 'PIP_RANK_IMAGE_URL');
addPip('AMOUNT_OF_POSTS_NEEDED_TO_GAIN_RANK', 'PIP_RANK_IMAGE_URL');
</script>
Install team icons only:
Code:
 
<script type="text/javascript">
function addIcon(group, image) {
$('#member_list_full tr[class*="row"]').each(function () {
if ($(this).find('td:eq(1)').html() === '' + group + '') {
$(this).find('td:eq(1)').html('<img src="' + image + '" alt="Team Icon" />');
}
});
}

addIcon('GROUP_NAME', 'TEAM_ICON_IMAGE_URL');
addIcon('GROUP_NAME', 'TEAM_ICON_IMAGE_URL');
</script>
Install pip ranks only:
Code:
 
<script type="text/javascript">
$('#member_list_full tr[class*="row"]').each(function () {
$(this).find('td:eq(1)').after('<td class="rank"><em>No Rank</em></td>');
});

$('#member_list_full tbody th:eq(1)').after('<th width="20%">Rank</th>');
$('#member_list_full tbody th[width="28%"]').attr('width', '18%');
$('#member_list_full thead th, #member_list_full td.c_head, #member_list_full td.c_foot').attr('colspan', '7');

function addPip(p_count, image) {
$('#member_list_full tr[class*="row"]').each(function () {
if (parseInt($(this).find('td:eq(5)').html().replace(/,/g, ''), 10) >= p_count) {
$(this).find('td.rank').html('<img src="' + image + '" alt="Pip" />');
}
});
}

addPip('AMOUNT_OF_POSTS_NEEDED_TO_GAIN_RANK', 'PIP_RANK_IMAGE_URL');
addPip('AMOUNT_OF_POSTS_NEEDED_TO_GAIN_RANK', 'PIP_RANK_IMAGE_URL');
</script>
Extra notes: Simply change the capitalized text in the last lines of code and you can keep repeating one of the lines to add more team icons/pips.

When adding pips, the lines must go in order from lowest number to highest number, for example:
Code:
 
addPip('0', 'PIP_RANK_IMAGE_URL');
addPip('500', 'PIP_RANK_IMAGE_URL');
addPip('1000', 'PIP_RANK_IMAGE_URL');
Do not use commas in numbers in the code.
Edited by Cory, Apr 28 2013, 08:52 PM.
Online Profile Quote Post Goto Top
 
JAR
Member Avatar
Fortnite Noob
[ *  *  *  * ]
That is a really awesome code!
Is there anyway for it to grab information from the Mini-Profile... from a custom profile field?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
It would require an immense amount of AJAX to display custom profile fields on the member list.
Online Profile Quote Post Goto Top
 
2wise69
Member Avatar
Member
[ *  * ]
This don't seem to work on my board. I'm using the theme 'Wild Heart' that's release here on ZNR & here's the script that I put on the way bottom of the theme layout

Code:
 
<script type="text/javascript">
$('#member_list_full tr[class*="row"]').each(function () {
$(this).find('td:eq(1)').after('<td class="rank"><em>No Rank</em></td>');
});

$('#member_list_full tbody th:eq(1)').after('<th width="20%">Rank</th>');
$('#member_list_full tbody th[width="28%"]').attr('width', '18%');
$('#member_list_full thead th, #member_list_full td.c_head, #member_list_full td.c_foot').attr('colspan', '7');

function addPip(p_count, image) {
$('#member_list_full tr[class*="row"]').each(function () {
if (parseInt($(this).find('td:eq(5)').html().replace(/,/g,'')) >= p_count) {
$(this).find('td.rank').html('<img src="' + image + '" alt="Pip" />');
}
});
}

addPip('0', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/noob.png');
addPip('10', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/AcademyStud.png');
addPip('15', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/AcademyStudLvl2.png');
addPip('20', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/AcademyStudLvl3.png');
addPip('30', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/AcademyStudLvl4.png');
addPip('40', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/AcademyStudLvl5.png');
addPip('45', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/AdvanceStudent.png');
addPip('50', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/Genin.jpg');
addPip('500', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/Chuunin.jpg');
addPip('1000', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/SpecialJounin.jpg');
addPip('1500', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/Jounin.jpg');
addPip('2000', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/S-Class-Ninja.jpg');
addPip('2500', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/Sannin.jpg');
addPip('3000', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/Kage.jpg');
addPip('3500', 'http://i1105.photobucket.com/albums/h353/2wise69/Forum%20Icons/Sage.jpg');
</script>




I've check my members list & nothing seem to change.


EDIT: Nevermind..problem fixed. It looks like your script you made here - http://resources.zetaboards.com/topic/5152166/1/#new won't make this script to work. I took that code out and this script works perfectly.
Edited by 2wise69, Aug 12 2012, 05:56 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The CSS just needs modifying:
Code:
 
<style type="text/css">
#member_list_full th[width="20%"] + th[width="18%"], #member_list_full tr[class*="row"] td.rank + td {
display: none;
}
</style>
Online Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply