Cargando...
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte Foroactivo

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

[PEDIDO] Estadísticas en celdas

Creado por ,

Mensaje [Página 1 de 1.]

Publicado el Dom 7 Sep - 16:21

avatar

  • Navegador: Google Chrome.
  • Referencia: Click.


La duda es simple: me gustaría saber, con qué código podría colocar las estadísticas como en el foro de referencia. Serían modificadas, por supuesto, no quiero el código calcado, en sí, sólo busco el código que me permita colocar las estadísticas en esas celdas y juntas, para que quede de esa manera más ordenado. Me conformo con lo básico, sin florituras.

¡Un saludo!

A 0 usuarios le gusta esto

Publicado el Dom 7 Sep - 16:36

avatar
Administrador
¡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!

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Dom 7 Sep - 17:34

avatar
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.

A 0 usuarios le gusta esto

Publicado el Dom 7 Sep - 17:40

avatar
Administrador
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.

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Dom 7 Sep - 17:49

avatar
Te dejo el link del foro en hide.

A 0 usuarios le gusta esto

Publicado el Dom 7 Sep - 18:00

avatar
Administrador
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.

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Dom 7 Sep - 18:08

avatar
¡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;
}

A 0 usuarios le gusta esto

Publicado el Dom 7 Sep - 18:32

avatar
Administrador
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».

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Dom 7 Sep - 18:39

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

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB