20 April 2015, 23:23
8
He aquí otro tutorial, corto de realizar, pero con una buena y detallada explicación.
Son 2 versiones diferentes, una utiliza jQuery para realizar el efecto, y la otra simplemente utiliza CSS.
Primer tutorial: Versión con jQuery
1. Ingresarán en su panel de administración, luego irán a estilos y plantillas, seleccionan plantillas, buscan el grupo de plantillas sin grupo, y allí abren la plantilla "headerinclude".
Allí como siempre, deberán colocar su código en la línea de comentarios a continuación:
El código a ingresar es el siguiente:
No hay mucha explicación aquí, el código simplemente oculta la clase "catdesc", y la muestra únicamente cuando hacen hover (pasan el mouse por encima) de la clase "cattitle".
2. Ahora ingresarán en su panel de administración, luego irán a estilos y plantillas, seleccionan plantillas, buscan el grupo de plantillas "Caja del Foro", y allí abren la plantilla "forumbit_depth1_cat".
Reemplazan todo el código que ya tienen, por este nuevo código:
La única diferencia del código original a este, es que cambiamos 1 sola línea, yo simplemente les dejo toda la plantilla para que les sea más simple de modificar.
La línea que estamos cambiando es esta:
Y la modificación que haremos será la siguiente:
Como pueden apreciar, encerramos la variable "{$forum['name']}" con un tag <span> y la clase "cattitle" (La clase que hace el efecto cuando uno pasa el mouse por encima), y luego encerramos la segunda variable "{$forum['description']}" con otro tag <span> pero esta ves, utilizaremos la clase "catdesc" para ocultar dicha descripción.
3. Para finalizar, simplemente iremos a nuestro Global.css o cualquier otro CSS en tu tema que sea GLOBAL, es decir, que se pueda leer desde cualquier plantilla, y añadirán el siguiente código:
Aquí simplemente definimos el tipo de fuente (Arial), el tamaño de dicha fuente (13px), el color del texto (Blanco #FFFFFF), el color de fondo (Gris oscuro #363636) y por último el padding, que es lo que "agranda" si se quiere especificar de forma simple todo el recipiente de la descripción.
Segundo tutorial: Versión con CSS (Efecto diferente)
Esta segunda versión es mucho más simple de realizar, volvemos a ingresar en el panel de administración, luego irán a estilos y plantillas, seleccionan plantillas, buscan el grupo de plantillas "Caja del Foro", y allí abren la plantilla "forumbit_depth1_cat".
También vamos a modificar la misma línea que antes, pero ahora será diferente, el código modificado es el siguiente:
Aquí en lugar de la etiqueta <span>, utilizo la etiqueta <div>, ya que se muestra de una forma diferente, y el espacio que utiliza también es diferente.
Una ves que modificaron eso, pasamos directamente al CSS, sí, no hay necesidad de más modificaciones de plantillas.
Nuevamente, ingresan a su Global.css o cualquier otro CSS en tu tema que sea GLOBAL, es decir, que se pueda leer desde cualquier plantilla, y añadirán el siguiente código:
Para no marearlos, voy a ir por partes, igualmente es simple:
La clase "forumname", va a definir el estilo del título de su categoría, repito, el título de su categoría (No la descripción). Nosotros simplemente definimos el tipo de fuente, el tamaño, el color, alineamos todo el elemento hacia nuestra izquierda y por último le damos 0,3 segundos de transición para realizar el efecto deseado.
La clase "forumdescription", como bien lo indica, es para definir el estilo de nuestra descripción, también volvemos a definir el tipo de fuente, el tamaño, el color, pero esta ves alineamos dicho efecto hacia nuestra derecha, aclaramos que la posición es relativa, damos un margen de 5 píxeles hacia nuestra izquierda, le decimos que queremos opacidad a 0, esto vuelve invisible al elemento, pero aún sigue ahí, y por último nuevamente le damos efecto.
La última clase, la cual es una combinación de ambas, realizando hover en forumname, simplemente aclara que la opacidad sea 1 para que sea completamente visible, que el margen izquierdo (Que anteriormente ya definimos en 5) ahora sea 15, y también aplicamos efecto.
Lo que hace este código es alinear tanto el título de la categoría como su descripción, separa la descripción del título, y luego al realizar hover (pasar el mouse) sobre el título de la categoría, o sobre la descripción que se encuentra allí, solo que es invisible, la misma aparece y se mueve hacia nuestra derecha.
Eso fue todo, pueden estilizar el CSS de ambas cosas a gusto.
Saludos!
P.D.: La primer versión del tutorial esta funcionando aquí en Soportemybb.es ^^.
Son 2 versiones diferentes, una utiliza jQuery para realizar el efecto, y la otra simplemente utiliza CSS.
Primer tutorial: Versión con jQuery
1. Ingresarán en su panel de administración, luego irán a estilos y plantillas, seleccionan plantillas, buscan el grupo de plantillas sin grupo, y allí abren la plantilla "headerinclude".
Allí como siempre, deberán colocar su código en la línea de comentarios a continuación:
Código: ( Seleccionar Todo )
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1804"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1804"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1804"></script>
<--! Aquí colocarán el código que les dejaré a continuación -->
{$stylesheets}El código a ingresar es el siguiente:
Código: ( Seleccionar Todo )
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".catdesc").hide();
$(".cattitle").on('mouseover mouseout', function(event) {
var catdesc = $(this).parent().children('.catdesc');
var content = catdesc.text();
if (content !== "") {
if (event.type == 'mouseover') {
catdesc.fadeIn('slow');
} else {
catdesc.stop(true, true).fadeOut('slow');
}
}
});
});
</script>No hay mucha explicación aquí, el código simplemente oculta la clase "catdesc", y la muestra únicamente cuando hacen hover (pasan el mouse por encima) de la clase "cattitle".
2. Ahora ingresarán en su panel de administración, luego irán a estilos y plantillas, seleccionan plantillas, buscan el grupo de plantillas "Caja del Foro", y allí abren la plantilla "forumbit_depth1_cat".
Reemplazan todo el código que ya tienen, por este nuevo código:
Código: ( Seleccionar Todo )
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead{$expthead}" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><span class="cattitle"><a href="{$forum_url}">{$forum['name']}</a></span><span class="catdesc">{$forum['description']}</span></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td class="tcat" colspan="2"><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 />La única diferencia del código original a este, es que cambiamos 1 sola línea, yo simplemente les dejo toda la plantilla para que les sea más simple de modificar.
La línea que estamos cambiando es esta:
Código: ( Seleccionar Todo )
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>Y la modificación que haremos será la siguiente:
Código: ( Seleccionar Todo )
<div><span class="cattitle"><a href="{$forum_url}">{$forum['name']}</a></span><span class="catdesc">{$forum['description']}</span></div>Como pueden apreciar, encerramos la variable "{$forum['name']}" con un tag <span> y la clase "cattitle" (La clase que hace el efecto cuando uno pasa el mouse por encima), y luego encerramos la segunda variable "{$forum['description']}" con otro tag <span> pero esta ves, utilizaremos la clase "catdesc" para ocultar dicha descripción.
3. Para finalizar, simplemente iremos a nuestro Global.css o cualquier otro CSS en tu tema que sea GLOBAL, es decir, que se pueda leer desde cualquier plantilla, y añadirán el siguiente código:
Código: ( Seleccionar Todo )
.catdesc {
font-family: Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
background: #363636;
padding: 3px 6px;
}Aquí simplemente definimos el tipo de fuente (Arial), el tamaño de dicha fuente (13px), el color del texto (Blanco #FFFFFF), el color de fondo (Gris oscuro #363636) y por último el padding, que es lo que "agranda" si se quiere especificar de forma simple todo el recipiente de la descripción.
Segundo tutorial: Versión con CSS (Efecto diferente)
Esta segunda versión es mucho más simple de realizar, volvemos a ingresar en el panel de administración, luego irán a estilos y plantillas, seleccionan plantillas, buscan el grupo de plantillas "Caja del Foro", y allí abren la plantilla "forumbit_depth1_cat".
También vamos a modificar la misma línea que antes, pero ahora será diferente, el código modificado es el siguiente:
Código: ( Seleccionar Todo )
<div class="forumname"><a href="{$forum_url}">{$forum['name']}</a></div><div class="forumdescription">{$forum['description']}</div>Aquí en lugar de la etiqueta <span>, utilizo la etiqueta <div>, ya que se muestra de una forma diferente, y el espacio que utiliza también es diferente.
Una ves que modificaron eso, pasamos directamente al CSS, sí, no hay necesidad de más modificaciones de plantillas.
Nuevamente, ingresan a su Global.css o cualquier otro CSS en tu tema que sea GLOBAL, es decir, que se pueda leer desde cualquier plantilla, y añadirán el siguiente código:
Código: ( Seleccionar Todo )
.forumname {
font-family: Arial, sans-serif;
font-size: 13px;
color: #464646;
float: left;
transition: all 0.3s ease;
}
.forumdescription {
font-family: Arial, sans-serif;
font-size: 13px;
color: #767676;
float: left;
position: relative;
margin: 0 0 0 5px;
opacity: 0;
transition: all 0.3s ease;
}
.forumname:hover + .forumdescription {
opacity: 1;
margin-left: 15px;
transition: all 0.3s ease;
}Para no marearlos, voy a ir por partes, igualmente es simple:
La clase "forumname", va a definir el estilo del título de su categoría, repito, el título de su categoría (No la descripción). Nosotros simplemente definimos el tipo de fuente, el tamaño, el color, alineamos todo el elemento hacia nuestra izquierda y por último le damos 0,3 segundos de transición para realizar el efecto deseado.
La clase "forumdescription", como bien lo indica, es para definir el estilo de nuestra descripción, también volvemos a definir el tipo de fuente, el tamaño, el color, pero esta ves alineamos dicho efecto hacia nuestra derecha, aclaramos que la posición es relativa, damos un margen de 5 píxeles hacia nuestra izquierda, le decimos que queremos opacidad a 0, esto vuelve invisible al elemento, pero aún sigue ahí, y por último nuevamente le damos efecto.
La última clase, la cual es una combinación de ambas, realizando hover en forumname, simplemente aclara que la opacidad sea 1 para que sea completamente visible, que el margen izquierdo (Que anteriormente ya definimos en 5) ahora sea 15, y también aplicamos efecto.
Lo que hace este código es alinear tanto el título de la categoría como su descripción, separa la descripción del título, y luego al realizar hover (pasar el mouse) sobre el título de la categoría, o sobre la descripción que se encuentra allí, solo que es invisible, la misma aparece y se mueve hacia nuestra derecha.
Eso fue todo, pueden estilizar el CSS de ambas cosas a gusto.
Saludos!
P.D.: La primer versión del tutorial esta funcionando aquí en Soportemybb.es ^^.
Última modificación: 23 April 2015, 12:37 por eNvy.
