Re: [SOLVED] Need code for statistics asa like as this forum

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 12:38

Hi @Royal Bengal Tiger,

If you're interested in the coding behind this theme, I would suggest looking over the source code here :
https://github.com/SethClydesdale/forumactif-edge

The file which concerns the statistics is found here :
index_body : https://github.com/SethClydesdale/forumactif-edge/blob/master/templates/general/index_body.html
CSS : https://github.com/SethClydesdale/forumactif-edge/blob/master/css/fa_edge.css (LINE 1675)

Of course if you're interested you can always install Forumactif Edge to have all of it's features. Wink

https://github.com/SethClydesdale/forumactif-edge/wiki/Installing

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 13:21

I'm not sure what else to give you. I provided you with the files which create the who is online section on this forum.

In the following file the who is online section starts at line 43 and ends at line 136. You can take this section and replace it in your own index_body template.
https://github.com/SethClydesdale/forumactif-edge/blob/master/templates/general/index_body.html

After that you just need to get the necessary CSS and place it in your stylesheet.

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 13:24

I did, did you not click on the links I gave you in the following post ?
https://fmdesign.forumotion.com/t833-need-code-for-statistics-asa-like-as-this-forum#16632

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 13:40

Add this anywhere in your index_body template :

Code::  <div id="who_is_online"> <div id="wio_left"> <div id="wio_activity" class="content-block">  <div class="title"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>   <div class="title">{L_WHO_IS_ONLINE}</div>  <div class="txt-content"> <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /> {TOTAL_USERS_ONLINE}<br/> {LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}<br /> {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK} </div> </div> <div id="wio_group_legend" class="content-block"> <div class="title">{LEGEND}</div> <div class="txt-content"> <div id="wio_groups">{GROUP_LEGEND}</div> </div> <script type="text/javascript">if (window.wio_formatGroups) { wio_formatGroups(); }</script> </div> </div> <div id="wio_right"> <div id="wio_statistics" class="content-block">  <div class="title"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>   <div class="title">{L_STATISTICS}</div>  <div class="txt-content"> <div class="wio_row"> <div id="wio_newest_user" class="wio_stats"> <div id="wio_newest_inner"> <div id="wio_new_avatar"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" /></div> <div class="wio_value">{NEWEST_USER}</div> <div id="wio_new_date"></div> <div class="clear"></div> </div> </div> <script type="text/javascript">if (window.wio_getNewAvatar) { wio_getNewAvatar(); }</script> <div id="wio_total_posts" class="wio_stats"><span class="wio_value">{TOTAL_POSTS}</span></div> </div> <div class="wio_row"> <div id="wio_total_users" class="wio_stats"><span class="wio_value">{TOTAL_USERS}</span></div> <div id="wio_total_topics" class="wio_stats"><span class="wio_value"><strong>N/A</strong></span></div> </div> <div class="wio_row"> <div id="wio_record_users" class="wio_stats"><span class="wio_value">{RECORD_USERS}</span></div> <div id="wio_board_age" class="wio_stats"><span class="wio_value"><strong>N/A</strong></span></div> </div> </div> <script type="text/javascript">if (window.wio_getStats) { wio_getStats(); }</script> </div>  <div id="wio_chatters" class="content-block"> <div class="title"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div> <div class="txt-content"> {TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />  <div id="chatbox_popup"></div> <script type="text/javascript"> insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}'); </script>  </div> </div>  </div> <div class="clear"></div> </div>

Add this to your CSS stylesheet :

Code:: /* -- 18. WHO IS ONLINE -- */ #who_is_online .content-block { margin:12px 0; } #wio_left .content-block { margin-right:6px; } #wio_left { float:left; width:60%; } #wio_right { float:right; width:40%; } .wio_value { font-size:0; } .wio_value strong { font-size:22px; line-height:32px; } .wio_stats { width:50%; min-height:65px; margin-bottom:5px; text-align:center; display:inline-block; } .wio_row.last .wio_stats { margin-bottom:0; } .wio_stats:after { font-size:13px; line-height:20px; display:block; } #wio_total_posts:after { content:"Total Posts"; } #wio_total_topics:after { content:"Total Topics"; } #wio_total_users:after { content:"Total Members"; } #wio_record_users:after { content:"Most Members Online"; } #wio_board_age:after { content:"Forum Age (days)"; } #wio_newest_inner:before { content:"Newest Member"; font-size:14px; margin-top:8px; float:right; display:inline-block; } #wio_newest_inner .wio_value { margin-top:25px; } #wio_newest_user { text-align:center; } #wio_newest_inner { text-align:left; display:inline-block; white-space:nowrap; } #wio_newest_user strong { font-size:14px; line-height:20px; } #wio_new_avatar { float:left; margin-right:4px; } /* group legend */ #wio_groups { font-size:0; } #wio_groups a { font-size:14px; font-weight:normal; border-radius:3px; display:inline-block; padding:3px 9px; margin:3px; }

