Top Five Mod

In sfarsit am reusit sa fac un top five mod gen phpbb . com. Codul este unul inca in teste, pentru ori ce bug pe care il provoaca acest cod astept PM.

Sa incepem configurarea



Pasul 1
Panou de administrare -> Afisare -> Template-uri -> General.
Cautati: index_body si dupa cautati -

Cod:

{CHATBOX_TOP}
{BOARD_INDEX}

dupa aceaste linie adaugam:

Cod:

<div class="forabg">
  <div class="inner"><span class="corners-top"><span></span></span>
    <table class="table1" cellspacing="1" id="top_five">
      <thead>
        <tr>
          <th style="width: 50%;">{.L_NEWEST_TOPICS}</th>
          <th style="width: 20%;">{.L_TOP_FIVE_ACTIVE}</th>
          <th style="width: 30%;">{.L_TOP_FIVE_NEWEST}</th>
        </tr>
      </thead>
      <tbody>
        <tr class="bg2 row2">
          <td valign="top"></td>
          <td valign="top"></td>
          <td valign="top"></td>
        </tr>
      </tbody>
    </table>
    <span class="corners-bottom"><span></span></span></div>
</div>

Panou de administrare -> Afisare -> Template-uri -> Portal
mod_recent_topics - inlocuim tot ce se afla in el cu:

Cod:

<div class="module recent-topic">
  <!-- BEGIN classical_row -->
 <!-- BEGIN recent_topic_row -->
          <img class="sprite-icon_topic_latest" src="http://2img.net/i/fa/empty.gif" alt="Vizualizeaza ultimul mesaj" title="Vizualizeaza ultimul mesaj" /> <b><a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a></b><br />by&nbsp;
 <!-- BEGIN switch_poster -->
 <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
 <!-- END switch_poster -->
 <!-- BEGIN switch_poster_guest -->
 {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
 <!-- END switch_poster_guest -->
   &nbsp;ť&nbsp;{ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
 <!-- END recent_topic_row -->
<!-- END classical_row -->
</div>

mod_top_posters - inlocuim tot ce se afla in el cu:

Cod:

<div class="module active-posters">
  <!-- BEGIN POSTER -->
  <div class="row_count">
    <b>{POSTER.NAME}</b><br />
    {POSTER.BARRE}
  </div>
  <!-- END POSTER --><br />
</div>

Pasul 2
Panou de administrare -> Afisare -> Imagini si culori -> Culori
Si in Foaia de stil CSS adaugam:

Cod:

table#top_five th {
  text-align: left;
}

#content-container div#left {
  float: left;
  margin-right: 0;
  overflow: hidden;
  width: 0;
  display: none;
}

.row_count, .mem_rows {
  margin-bottom: 5px;
}

Pasul 3
Panou de administrare -> Module -> HTML & JAVASCRIPT -> Gestiunea codurilor JavaScript -> Coduri JavaScript

Titlu * : [AutoMod] Top Five
Amplasare : Indexul forumului
Cod JavaScript * :

Cod:

document.write('<script type="text/javascript" src="https://github.com/FG-R/Top-Five-Mod/releases/download/JS/phpBB3.js"></script>');
$(function() {
    // Configuration of template, added new variables !
    // Change the text on your languages !
    $vars('{.L_NEWEST_TOPICS}', 'Newest Posts');
    $vars('{.L_TOP_FIVE_ACTIVE}', 'Top Active Users');
    $vars('{.L_TOP_FIVE_NEWEST}', 'Newest Users');
});

Pasul 4
Panou de administrare -> Module -> Portal & Widget-uri -> Gestiunea widget-urilor forumului -> Gestiunea widget-urilor forumului



Ponturi:
- Activeaza gestiunea codurilor JavaScript: Da
- PA ~> Portal & Widget-uri ~> Gestiunea widget-urilor forumului ~~> Optiuni generale ale widget-urilor forumului ~> Afiseaza widget-urile forumului : Da
- Probleme/Intrebari/Sugestii: PM

---

