[Solved] Adding A Small Badge Icon To Staff Member's Avatars?

Rukiafan

Member

Status :

Hello!

Posts :

32

Posted Fri Jun 13, 2014 9:17 pm

Details: I was wondering if it would be possible to add small badge icons denoting admins, moderators, reviewers, and webmasters/graphics designers in the corner of their avatars in both the blogs and forums? Admins would have a red badge, mods an orange one, reviewers a cyan badge, and webmasters would have a green one! This idea was brought about because of the way staff have badges at this site! http://www.nintendolife.com

Forum Address: http://www.wiiwarewave.com/

Forum Version: PunBB

Here is the base image I'd like to use!

[Solved] Adding A Small Badge Icon To Staff Member's Avatars? 23msw3d

[Solved] Adding A Small Badge Icon To Staff Member's Avatars? 23msw3d

Thanks in advance! ;)

Last edited by Rukiafan on Sat Jun 14, 2014 7:57 pm; edited 2 times in total

Grafix

Management Team

Status :

Im Watching You Spammer :)

Posts :

1596

Posted Fri Jun 13, 2014 11:23 pm

Hello [tag]Rukiafan[/tag] , Find this to your Viewtopic_body

Code:: {postrow.displayed.RANK_IMAGE}

and replace with this

Code:: <div class="Wirewavebadge">{postrow.displayed.RANK_IMAGE}</div>

after that paste this in your CSS

Code:: .Wirewavebadge{background:url('http://i57.tinypic.com/23msw3d.jpg') no-repeat scroll right top transparent;width:16px;height:16px;overflow:hidden;text-indent:-9999px;position:absolute;bottom:0;top:80px;right:42px}

click submit .. then go to your Usergroups > Ranks Administration > Create New rank and Copy & paste this code to Rank Title

Code:: <span class="Wirewavebadge"></span> Administrator

Its should look like this [Solved] Adding A Small Badge Icon To Staff Member's Avatars? Rukia10

Rukiafan

Member

Status :

Hello!

Posts :

32

Posted Sat Jun 14, 2014 8:02 pm

It seems to work, but I'd like to use a different image for each type of staff, not necessarily every rank, but key types of staff such as 1 for admins/editors, 1 for mods, 1 for website designers/webmasters, and 1 for news anchors/reviewers! That way it's easier to tell the difference between different kinds of staff members and we can stop using the staff banner ranks.

Jordan Lee

Forum Helper

Status :

Coding :)

Posts :

396

Posted Sun Jun 15, 2014 7:32 am

Rukiafan wrote:[link="/t392-adding-a-small-badge-icon-to-staff-member-s-avatars#2534"]It seems to work, but I'd like to use a different image for each type of staff, not necessarily every rank, but key types of staff such as 1 for admins/editors, 1 for mods, 1 for website designers/webmasters, and 1 for news anchors/reviewers! That way it's easier to tell the difference between different kinds of staff members and we can stop using the staff banner ranks.

Hello,

Please post the images for the badges and the avatar picture then we can get them customised for you

Thanks,
Tommy

J0k3R^

Advance Member

Status :

ZN SXOLH est. 1997

Posts :

260

Posted Sun Jun 15, 2014 7:34 am

u should wrap every rank with a span class and then add the images u want to css.
could u provide the images u want? thanks

Dustin

Forum Helper

Status :

Glad to be back ~

Posts :

352

Posted Fri Jun 27, 2014 6:39 am

No response after 7 days - Topic marked as solved & archived since a solution was partially given.

Sponsored content

Posted

[Solved] Adding A Small Badge Icon To Staff Member's Avatars?

Rukiafan

Grafix

Rukiafan

Jordan Lee

J0k3R^

Dustin

Sponsored content

what most do you like? [5vote ]

Fast Navigation

1	#1
2	#2
Discover : #i<3socialacademyforum \| #themesIPB<3 \| #Javascript

Url
BBcode
HTML