[PEDIDO] Estadísticas en celdas

¡Hola!

Sigue los siguientes pasos para realizar la modificación. Ten en cuenta que se superpone que no tienes modificadas las plantillas de tu foro, si no deberás ignorar los pasos de búsqueda e intuirlos tú.

Abre la plantilla index_body.html y busca:

Código:


   <!-- BEGIN switch_viewonline_link -->
   <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
   <!-- END switch_viewonline_link -->

   <!-- BEGIN switch_viewonline_nolink -->
   <div class="h3">{L_WHO_IS_ONLINE}</div>
   <!-- END switch_viewonline_nolink -->

<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<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}

<br />
<em>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</em>

</p>
<div class="clear"></div>

   <!-- BEGIN switch_statistics_link -->
   <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
   <!-- END switch_statistics_link -->

   <!-- BEGIN switch_statistics_nolink -->
   <div class="h3">{L_STATISTICS}</div>
   <!-- END switch_statistics_nolink -->

<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
   <!-- BEGIN switch_chatbox_activate -->
   <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
   <div class="page-bottom">
   {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
   {CHATTERS_LIST}<br />
   </div>
      <!-- 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 -->
   <!-- END switch_chatbox_activate -->

Sustitúyelo por:

Código:

<div id="titulo_estadisticas">Estadísticas</div>
<div id="estadisticas">
   <div>
      <div class="tituloE">Miembros en línea</div>
      <div class="contenidoE">{TOTAL_USERS_ONLINE} {LOGGED_IN_USER_LIST}
         <div>{GROUP_LEGEND}</div>
      </div>
   </div>
   
   <div>
      <div class="tituloE">Estadísticas</div>
      <div class="contenidoE">{TOTAL_POSTS}. {TOTAL_USERS} {NEWEST_USER}</div>
   </div>
   
   <div>
      <div class="tituloE">Últimas 24h</div>
      <div class="contenidoE">{L_ONLINE_USERS} {L_CONNECTED_MEMBERS}</div>
   </div>
   
</div>

Ahora agrega esto a tu CSS:

Código:

#titulo_estadisticas { height: 50px; background: #000; color: #FFF; line-height: 50px; font-size: 20px; padding: 0 20px; }
#estadisticas { text-align: center; }
#estadisticas > div { width: 200px; height: 200px; border: 1px solid red; margin: 0 20px; display: inline-block; }
#estadisticas .tituloE { font-size: 18px; text-align: center; }
#estadisticas .contenidoE { background-color: grey; }


Todo el CSS está con colores y propiedades feas para que diferencies cada parte. Debes modificarlo todo a tu gusto.

Antes de pedir que cierre el tema, por favor, tómate la molestia de colocarlo en tu foro y avisarme de cualquier cosa que puedas no entender o no saber cómo modificar para que te pueda ayudar en este mismo tema.

¡Saludos!

Todo perfecto, Bret. Lo único que la primera celda (miembros en línea), automáticamente se me coloca por encima de las otras dos (que estas sí están alineadas), no puedo arreglarlo con el margin porque arrastra a las otras. ¿Hay alguna forma de modificar una celda de forma individual y que no repercuta al resto?

Captura.

EDIT: ¡Y otra cosa que se me olvidaba! No me deja modificar los grupos de las Leyendas como antes, con este nuevo código.

Deberían estar las tres alineadas automáticamente, eso ocurre porque debe de haber algún elemento entre las capas. Si me pasas el enlace te podría ayudar mejor.

Te dejo el link del foro en hide.

Vale, realiza los siguientes cambios:

#estadisticas

+ overflow: hidden;
- text-align: center;
+ width: 1000px;

#estadisticas > div

± width: 311px;
- display: inline-block;
+ float: left;

Así se debería corregir todo.

¡Ahora está perfecto! Lo único es que el código para editar los grupos de la leyenda, sigue sin funcionar debido a las estadísticas. (Lo dejo por si acaso, pero es un código que me ha funcionado siempre):

Código:

p em {
font-style: normal;
color: transparent;
display: block;
padding: 7px;
width: 500px;
text-transform: lowercase;
}

p em b a.gensmall {
font-family: Arial;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}


Ahora el código es aún más simple de utilizar y más seguro:

Código:

#estadísticas .contenidoE > div { border: 1px solid red; }

Ese selector sería solo del anterior «p».

Oh. ¡Ya! Muchísisisimas gracias Flerex, perdona por las molestias. Ten por seguro que aparecerás en los créditos. <3