Pasul 1
Panou de administrare -> Afisare -> Template-uri -> General.
Cautati: index_body si dupa cautati -

Cod:

{CHATBOX_TOP}
{BOARD_INDEX}

dupa aceaste linie adaugam:

Cod:

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top" width="100%" align="center">
      <table class="table1" width="100%" cellspacing="1" id="top_five">
        <thead>
          <tr>
            <th style="width: 50%;">{.L_NEWEST_TOPICS}</th>
            <th style="width: 20%;">{.L_TOP_FIVE_ACTIVE}</th>
            <th style="width: 30%;">{.L_TOP_FIVE_NEWEST}</th>
          </tr>
        </thead>
        <tbody>
          <tr class="bg2 row2">
            <td class="row1" valign="top"></td>
            <td class="row1" valign="top"></td>
            <td class="row1" valign="top"></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>

Panou de administrare -> Afisare -> Template-uri -> Portal
mod_recent_topics - inlocuim tot ce se afla in el cu:

Cod:

<div class="module recent-topic">
  <!-- BEGIN classical_row -->
 <!-- BEGIN recent_topic_row -->
          <img class="sprite-icon_topic_latest" src="http://2img.net/i/fa/empty.gif" alt="Vizualizeaza ultimul mesaj" title="Vizualizeaza ultimul mesaj" /> <b><a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a></b><br />by&nbsp;
 <!-- BEGIN switch_poster -->
 <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
 <!-- END switch_poster -->
 <!-- BEGIN switch_poster_guest -->
 {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
 <!-- END switch_poster_guest -->
   &nbsp;ť&nbsp;{ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
 <!-- END recent_topic_row -->
<!-- END classical_row -->
</div>

mod_top_posters - inlocuim tot ce se afla in el cu:

Cod:

<div class="module active-posters">
  <!-- BEGIN POSTER -->
  <div class="row_count">
    <b>{POSTER.NAME}</b><br />
    {POSTER.BARRE}
  </div>
  <!-- END POSTER --><br />
</div>

Pasul 2
Panou de administrare -> Afisare -> Imagini si culori -> Culori
Si in Foaia de stil CSS adaugam:

Cod:

table#top_five th {
  text-align: left;
}

#content-container div#left {
  float: left;
  margin-right: 0;
  overflow: hidden;
  width: 0;
  display: none;
}

.row_count, .mem_rows {
  margin-bottom: 5px;
}

Pasul 3
Panou de administrare -> Module -> HTML & JAVASCRIPT -> Gestiunea codurilor JavaScript -> Coduri JavaScript

Titlu * : [AutoMod] Top Five
Amplasare : Indexul forumului
Cod JavaScript * :

Cod:

document.write('<script type="text/javascript" src="https://github.com/FG-R/Top-Five-Mod/releases/download/JS/phpBB2.js"></script>');
$(function() {
    // Configuration of template, added new variables !
    // Change the text on your languages !
    $vars('{.L_NEWEST_TOPICS}', 'Newest Posts');
    $vars('{.L_TOP_FIVE_ACTIVE}', 'Top Active Users');
    $vars('{.L_TOP_FIVE_NEWEST}', 'Newest Users');
});

Pasul 4
Panou de administrare -> Module -> Portal & Widget-uri -> Gestiunea widget-urilor forumului -> Gestiunea widget-urilor forumului



Ponturi:
- Activeaza gestiunea codurilor JavaScript: Da
- PA ~> Portal & Widget-uri ~> Gestiunea widget-urilor forumului ~~> Optiuni generale ale widget-urilor forumului ~> Afiseaza widget-urile forumului : Da
- Probleme/Intrebari/Sugestii: PM

---

Pasul 1
Panou de administrare -> Afisare -> Template-uri -> General.
Cautati: index_body si dupa cautati -

Cod:

{CHATBOX_TOP}
{BOARD_INDEX}

dupa aceaste linie adaugam:

Cod:

