Latest topics
» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to One Million!
by Van-Helsing Yesterday at 16:02

» [GAME] Count to 30 - Ange Edition
by Van-Helsing Yesterday at 16:01

» Is there any new update for ForumActif Edge?
by Van-Helsing Yesterday at 16:01

» Add a login popup for the toolbar
by Ape Sun 24 Sep 2017, 17:26

» [GAME] Post a random picture
by SLGray Fri 22 Sep 2017, 19:23

» Topic'It
by Ange Tuteur Fri 22 Sep 2017, 10:06

» Topic'It
by SLGray Thu 21 Sep 2017, 15:52

» FM Themes
by SLGray Thu 21 Sep 2017, 15:51

» User - Made Creations
by SLGray Thu 21 Sep 2017, 15:50

» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

Recent Tutorials
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Widget : Member Statistics

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9738
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 20 May 2016, 11:14

This widget displays statistics related to the members on your forum such as ; How many members you have, the most that were ever online, and the newest member.

Click to view demo

If you're familiar with IPB you should know that this widget is inspired by it. Wink


Installation

To install this widget go to Admin Panel > Modules > Forum widgets management and create a new widget with the following settings.

Title(s) : Member Statistics
Use a table type : Yes
Widget Source :
Code:
<!--
DEVELOPED BY ANGE TUTEUR
NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR
ORIGIN : http://fmdesign.forumotion.com/t594-widget-member-statistics#10109
-->

<style type="text/css">.fa_ms_row { font-size:12px; font-family:arial, sans-serif; text-align:center; padding:10px 0; border-bottom:1px solid #CCC; }
.fa_ms_row:last-child { text-align:left; border:none; }
.fa_ms_row > span { display:inline-block; width:50%; }
.fa_ms_label { text-align:left; font-weight:bold; }
.fa_ms_value { font-size:18px; vertical-align:middle; }
#fa_ms_avatar { background:#FFF; border:1px solid #CCC; float:left; padding:2px; margin-right:6px; }
#fa_ms_avatar, #fa_ms_avatar img { width:40px; height:40px; border-radius:100%; overflow:hidden; }
#fa_ms_new_member_info { margin-top:10px; }</style>

<div id="fa_member_stats">
  <div class="fa_ms_row"><span class="fa_ms_label">Members</span><span class="fa_ms_value">{FORUMCOUNTUSER}</span></div>
  <div class="fa_ms_row"><span class="fa_ms_label">Most Online</span><span class="fa_ms_value">{FORUMONLINEUSER}</span></div>
  <div class="fa_ms_row">
    <div id="fa_ms_avatar"><img src="http://illiweb.com/fa/invision/pp-blank-thumb.png" /></div>
    <div id="fa_ms_new_member_info"><div class="fa_ms_nmi_row">Newest Member</div><div class="fa_ms_nmi_row">{FORUMLASTUSERLINK}</div></div>
    <div class="clear"></div>
  </div>
</div>

<script type="text/javascript">//<![CDATA[
// this script gets the latest member's avatar and caches it for 1 hour
(function() {
  var id = +'{FORUMLASTUSERLINK}'.replace(/.*?u=(\d+).*/, function(M, S1) { return S1 }),
      img = document.getElementById('fa_ms_avatar'),
      storage = window.localStorage,
      avatar;

  if (img) {
    img = img.getElementsByTagName('IMG')[0];

    if (storage && storage['fa_new_avatar_u' + id] && storage['fa_new_avatar_u' + id + '_exp'] > +new Date - 1*60*60*1000) {
      img.src = storage['fa_new_avatar_u' + id];
    } else {
      jQuery.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
        avatar = jQuery('.tooltip-content > img', d)[0];

        if (avatar) {
          img.src = avatar.src;

          if (storage) {
            storage['fa_new_avatar_u' + id] = img.src;
            storage['fa_new_avatar_u' + id + '_exp'] = +new Date;
          }
        }
      });
    }

  }
}());
'par ange tuteur';
//]]></script>
When you're finished, save the widget. After this you will be able to drag and drop the widget to any column you want on the forum or portal. If you'd like to make modifications to this widget please see the next section. Wink