Add this to a new javascript with placement set to "in the homepage" :

Code:: /****************************** ** ======= FUNCTIONS ======= ** ******************************* ** 00. wio_formatGroups ** 01. wio_getStats ** 02. wio_applyStats ** 03. wio_getNewAvatar ******************************/ /* -- 00. wio_formatGroups -- */ // changes the formatting of the group legend function wio_formatGroups() { var groups = document.getElementById('wio_groups'); if (groups) { for (var a = groups.getElementsByTagName('A'), i = 0, j = a.length, rgb, color; i < j; i++) { color = a[i].style.color; rgb = color.replace(/rgb$|$|\s/g, '').split(','); a[i].style.backgroundColor = color; a[i].style.color = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) /1000) > 125 ? '#000' : '#FFF'; } } }; /* -- 01. wio_getStats -- */ // gets statistics via ajax function wio_getStats() { var storage = window.localStorage, stats; if (storage && window.JSON) { if (storage.fa_wio_stats && storage.fa_wio_stats_exp > +new Date - 1*60*60*1000) { wio_applyStats(JSON.parse(storage.fa_wio_stats)); } else { $.get('/popup_help.forum?l=miscvars', function(d) { var li = stats = { total_topics : $('li:contains({FORUMCOUNTOPIC})', d)[0], board_age : $('li:contains({FORUMAGE})', d)[0] }, i; for (i in stats) { if (stats[i]) { stats[i] = '<strong>' + stats[i].innerHTML.replace(/.*?(\d+).*/, '$1') + '</strong>'; } } wio_applyStats(stats); storage.fa_wio_stats = JSON.stringify(stats); storage.fa_wio_stats_exp = +new Date; }); } } }; /* -- 02. wio_applyStats -- */ // applies statistics function wio_applyStats(stats) { var topics = document.getElementById('wio_total_topics'), age = document.getElementById('wio_board_age'); if (topics) { topics.firstChild.innerHTML = stats.total_topics; } if (age) { age.firstChild.innerHTML = stats.board_age; } } /* -- 03. wio_getNewAvatar -- */ // gets the new avatar for the latest user function wio_getNewAvatar() { var newMem = document.getElementById('wio_newest_user'), storage = window.localStorage, id; if (newMem) { id = newMem.getElementsByTagName('A')[0].href.replace(/.*?\/u(\d+).*/, '$1'); if (storage && storage['fa_wio_newava' + id] && storage['fa_wio_newava' + id + '_exp'] > +new Date - 1*60*60*1000) { document.getElementById('wio_new_avatar').firstChild.src = storage['fa_wio_newava' + id]; } else { $.get('/ajax/index.php?f=m&user_id=' + id, function(d) { var avatar = $('.tooltip-content > img', d)[0]; if (avatar) { document.getElementById('wio_new_avatar').firstChild.src = avatar.src; if (storage) { storage['fa_wio_newava' + id] = avatar.src; storage['fa_wio_newava' + id + '_exp'] = +new Date; } } }); } } };

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 14:25

Post your index_body template here.

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 14:33

Sure, go ahead. Wink

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 14:59

@Royal Bengal Tiger thanks Rose

I've made the necessary corrections, let me know if that's to your liking. Salute

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 15:10

Edit the index_body template and replace {LEGEND} with whatever texts you want to change the legend title. Wink

All you should need to do for your other forum is copy the index_body template, CSS, and JS on your current forum and transfer them to the other one.

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 15:45

Thanks for the test account, I've made the necessary changes. Salute

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 16:04

Add this to your CSS whenever you get the chance :

Code:: @media (min-width:0px) and (max-width:768px) { #who_is_online > div > .content-block { margin:6px 0; } #who_is_online > div { float:none; width:100%; } }

What you're seeing is the responsiveness on this theme. Forumactif Edge is mobile friendly, so it moves the content around when you're on mobile. See :

Desktop : https://i.servimg.com/u/f35/18/21/41/30/screen12.png
Mobile : https://i.servimg.com/u/f35/18/21/41/30/screen13.png

**Ange Tuteur** · **Ange Tuteur** Sat 06 Aug 2016, 16:18

You're welcome ! Mr. Green

Topic archived

Have a good weekend. Wink

Sponsored content · Sponsored content

IMPORTANT

[SOLVED] Need code for statistics asa like as this forum