<div class="main">
  <div class="main-content">
    <table class="table" cellspacing="1" id="top_five">
      <thead>
        <tr>
          <th style="width: 50%;">{.L_NEWEST_TOPICS}</th>
          <th style="width: 20%;">{.L_TOP_FIVE_ACTIVE}</th>
          <th style="width: 30%;">{.L_TOP_FIVE_NEWEST}</th>
        </tr>
      </thead>
      <tbody class="statused">
        <tr class="bg2 row2">
          <td valign="top"></td>
          <td valign="top"></td>
          <td valign="top"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Panou de administrare -> Afisare -> Template-uri -> Portal
mod_recent_topics - inlocuim tot ce se afla in el cu:

Cod:

<div class="module recent-topic">
  <!-- BEGIN classical_row -->
 <!-- BEGIN recent_topic_row -->
          <img class="sprite-icon_topic_latest" src="http://2img.net/i/fa/empty.gif" alt="Vizualizeaza ultimul mesaj" title="Vizualizeaza ultimul mesaj" /> <b><a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a></b><br />by&nbsp;
 <!-- BEGIN switch_poster -->
 <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
 <!-- END switch_poster -->
 <!-- BEGIN switch_poster_guest -->
 {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
 <!-- END switch_poster_guest -->
   &nbsp;ť&nbsp;{ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
 <!-- END recent_topic_row -->
<!-- END classical_row -->
</div>

mod_top_posters - inlocuim tot ce se afla in el cu:

Cod:

<div class="module active-posters">
  <!-- BEGIN POSTER -->
  <div class="row_count">
    <b>{POSTER.NAME}</b><br />
    {POSTER.BARRE}
  </div>
  <!-- END POSTER --><br />
</div>

Pasul 2
Panou de administrare -> Afisare -> Imagini si culori -> Culori
Si in Foaia de stil CSS adaugam:

Cod:

table#top_five th {
  text-align: left;
}

#content-container div#left {
  float: left;
  margin-right: 0;
  overflow: hidden;
  width: 0;
  display: none;
}

.row_count, .mem_rows {
  margin-bottom: 5px;
}

Pasul 3
Panou de administrare -> Module -> HTML & JAVASCRIPT -> Gestiunea codurilor JavaScript -> Coduri JavaScript

Titlu * : [AutoMod] Top Five
Amplasare : Indexul forumului
Cod JavaScript * :

Cod:

document.write('<script type="text/javascript" src="https://github.com/FG-R/Top-Five-Mod/releases/download/JS/punBB.js"></script>');
$(function() {
    // Configuration of template, added new variables !
    // Change the text on your languages !
    $vars('{.L_NEWEST_TOPICS}', 'Newest Posts');
    $vars('{.L_TOP_FIVE_ACTIVE}', 'Top Active Users');
    $vars('{.L_TOP_FIVE_NEWEST}', 'Newest Users');
});

Pasul 4
Panou de administrare -> Module -> Portal & Widget-uri -> Gestiunea widget-urilor forumului -> Gestiunea widget-urilor forumului



Ponturi:
- Activeaza gestiunea codurilor JavaScript: Da
- PA ~> Portal & Widget-uri ~> Gestiunea widget-urilor forumului ~~> Optiuni generale ale widget-urilor forumului ~> Afiseaza widget-urile forumului : Da
- Probleme/Intrebari/Sugestii: PM

Sugesti oferita de @Emanuel. Multumim !

Pentru versiunea phpBB:

Cod:

<div class="main">
  <div class="main-content">
    <table class="table" cellspacing="1" id="top_five">
      <thead>
        <tr>
          <th style="width: 50%;">{L_NEWEST_TOPICS}<!-- #BUG --> Newest Posts</th>
          <th style="width: 20%;">{L_TOP_FIVE_ACTIVE}<!-- #BUG --> Top Active Users</th>
          <th style="width: 30%;">{L_TOP_FIVE_NEWEST}<!-- #BUG -->  Newest Users</th>
        </tr>
      </thead>
      <tbody class="statused">
        <tr class="bg2 row2">
          <td valign="top"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
          <td valign="top"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
          <td valign="top"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
        </tr>
      </tbody>
    </table>
    </div>
