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:
Locked Topic
[ C ] Add_Legend add image
Topic Started: May 2 2012, 09:39 AM (345 Views)
Release Hold
Member
[ * ]
Code:
 

<script type="text/javascript">
$("#stats tr:eq(1)").after("<tr><td id='stats_legend' colspan='2'></td></tr>");
$("tr:has(#stats_legend)").insertAfter("tr:has(#stats_members)");
$("#stats td.c_mark:eq(0)").attr("rowspan", "2");

function addLegend(color, weight, group) {
$("#stats_legend").append("<span style='color: " + color + "; font-weight: " + weight + "; padding: 0 5px'>" + group + "</span>");
}

addLegend("#CC0088", "700", "Leader");
addLegend("#57E964", "700", "Pk Leader");
addLegend("#FFDD77", "700", "Mentor");
addLegend("#0174DF", "700", "Oldschool");
addLegend("#FF00FF", "700", "Member");
addLegend("#80A0FF", "700", "Trial");
addLegend("#000", "700", "Retired");
addLegend("#FE0", "700", "Special Guest");
addLegend("#00FFFF", "700", "Forum User");
addLegend("#FDEEF4", "700", "Forum Member");

$("#stats_legend span:not(:last)").after("|");
</script>

Try that instead.


was taken from one of Cory's threads. Basically, I would like to add an Image next to the name... For instance, a small crown or an "i" helper image. I could do this on the default Zetaboard Legend, but can't seem to figure out how to do it here... If someone could give me some assistance, I'd appreciate it.

Note, mine looks like this:
Code:
 

<script type="text/javascript">
$("#stats tr:eq(1)").after("<tr><td colspan='2' id='stats_legend'></td></tr>");

function addLegend(color, weight, group) {
$("#stats_legend").append("<span style='color: " + color + "; font-weight: " + weight + "; padding: 0 5px'>" + group + "</span>");
}

addLegend("red", "700", "Admins");
addLegend("#00CD00", "700", "Global Moderator");
addLegend("#000", "400", "Member");
addLegend("blue", "700", "Helpers");
addLegend("#0000A0", "700", "Head Helpers");
</script>

As you can see, the crown appears by my name, but I cannot get it to appear in the legend...
Posted Image
Edited by Release Hold, May 2 2012, 09:47 AM.
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
In the ACP when you edit a group you can add a prefix, which it looks like you have used to change the colour of the groups. use that to add an image to the group.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
To add a prefixed image to legends, use this instead:
Code:
 
<script type='text/javascript'>
$('#stats tr:eq(1)').after('<tr><td colspan="2" id="stats_legend"></td></tr>');

function addLegend(image_url, color, weight, group) {
$('#stats_legend').append('<img src="' + image_url + '" alt="Icon" /> <span style="color: ' + color + '; font-weight: ' + weight + '; padding: 0 5px">' + group + '</span>');
}

addLegend('IMAGE_URL', 'red', '700', 'Admins');
addLegend('IMAGE_URL', '#00CD00', '700', 'Global Moderator');
addLegend('IMAGE_URL', '#000', '400', 'Member');
addLegend('IMAGE_URL', 'blue', '700', 'Helpers');
addLegend('IMAGE_URL', '#0000A0', '700', 'Head Helpers');
</script>
If a user group does not have a prefixed image, use a transparent image in place of IMAGE_URL:
Code:
 
http://z3.ifrm.com/63/1/0/f665419/trans.png
Offline Profile Goto Top
 
Release Hold
Member
[ * ]
Thank you for your reply and the code. However, all this seemed to do was disable the Legend. :l
Maybe, I'm doing something wrong...
Also, I'd like the spacer between remaining, if possible.
Code:
 

$("#stats_legend span:not(:last)").after("|");

The url to the images are as follows:
Code:
 

script type='text/javascript'>
$('#stats tr:eq(1)').after('<tr><td colspan="2" id="stats_legend"></td></tr>');

function addLegend(image_url, color, weight, group) {
$('#stats_legend').append('<img src="' + image_url + '" alt="Icon" /> <span style="color: ' + color + '; font-weight: ' + weight + '; padding: 0 5px">' + group + '</span>');
}

addLegend('http://i45.tinypic.com/sdhi5j.png', 'red', '700', 'Admins');
addLegend('http://i46.tinypic.com/fuap86.png', '#00CD00', '700', 'Global Moderator');
addLegend("#000", "400", "Member");
addLegend('http://i50.tinypic.com/2wcr986.png', 'blue', '700', 'Helpers');
addLegend('http://i48.tinypic.com/35jm9gn.png', '#0000A0', '700', 'Head Helpers');
</script>


If this is possible, I'd really appreciate it. I feel like I'm linking the URLs to the images improperly...
Thanks for your assistance.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
$('#stats tr:eq(1)').after('<tr><td colspan="2" id="stats_legend"></td></tr>');

function addLegend(image_url, color, weight, group) {
$('#stats_legend').append('<img src="' + image_url + '" alt="Icon" /> <span style="color: ' + color + '; font-weight: ' + weight + '; padding: 0 5px">' + group + '</span>');
}

addLegend('http://i45.tinypic.com/sdhi5j.png', 'red', '700', 'Admins');
addLegend('http://i46.tinypic.com/fuap86.png', '#00CD00', '700', 'Global Moderator');
addLegend('http://z3.ifrm.com/63/1/0/f665419/trans.png', '#000', '400', 'Member');
addLegend('http://i50.tinypic.com/2wcr986.png', 'blue', '700', 'Helpers');
addLegend('http://i48.tinypic.com/35jm9gn.png', '#0000A0', '700', 'Head Helpers');

$('#stats_legend span:not(:last)').after(' | ');
</script>
Try that instead.
Offline Profile Goto Top
 
Release Hold
Member
[ * ]
Works like a charm!
Thanks a ton, Cory. Appreciate the help.
Offline Profile Goto Top
 
Eccentric Feline
Member Avatar
梦想
[ *  *  *  *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic