[MOD] Estadísticas avanzadas del foro

Código:

<div id="latestTopics" class="clearfix">
 <div class="borderwrap">
 <div class="maintitle floated clearfix">
 <h2>Estadisticas del foro</h2>
                  <div class="contract" id="bc0" onclick="toggleCategory('c0');">  &nbsp;</div>
 </div>
 <div id="c0" class="maincontent">
 <table cellpadding="0" cellspacing="0" class="ipbtable">
 <thead>
 <tr>
 <th class="dropdown" width="30%">
 <noscript>
 Top mở chủ đề
 </noscript>
 <div class="titleList noscript" style="display: block;">
 <select>
 <option value="topActive">Top Activo</option>
 <option value="topPosters">Top post</option>
 <option value="topWeek">Top de la semana</option>
 <option value="topMonth">Top del mes</option>
 </select>
 </div>
 </th>
 <th class="tabs">
 <div class="titleList">
  <label class="latestTitle" for="recentTopics">Temas nuevos</label>
                                          <label class="latestTitle" for="activeTopics">Temas activos</label>
                                          <label class="latestTitle" for="viewedTopics">Temas visitados</label>
 </div>
 </th>
 </tr>
 </thead>
 <tbody>
                          <tr>
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- END giefmod_index1 -->
                          </tr>
 </tbody>
 </table>
 </div>
 </div>
</div>
<script type="text/javascript">
    //<![CDATA[
    var versionMinor = parseFloat(navigator.appVersion),
        versionMajor = parseInt(versionMinor),
        IE = document.all && !window.opera && 7 > versionMajor,
        IE7 = document.all && !window.opera && 7 <= versionMajor,
        OP = window.opera,
        FF = document.getElementById,
        NS = document.layers;
    function get_item(a, c) {
        if (IE) return c ? window.opener.document.all[a] : document.all[a];
        if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
        if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
    }
    var current_tooltip;
    function show_tooltip(a, c) {
        var b = get_item("tooltip");
        b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
        b.style.zIndex = 1000;
        b.style.position = "absolute";
        b.innerHTML = "<p>" + c + "</p>";
        b.style.visibility = "visible";
        a.onmousemove = move_tooltip;
        a.onmouseout = function() {
            b.style.visibility = "hidden"
        };
        a.title = ""
    }
    var offsetxpoint = -60,
        offsetypoint = 20,
        real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
        real_body = document.documentElement ? document.documentElement : document.body;
    function move_tooltip(a) {
        var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
            d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
            b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
            e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
            f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
        current_tooltip = get_item("tooltip");
        current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
        current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
    }
    $("li > a", "#recentTopics_div").mouseover(function() {
        show_tooltip(this, $(this).next().html())
    });
    $("li:contains('[Thùng rác]')", "#recentTopics_div").appendTo("#recentTopics_div > ol");
    $(".titleList.noscript").show();
    $(".latestTitle[for='recentTopics']").addClass("active");
    $("select", ".titleList.noscript").change(function() {
        $(".postersLast").hide();
        $("#" + this.value).show();
    });
    $(".latestTitle").click(function() {
        $(".latestTitle.active").removeClass("active");
        $(this).addClass("active");
    });
    $("a", "#activeTopics_div,#viewedTopics_div").after(function() {
        var tit = this.title;
        var split = tit.lastIndexOf('-');
        this.title = tit.slice(0, split - 1);
        return '<span class="right">' + tit.slice(split + 2) + '</span>';
    }); //]]>
</script>

Código:

<td class="row1" width="30%">
  <div id="topActive" class="box-content postersLast" style="display: block;">
    <ol class="olList group_poster">
      <!-- BEGIN POSTER -->
      <li>
         {POSTER.NAME}
         <span class="right">
          {POSTER.NB_TOPICS}
         </span>
      </li>
      <!-- END POSTER -->
    </ol>
   </div>
<!--</td>-->

Código:

<input id="activeTopics" class="topicsLast" type="radio" name="topicsLast"><div id="activeTopics_div" class="box-content topicsLast_div">  <ol class="olList group_poster"> <!-- BEGIN TOPIC --> <li>  <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>                          <span style="display:none">{TOPIC.TITLE}</span> </li> <!-- END TOPIC -->  </ol></div>

Código:

