[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>

Ve al set de plantillas de tu tema/mostrar foro - plantillas/forumdisplay_subforums, buscamos y eliminamos:

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

<td class="tcat" width="7%" 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">

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=1671]

Resultado final:
[Imagen: 29cudt1.jpg]

Edito: Envira aclara que si se utilizan sub-foros se visualizaría mal y expone la solución.

Última modificación: 16 Nov, 2011, 10:59 pm por Azagthoth.

Ur a Goood!!! Justo eso andaba preguntando hoy aqui !! Big Grin

Pero si consiste en sustituir todo habrá que volver a poner ficons y eso xD

Última modificación: 5 Nov, 2010, 6:30 pm por Blink.

Si pongo ese tutorial, no me generara incopatibilidad o conflicto con los tiptip del tutorial de ariel?

Última modificación: 5 Nov, 2010, 6:39 pm por alvarorojas4.

(5 Nov, 2010, 6:29 pm)Maurusky escribió: Ur a Goood!!! Justo eso andaba preguntando hoy aqui !!
Pero si consiste en sustituir todo habrá que volver a poner ficons y eso xD

¿Entonces tu eras el que pregunto? Ya que creo que me confundí y lo deje en el tema de Mauro xD

Pon las plantillas que indico en el tutorial pero las tuyas y te las modifico para que no pierdas nada.
De momento agrega el codigo del css y sube la imagen, tambien dime el nombre del directorio de tu tema.

(5 Nov, 2010, 6:30 pm)Mauro escribió: Si pongo ese tutorial, no me generara incopibilidad o conflicto con los tiptip del tutorial de ariel?

No, ya que esto no es un tooltip solo es un efecto estilo tooltip hecho con Css.

Haii!! Genial men muchas gracias , necesitas que e pase mis plantillas o con las que estan en mi tema de dudas son suficientes? Muchas gracias reitero. El skin se llama v3

Última modificación: 5 Nov, 2010, 7:28 pm por Blink.

Busca estas plantillas:
"forumbit_depth1_cat, forumbit_depth2_cat y forumbit_depth2_forum" y copia todo lo que tengas en ellas, se encuentran en "Caja del foro"-

Depth1 cat

Código:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<thead>

<tr>

<td class="thead" colspan="5">

<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>

<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>

</td>

</tr>

</thead>

<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">

<tr>

<td class="tcat" width="1">&nbsp;</td>

<td class="tcat"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>

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

<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>

</tr>

{$sub_forums}

</tbody>

</table>

<br />

Depth2 cat

Código:
<tr>

<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>

<td class="{$bgcolor}" valign="top">

<strong><a href="{$forum_url}">{$forum['name']}</a></strong>&nbsp;<a href="{$mybb->settings['bburl']}/syndication.php?fid={$forum['fid']}&limit=15"><img src="{$mybb->settings['bburl']}/rss.png" alt="RSS" /></a>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$subforums}</div>

</td>

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

<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>

</tr>

depth2 forum

Código:
<tr>

<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/ficons/icon_{$forum['fid']}.png" title="{$forum['name']}"/></td>

<td class="{$bgcolor}" valign="top"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /> <strong><a href="{$forum_url}">{$forum['name']}</a></strong>&nbsp;<a href="{$mybb->settings['bburl']}/syndication.php?fid={$forum['fid']}&limit=15"><img src="{$mybb->settings['bburl']}/rss.png" alt="RSS" /></a>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div></td>

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

<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>

</tr>

Muchas gracias hermano!

Sustituye todo en las siguientes plantillas, agrega el codigo CSS que esta en el mensaje principal, sube la imagen y cambia en las plantillas "forumbit_depth2_cat y forumbit_depth1_forum" en este texto:

Código:
<img src="images/sutema/hover_stats_arrow.gif" class="stats_arrow" />

Donde dice "sutema" por el nombre de la carpeta donde tienes todos tus archivos del tema.

forumbit_depth1_cat:

Código:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<thead>

<tr>

<td class="thead" colspan="3">

<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>

<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>

</td>

</tr>

</thead>

<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">

<tr>

<td class="tcat" width="1">&nbsp;</td>

<td class="tcat"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>

<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>

</tr>

{$sub_forums}

</tbody>

</table>

<br />

forumbit_depth2_cat

Código:
<tr>

<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>

<td class="{$bgcolor}" valign="top">

<strong><a href="{$forum_url}">{$forum['name']}</a></strong>&nbsp;<a href="{$mybb->settings['bburl']}/syndication.php?fid={$forum['fid']}&limit=15"><img src="{$mybb->settings['bburl']}/rss.png" alt="RSS" /></a>{$forum_viewers_text}

<div class="hover_stats">

<img src="images/sutema/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>

<div class="smalltext">{$forum['description']}{$subforums}</div>

</td>

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

<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>

</tr>

forumbit_depth1_forum

Código:
<tr>

<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/ficons/icon_{$forum['fid']}.png" title="{$forum['name']}"/></td>

<td class="{$bgcolor}" valign="top"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /> <strong><a href="{$forum_url}">{$forum['name']}</a></strong>&nbsp;<a href="{$mybb->settings['bburl']}/syndication.php?fid={$forum['fid']}&limit=15"><img src="{$mybb->settings['bburl']}/rss.png" alt="RSS" /></a>{$forum_viewers_text}

<div class="hover_stats">

<img src="images/sutema/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>

<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div></td>

<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>

</tr>

Wooow!! men como puedo pagar?

PD: MUCHA REP VA PARA TI Big Grin

Un dominio .net no me caeria nada mal =) xD!

Nah, estamos pa ayudar Big Grin

Cualquier cosa aca andamos xP