Coding - Phpbbonline



Vezi subiectul anterior Vezi subiectul urmator In jos   Mesaj • Pagina 1 din 1


la data de Sam Iul 16, 2016 1:40 pm

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


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:Select Content
<!--DEVELOPED BY ANGE TUTEURNO DISTRIBUTION WITHOUT CONSENT OF THE AUTHORORIGIN :><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="" /></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. 


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:Select Content
<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:Select Content
<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="" /></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 !  

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 ! 

Vezi profilul utilizatorului

Vezi subiectul anterior Vezi subiectul urmator Sus   Mesaj • Pagina 1 din 1