by Ange Tuteur April 29th 2015, 6:54 am
Hi
@Babybok,
Go to Administration Panel > Modules > JavaScript codes management > Create a new script
Title : Group avatar
Placement : In all the pages
- Code:
/\/g\d+/.test(window.location.pathname) && $(function() {
for (var a = $('.ipbtable a'), i = 0, j = a.length, ava, img, id, storage = window.localStorage; i<j; i++) {
if (/\/u\d+/.test(a[i].href)) {
id = a[i].href.replace(/.*?\/u(\d+).*/, '$1');
ava = document.createElement('SPAN');
ava.className = 'fa_group_avatar';
a[i].parentNode.insertBefore(ava, a[i]);
if (storage && storage['faAvatar_' + id] && storage['faAvatarExp_' + id] > +new Date - 1*60*60*1000) ava.innerHTML = storage['faAvatar_' + id];
else {
$.get(a[i].href, function(d) {
img = $('#profile-advanced-right .module:first img', d)[0];
ava.innerHTML = '<img src="' + (img ? img.src : 'http://2img.net/i/fa/invision/pp-blank-thumb.png') + '" />';
if (storage) {
storage['faAvatar_' + id] = ava.innerHTML;
storage['faAvatarExp_' + id] = +new Date;
}
});
}
}
}
});
// créé par ange tuteur
Save the script, and then go to Display > Colors > CSS stylesheet. Paste the following style rules in your stylesheet to scale the avatars down and style the container a bit.
- Code:
.fa_group_avatar {
background:#EEE;
border:1px solid #CCC;
border-radius:3px;
display:inline-block;
margin-right:3px;
padding:3px;
}
.fa_group_avatar img {
height:25px;
width:25px;
}
You can change the colors as you wish.