Modifications

Below you will find a list of modifications that can be made to this widget.


1. The theme
If you want to change the theme or style of this widget, edit the stylesheet that can be found near the top :
Code:
<style type="text/css">.fa_ms_row { font-size:12px; font-family:arial, sans-serif; text-align:center; padding:10px 0; border-bottom:1px solid #CCC; }
.fa_ms_row:last-child { text-align:left; border:none; }
.fa_ms_row > span { display:inline-block; width:50%; }
.fa_ms_label { text-align:left; font-weight:bold; }
.fa_ms_value { font-size:18px; vertical-align:middle; }
#fa_ms_avatar { background:#FFF; border:1px solid #CCC; float:left; padding:2px; margin-right:6px; }
#fa_ms_avatar, #fa_ms_avatar img { width:40px; height:40px; border-radius:100%; overflow:hidden; }
#fa_ms_new_member_info { margin-top:10px; }</style>
You'll be able to modify the fonts, colors, etc... here.


2. Widget Structure
If you want to modify the structure of the widget or add in more information find this portion of the widget :
Code:
<div id="fa_member_stats">
  <div class="fa_ms_row"><span class="fa_ms_label">Members</span><span class="fa_ms_value">{FORUMCOUNTUSER}</span></div>
  <div class="fa_ms_row"><span class="fa_ms_label">Most Online</span><span class="fa_ms_value">{FORUMONLINEUSER}</span></div>
  <div class="fa_ms_row">
    <div id="fa_ms_avatar"><img src="http://illiweb.com/fa/invision/pp-blank-thumb.png" /></div>
    <div id="fa_ms_new_member_info"><div class="fa_ms_nmi_row">Newest Member</div><div class="fa_ms_nmi_row">{FORUMLASTUSERLINK}</div></div>
    <div class="clear"></div>
  </div>
</div>
Each statistic is placed in a row titled with the class "fa_ms_row". Each row contains stats related to the members of the forum. Feel free to move these rows around or add additional rows with different information. You can use these variables in the widget, so be creative ! Artist


That's all the modifications that can be made to this widget. If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy ! Angel


Notice
Tutorial written by Ange Tuteur.
Special thanks to the Beta Testers for testing this plugin.
Reproduction not permitted without consent from the author.
avatar
Luffy

Title :
Crazy Tanker
Gender : Male
Age : 23
Posts : 291
Points : 1643
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Fri 20 May 2016, 11:24

Brilliant work Ange great job!!

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9738
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 20 May 2016, 11:32

@Luffy thanks ! cheers
avatar
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 43
Posts : 835
Points : 2404
Reputation : 78
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Fri 20 May 2016, 11:45

Very nice @Ange Tuteur excellent work.

Thank you very much.
1st

--------

avatar
Luffy

Title :
Crazy Tanker
Gender : Male
Age : 23
Posts : 291
Points : 1643
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Fri 20 May 2016, 15:07

@Ange Tuteur, i just noticed that the total messages that were posted to the forum are not displaying.

Is there any possible way we could add that to the widget please?

--------

avatar
jessy

Title :
Gender : Female
Posts : 102
Points : 735
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://ilgiornaledibordo.forumattivo.com/

Postjessy on Fri 20 May 2016, 15:16

Fantastic thank you very much.@Ange Tuteur
avatar
schiggysboard

Title :
Gender : Male
Posts : 79
Points : 1320
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.schiggysboard.com/

Postschiggysboard on Fri 20 May 2016, 15:32

Hi @Ange Tuteur, is it possible to include who is online list? Actually the who is online list appears below the member statistics widget as you can see here:
http://i86.servimg.com/u/f86/16/43/86/96/screen10.jpg
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9738
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 21 May 2016, 08:06

Luffy wrote:@Ange Tuteur, i just noticed that the total messages that were posted to the forum are not displaying.

Is there any possible way we could add that to the widget please?
Very strange.. did you make any typos ? Because the variables should work without problem in the widget. Let me know your modified widget code if you can. Salute

schiggysboard wrote:Hi @Ange Tuteur, is it possible to include who is online list? Actually the who is online list appears below the member statistics widget as you can see here:
http://i86.servimg.com/u/f86/16/43/86/96/screen10.jpg
Yes and no. That widget is separate from this custom widget, so you wont be able to combine them through templates. You can however, try combining them through JavaScript for example :
Code:
$(function() {
  var mod3 = document.getElementById('module3'),
      stats = document.getElementById('fa_member_stats');

  if (mod3 && stats) {
    stats.appendChild(mod3.firstChild);
    mod3.style.display = 'none';
  }
});
Just place that script in all the pages.
avatar
schiggysboard

Title :
Gender : Male
Posts : 79
Points : 1320
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.schiggysboard.com/

Postschiggysboard on Sat 21 May 2016, 08:23

It's not working @Ange Tuteur. :/
It combines the member statistics widget and the random widget, which wasn't directly below the statistics widget but below the who is online list (and now there's only the hide button).
See this screenshot:
http://i86.servimg.com/u/f86/16/43/86/96/screen11.jpg