</div>

Codul JS:

Cod:

(function(j){
 /*
 - @Top Five Mod [phpBB]
 - @Automod TopFive Forumotion
 */

 window.top_five_Mod = {
 init: function() {
 jQuery('.module.recent-topic').appendTo('table#top_five tbody tr.bg2.row2 td:eq(0)');
 jQuery('.module.recent-topic br:last').remove();
 jQuery('.module.recent-topic').replaceWith(jQuery('.module.recent-topic').html());

 jQuery('.module.active-posters').appendTo('table#top_five tbody tr.bg2.row2 td:eq(1)');
 jQuery('.module.active-posters').replaceWith(jQuery('.module.active-posters').html());
 top_five_Mod.edit(); top_five_Mod.newestMem(); top_five_Mod.nEdit();
 },
 edit: function(a,cd) {
 cd = jQuery('table#top_five tbody tr.bg2.row2 td:eq(1) .row_count');
 cd.each(function() {
 var number = $('table', this).attr('title').match(/\d+/g)[0];
 $('table', this).replaceWith('&nbsp;&nbsp; Posts: '+ number +'<br />');
 });
 },
 newestMem: function() {
 jQuery.get('/memberlist?mode=joined&order=DESC&submit=Ok&username', function(data, error) {
 if(!data) console.log(error);
 xSucces = jQuery('.pun .frm .frm-form table tbody tr:lt(5)', data);
 jQuery('table#top_five tbody tr.bg2.row2 td:eq(2)').html(xSucces);
 localStorage.setItem('save_query', jQuery('table#top_five tbody tr.bg2.row2 td:eq(2)').html());
 window.top_five_Mod.nEdit();
 });
 if(localStorage.getItem('save_query'))
 {
 xSucces = localStorage.getItem('save_query');
 jQuery('table#top_five tbody tr.bg2.row2 td:eq(2)').html(xSucces);
 window.top_five_Mod.nEdit();
 }
 },
 nEdit: function() {
 jQuery('table#top_five tbody tr.bg2.row2 td:eq(2) tr').each(function(data) {
 var user = jQuery('td.avatar-mini a', this).text();
 var uurl = jQuery('td.avatar-mini a', this).attr('href');
 var regd = jQuery('td.avatar-mini', this).next().next().text();
 jQuery(this).replaceWith('<div class="mem_rows"><b style="font-size: 11px;"><a href="http://'+ window.location.host +''+ uurl +'">'+ user +'</a></b><br />&nbsp;&nbsp;&nbsp;&nbsp;Joined: '+ regd +'</div>');
 });
 }
 /* cache: function() {
 sessionStorage.setItem('link_mod','N/A');
 }*/

 };

 jQuery(function() {
 setTimeout(function() {
 if(sessionStorage.getItem('link_mod'))
 {
 window.top_five_Mod.init()
 } else {
 window.top_five_Mod.init()
 }
 }, 50);
 jQuery('script[src^="/1.7.2/jquery.min.js"]').attr('src','http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js');
 });
}());

Eu nu inteleg la e trebuie... ce face acest cod?

foarte frumos .. a mers din prima

@michy97 acest tutorial nu este pentru cei care nu inteleg, mai pe scurt acest tutorial iti adauga pe forum un top 5 statistici: (1. Topicuri, 2. Membri, 3. Top cei mai activi).

Succes.

A funcționat. Dar o singură problema acolo la newests posts îmi apare nimic... De ce?
Link forum pentru a vedea problema http://creativestrike.forumz.ro

KeNzOr123 a scris:A funcționat.  Dar o singură problema acolo la newests  posts îmi  apare nimic...  De ce?
Link forum pentru a vedea problema http://creativestrike.forumz.ro

@KeNzOr123, daca intampinati probleme am sa va rog sa deschideti un topic in suport. Mersi!

Un moderator/admin edit primul topic va rog pentru actualizare topic !

Spoiler:

*actualizat

@SSYT, am efectuat modificarile necesare.

Proiect momentan inchis, o sa refac codul js pentru mai multa performanta !