[PEDIDO] Estadisticas estilo OVERFLOW

CAPTURA:

Spoiler:

FORO: http://www.4reyes.net/forum
VERSION: PunBB.

DESCRIPCION DEL PROBLEMA:
Lo que estado buscando es tener las estadistas con estilo IPBOARD ya que las estadisticas tradicionales de foroactivo son classicas,y sin mas espero que me puedan facilitar y compartir el codigo.

Gracias de antemano. :cheers:
Espero haver posteado bien mi problema respetando las normas de OVERFLOW.

¡Hola!

Obviamente no te voy a dar el código de Overflow, pero te he dado otro que hace lo mismo. Tendrás que personalizarlo tú, pero supongo que ya sabrás hacerlo.

Abre el template index_body.html y busca:

Código:

<div id="pun-info" class="main">
   <div class="main-content">
      <div id="stats">
         <p class="right">{TOTAL_POSTS}</p>
         <p>{TOTAL_USERS}</p>
         <p>{NEWEST_USER}</p>
      </div>
      <div id="onlinelist">
         <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
         <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
         </p>
         <p>{TOTAL_USERS_ONLINE}<br />
         {RECORD_USERS}

         <br />
         {LOGGED_IN_USER_LIST}

         {L_ONLINE_USERS}
         {L_CONNECTED_MEMBERS}<br />
         {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
         <div class="clear"></div>

         <p>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</p>

      </div>
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
         <p class="page-bottom">
         {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
         {CHATTERS_LIST}<br />
         <!-- BEGIN switch_chatbox_popup -->
            <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>
         <!-- END switch_chatbox_popup -->
         </p>
      </div>
      <!-- END switch_chatbox_activate -->
   </div>
</div>

Reemplázalo por:

Código:

<div id="informacionestadisticas">
   <ul>
      <li>
         <span>
            <script type="text/javascript">
               document.write($('{TOTAL_POSTS}').text());
            </script>
         </span>
         &nbsp;Mensajes totales
      </li>
      <li>
         <span>
            <script type="text/javascript">
               document.write($('{TOTAL_USERS}').text());
            </script>
         </span>
         &nbsp;Miembros totales
      </li>
      <li>
         <span>
            <script type="text/javascript">
               document.write('<a href="'+$('a','{NEWEST_USER}').attr('href')+'">'+$('{NEWEST_USER}').text()+'</a>');
            </script>
         </span>
         &nbsp;Último usuario
      </li>
      <li>
         <span>
            <script type="text/javascript">
               document.write($('{RECORD_USERS}').text());
            </script>
         </span>
         &nbsp;Usuarios simultáneos
      </li>
   </ul>
</div>
<div id="estadisticas_overflow">
   <div class="cabecera">
      <div class="esquerda">
         <script type="text/javascript">
            document.write($('{TOTAL_USERS_ONLINE}').text());
         </script>
         &nbsp;usuarios en línea (en los últimos 15 minutos)
      </div>
      <div class="dereita">
         <ul>
            <li><a href="/search?search_id=activetopics">Temas activos del día</a></li>
            <li><a href="/memberlist?mode=today_posters">Top 20 posteadores hoy</a></li>
            <li><a href="/memberlist?mode=overall_posters">Top 20 posteadores del foro</a></li>
         </ul>
      </div>
   </div>
   <div class="contenido">
      <script type="text/javascript">
         document.write('{TOTAL_USERS_ONLINE}'.replace(/En total hay \<strong\>[0-9]+\<\/strong\> (usuario|usuarios) en línea: /, ''));
      </script>
      <!-- BEGIN switch_viewonline_link -->
      &nbsp;<a href="{U_VIEWONLINE}" rel="nofollow">(Ver lista completa)</a>
      <!-- END switch_viewonline_link -->
      <br /><br />
      {L_ONLINE_USERS}
      {LOGGED_IN_USER_LIST}
      {L_CONNECTED_MEMBERS}
      <br /><br />
      <p>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</p>
   </div>
</div>

Ahora agrega esto a tu CSS:

Código:

#informacionestadisticas {
   text-align: center;
   margin-bottom: 15px;
}

#informacionestadisticas li {
   display: inline-block;
   margin-right: 5px;
}

#informacionestadisticas li:last-child {
   margin-right: 0;
}

#informacionestadisticas li span {
   border: 1px solid deepskyblue;
   padding: 2px;
}

#informacionestadisticas ul {
   margin: 0 auto;
   display: inline-block;
}

#estadisticas_overflow {
   border: 1px solid deepskyblue;
   padding: 5px;
}

#estadisticas_overflow .cabecera {
   background-color: deepskyblue;
   margin: -5px -5px 5px -5px;
   overflow: hidden;
   padding: 5px;
}

#estadisticas_overflow .cabecera .esquerda {
   float: left;
}

#estadisticas_overflow .cabecera .dereita {
   float: right;
}

#estadisticas_overflow .cabecera .dereita ul li {
   display: inline-block;
   margin-left: 5px;
}

Gracias por darme la base ya me encargo de darle el diseño apropiado.