The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Adding avatar in the group ssection.

Go down

In progress Adding avatar in the group ssection.

Post by Babybok on April 27th 2015, 6:36 am

Hello, Forumotion, Is it possible to add an avatar in the group section? 
What I mean is add a catergory or something blah2 like
PM / Username / Avatar / Post / Location / Email / Website



like this one in this image:



TIA Forumotion

Regards,
BabyBok
avatar
Babybok
Forumember

Male Posts : 195
Reputation : 2
Language : Filipino, English
Location : Philippines

http://rl-rp.board.st

Back to top Go down

In progress Re: Adding avatar in the group ssection.

Post by Sir. Mayo on April 27th 2015, 10:19 pm

What is your forum type?
Now You may be able to do this by editing your templates and what not.
I can play around with it but the earliest i could have something is by the April 30th/ May 1st
If you can wait that long?
avatar
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

In progress Re: Adding avatar in the group ssection.

Post by Babybok on April 29th 2015, 4:52 am

@Sir. Mayo : Hello, My forum version is "Invision" , yeap I can wait sir, if you can provide it.. and advance thanks for helping.. Smile
avatar
Babybok
Forumember

Male Posts : 195
Reputation : 2
Language : Filipino, English
Location : Philippines

http://rl-rp.board.st

Back to top Go down

In progress Re: Adding avatar in the group ssection.

Post by Ange Tuteur on 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://illiweb.com/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. Wink
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2907
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum