[Tutorial] Información de los temas y respuestas estilo tooltip (efecto hover)

Pues esto lo realize dando la respuesta a un compañero del foro y pense... ¿Porque no lo pongo en tutoriales?, Quizas a alguien le gusta y le sirve Smile

Nivel: Basico.
Tiempo: 5mn (Como maximo)
Función: Al pasar el cursor sobre una celda aparece la información de los temas y las respuestas con un efecto tipo tooltip.
Creditos: Survivor21.

Ve al set de plantillas de tu tema/caja del foro/forumbit_depth1_cat, buscamos y eliminamos:

Código:
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>

<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>

Buscamos en la misma plantilla:

Código:
<td class="thead" colspan="5">

Sustituimos por:

Código:
<td class="thead" colspan="3">

Ve al set de plantillas de tu tema/caja del foro/forumbit_depth2_forum, buscamos y eliminamos:

Código:
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>

<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>

En la misma plantilla buscamos:

Código:
{$forum_viewers_text}

Debajo agregamos:

Código:
<div class="hover_stats">

<img src="{$theme['imgdir']}/hover_stats_arrow.gif" class="stats_arrow" />

<div class="idx_stats">{$lang->forumbit_posts} {$posts}{$unapproved['unapproved_posts']}  &middot;  {$lang->forumbit_threads} {$threads}{$unapproved['unapproved_threads']}</div>

</div>

Ve al set de plantillas de tu tema/caja del foro/forumbit_depth2_cat, buscamos y eliminamos:

Código:
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>

<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>

En la misma plantilla buscamos:

Código:
{$forum_viewers_text}

Debajo agregamos:

Código:
<div class="hover_stats">

<img src="{$theme['imgdir']}/hover_stats_arrow.gif" class="stats_arrow" />

<div class="idx_stats">{$lang->forumbit_posts} {$posts}{$unapproved['unapproved_posts']}  &middot;  {$lang->forumbit_threads} {$threads}{$unapproved['unapproved_threads']}</div>

</div>

Añade esto en el css:

Código:
.stats_arrow{ margin-left: 5px; margin-right: -5px; position: relative; margin-top: -1px; }

.idx_stats{ background: #424242; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #fff; font-size: 10px; padding: 3px 5px; display:inline; }

.hover_stats{ position: absolute; display:none; }

tr:hover .hover_stats{ display:inline; }

Ahora solo sube la imagen adjuntada en el directorio de su tema.
[attachment=772]

Resultado final:
[Imagen: 29cudt1.jpg]

Esta bien bueno, me gusta la idea.
+REP.

+rep tengo tiempo buscandolo Tongue

:)

De hecho el tutorial ya lo tenía creado desde hace tiempo y lo publique en una pagina de soporte de el mismo tipo que esta, pensé haberlo publicado aquí también y tremenda sorpresa me lleve al ver que no =/

Esta bueno Big Grin

+10(?

la ultima parte como agrego eso ami CSS, donde esta el css es que soy novato

(2 Sep, 2011, 11:20 am)kuramin escribió: la ultima parte como agrego eso ami CSS, donde esta el css es que soy novato

Por favor lee las reglas de soporte, debes llenar ciertos datos.

Eso se agrega en el global.css

{SIGNATURE_IMAGE}

Queda muy bueno :O
Aun que es mejor ponerlo normalmente, aun que si las celdas de temas y eso se deforman como en el tema default y no te quieres complicar te va de perlas Tongue

[Imagen: http://i.imgur.com/kLUbBrj.png]