Would it be possible that after combining the two widgets correctly, that the tite of the second widget (who is online list) won't appear, so that they are 100 % combined?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9738
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 21 May 2016, 08:47

No, unfortunately not, since there's no unique selectors. I didn't notice the random widget because it was hidden to guests, so I'm assuming module3 is "who is online" while logged out and "random" while logged in. This isn't going to work.
avatar
schiggysboard

Title :
Gender : Male
Posts : 79
Points : 1320
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.schiggysboard.com/

Postschiggysboard on Sat 21 May 2016, 09:00

Ok, but thanks for trying and answering. Smile
avatar
Luffy

Title :
Crazy Tanker
Gender : Male
Age : 23
Posts : 291
Points : 1643
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Sat 21 May 2016, 09:13

@Ange Tuteur no i mean on the default widget the total posts are not there. If you check your image it's only the user statistics there. I would like if possible to add the total posts also!

Thanks!

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9738
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 21 May 2016, 09:16

Under the "Modifications" section see point 2. Then find a statistic row, most online for example :
Code:
<div class="fa_ms_row"><span class="fa_ms_label">Most Online</span><span class="fa_ms_value">{FORUMONLINEUSER}</span></div>

copy then paste it, and change the label + value to whatever you want. Do this however many times you want to include a number of statistical information.
avatar
Luffy

Title :
Crazy Tanker
Gender : Male
Age : 23
Posts : 291
Points : 1643
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Sat 21 May 2016, 09:24

Isn't the value this one?
Code:
{TOTAL_POSTS}


EDIT: My mistake!! Found it! Smile

Thanks!

--------

avatar
SSYT
Member
Title :
SSYT Codes
Gender : Male
Age : 23
Posts : 19
Points : 1487
Reputation : 13
Language : Romanian, English
Browser : Browser : Opera Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://www.forumcodes.com

PostSSYT on Tue 07 Jun 2016, 04:02

Great tutorial @Ange I like your work !
avatar
ddr3
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 1050
Reputation : 1
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postddr3 on Sun 07 Aug 2016, 06:23

nice
avatar
FiB

Title :
Gender : Male
Posts : 185
Points : 1251
Reputation : 14
Location : UK
Language : Eng
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.ourbulgariaforum.com

PostFiB on Tue 27 Sep 2016, 04:31

Thank you Salute
avatar
kian3210
New Member
Title :
Gender : Unspecified
Posts : 2
Points : 300
Reputation : 0
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postkian3210 on Fri 02 Dec 2016, 18:04



You already know therefore significantly when it comes to this subject - link removed -, made me in my view imagine it from a lot of varied angles.Your personal stuffs excellent. All the time care for it up!

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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