<input id="activeTopics" class="topicsLast" type="radio" name="topicsLast">
<div id="activeTopics_div" class="box-content topicsLast_div">
  <ol class="olList group_poster">
 <!-- BEGIN TOPIC -->
 <li>
  <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
                          <span style="display:none">{TOPIC.TITLE}</span>
 </li>
 <!-- END TOPIC -->
  </ol>
</div>

Código:

<td class="row1">
  <input id="recentTopics" class="topicsLast" type="radio" name="topicsLast" checked="checked" />
<!-- BEGIN classical_row -->
    <div id="recentTopics_div" class="box-content topicsLast_div">
      <ol class="olList group_poster">
  <!-- BEGIN recent_topic_row -->
         <li>
            <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
            <div class="tooltip_data" style="display:none">
               <p>
                  <span style="color:red">Título</span>: {classical_row.recent_topic_row.L_TITLE}
               </p>
               <p>
                  <span style="color:blue">Temas recientes</span>: {classical_row.recent_topic_row.S_POSTTIME}
               </p>
            </div>
            <!-- BEGIN switch_poster -->
           <span class="right">
            <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
           </span>
            <!-- END switch_poster -->
            <!-- BEGIN switch_poster_guest -->
            <span class="right">
               {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
            </span>
            <!-- END switch_poster_guest -->
         </li>
         <!-- END recent_topic_row -->
      </ol>
    </div>
<!-- END classical_row -->
<!--</td>-->

Código:

<!--<td> -->
<div id="topMonth" class="box-content postersLast" style="display: none;">
  <ol class="olList group_poster">
 <!-- BEGIN POSTER -->
 <li>
 {POSTER.NAME}
 <span class="right">{POSTER.NB_POSTS}</span>
 </li>
 <!-- END POSTER -->
  </ol>
</div>
</td>

Código:

<div id="topWeek" class="box-content postersLast" style="display: none;">
   <ol class="olList group_poster">
      <!-- BEGIN POSTER -->
      <li>
         {POSTER.NAME}
         <span class="right">
            {POSTER.NB_POSTS}
         </span>
      </li>
      <!-- END POSTER -->
   </ol>
</div>

Código:

<div id="topPosters" class="box-content postersLast" style="display: none;">
   <ol class="olList group_poster">
      <!-- BEGIN POSTER -->
      <li>
         {POSTER.NAME}
         <span class="right">
            {POSTER.NB_POSTS}
         </span>
      </li>
      <!-- END POSTER -->
   </ol>
</div>

Código:

/* latest topics */
#latestTopics input.topicsLast:checked + div.box-content{display:block}
table.ipbtable th{height:33px}
.olList{padding-left:22px;line-height:24px;list-style:none}
.olList li{position:relative;height:24px;width:100%;list-style-type:none;border-bottom:1px dashed #CCC;counter-increment:Zzindex}
.olList li:before{content:counter(Zzindex);display:block;height:17px;background:#EBEBEB;position:absolute;left:-22px;font-size:11px;top:4px;border-radius:2px;text-align:center;width:16px;color:#FFF;line-height:16px;z-index:10}
.olList li:after{content:" ";background:#EBEBEB;display:block;width:6px;height:6px;position:absolute;top:9px;left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.olList li:nth-child(1):before,ol.olList li:nth-child(1):after{background:red}
.olList li:nth-child(2):before,ol.olList li:nth-child(2):after{background:#FD5405}
.olList li:nth-child(3):before,ol.olList li:nth-child(3):after{background:#FDB55A}
.olList li:nth-child(3) ~ li:before,ol.olList li:nth-child(3) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
.olList li > a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;width:70%;height:inherit}
.olList li > .right{position:absolute;right:0;top:0}
table.ipbtable th.tabs{padding:0 0 0 20px;text-align:left}
th.tabs label{display:inline-block;height:34px;line-height:30px;padding:0 12px;border:1px solid transparent;border-bottom:0 none}
th.tabs label:hover,th.tabs label.active{cursor:pointer;border-color:#DDD;background:#FFF}
.tabs .titleList{margin-bottom:-5px}
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}

Demo

Index_body

mod_most_active_starters

mod_most_active_topics

mod_most_viewed_topics

mod_recent_topics

mod_top_post_users_month

mod_top_post_users_week

mod_top_posters

CSS

Widget