[Javascript] How to put user avatars on custom locations

A lot of people asked how to implement avatar on navigations, some separate pages, widgets, etc.

This is the easiest way to do so.

--> Tutorials, tips and tricks <--
How to put user avatars on custom locations

1º - Javascript
Placement: All pages

Code:

[panda=js]
//<![CDATA[
  $('span.PunBB-avatar').html('<a href="/u' + _userdata.user_id + '">' + _userdata.avatar + '<strong>' + _userdata.username + '</strong></a>');
//]]>


2º - HTML & CSS
Now in order to display an avatar, you just need to put

Code:

<span class="PunBB-avatar"></span>

to any template, widget, or page where HTML is enabled.

Furthermore you can style it with CSS

Code:

[panda=css].PunBB-avatar {
....
}

---

© PunBB Design

If you have any questions related to this topic create a topic with the following title: How to put user avatars on custom locations