Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Descarga MyBB 1.8.13
SoporteMyBB tiene un total de 832 temas de soporte. 9 quedan aún por resolver, 157 han quedado obsoletos y 666 han sido resueltos.

Hola invitado, aún no tienes una cuenta? Regístrate gratis desde aqui !!! Como registrado podrás obtener soporte, descargar temas y plugins del sitio y más.
Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Creador del tema: eNvy[Tutorial] Descripción de Categorías con efecto
Iniciado por: eNvy

 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 175
Gracias dados54Gracias recibidos177NacionalidadArgentina
20 Abril 2015, 23:23 -
#1
7
Mejor respuesta del mensaje Descripción de Categorías con efectoHe 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:

No puedes ver estos contenidos como invitado

El código a ingresar es el siguiente:

No puedes ver estos contenidos como invitado

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:

No puedes ver estos contenidos como invitado

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:

No puedes ver estos contenidos como invitado

Y la modificación que haremos será la siguiente:

No puedes ver estos contenidos como invitado

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:

No puedes ver estos contenidos como invitado

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:

No puedes ver estos contenidos como invitado

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:

No puedes ver estos contenidos como invitado

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 Abril 2015, 12:37 por eNvy.
 Jean Pierre
High Hopes


Registrados


Estado: Desconectado
Mensajes:290
Temas:24
Registro:12 Jan 2014
Reputación: 116
Gracias dados22Gracias recibidos117NacionalidadPeru
21 Abril 2015, 09:26 -
#2
0
Buen tutorial, siempre uso este efecto, la primera vez con jQuery pero luego con CSS ya que me parece más simple que al pasar el mouse sobre el .thead se muestre la descripción y no necesariamente en el título de la descripción.

Eso juega igualmente para las descripciones de los foros, solo que hay que hacer unos pequeños cambios, pero la lógica es la misma Lengua

Saludos.
 Whiteneo
Beta Tester


Beta Testers


Estado: Desconectado
Mensajes:3,562
Temas:276
Registro:11 Mar 2014
Reputación: 2,036
Gracias dados524Gracias recibidos2,035NacionalidadMexico
22 Abril 2015, 06:46 -
#3
0
Asi es aqui mismo funciona similar ya que yo le hice unos ligeros cambios al codigo que me parecieron adecuados para un mejor funcionamiento.

Agregue la caracteristica display none al css de la clase directamente y elimine el hide que a veces tardaba y se mostraba la descripcion unos segundos en ocasiones.

Me faltaria crear un stop al inicio para evitar bucles innecesarios como el efecto del avatar que agregue al postbit aunque no es muy necesario seria lo mas correcto :D
 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 175
Gracias dados54Gracias recibidos177NacionalidadArgentina
23 Abril 2015, 12:39 -
#4
0
Ahí edite la segunda versión, ya que anteriormente al acomodar las variables al revés, y dar el efecto, haciendo hover sobre donde "estaría" la descripción, el efecto se aplicaba igual, y no es la idea... la idea es que se haga hover en el título de la categoría y luego muestre su descripción.

Simplemente puse el código en orden, cambie el float de la clase "forumdescription" de "right" a "left" y cambie el css de ">" (mayor que) a "+" que es el que corresponde.

Con esas 3 mínimas modificaciones funciona perfecto.

Saludos!
 sergio franco
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:9
Temas:1
Registro:22 Oct 2015
Reputación: 0
Gracias dados1Gracias recibidos0NacionalidadMexico
26 Octubre 2015, 06:13 -
#5
0
alguna imagen de demo? creo que si no como quedar no me atrevo a tocar el código a ciegas.


saudos
 Whiteneo
Beta Tester


Beta Testers


Estado: Desconectado
Mensajes:3,562
Temas:276
Registro:11 Mar 2014
Reputación: 2,036
Gracias dados524Gracias recibidos2,035NacionalidadMexico
26 Octubre 2015, 20:21 -
#6
0
@ sergio franco es el mismo efecto que usamos aqui en el foro en las categorías, pasa el ratón sobre ellas y la descripción aparece delante de la categoría, es el efecto causado por ese código, saludos...

Muchos temas lo usan actualmente y otros ya usan otros efectos, sin embargo creo que es algo que con una imágen no se mostraría sino con 2 tal vez, jajaja. Lo mejor es verlo en vivo y aqui mismo lo verás, sólo funciona en las categorías, no en los foros ni en subforos.

Saludos...


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Cambio de logo según las categorías. Whiteneo 0 1,118 24 Octubre 2014, 22:12
Último mensaje: Whiteneo
  [Tutorial] ToolTip elegante con efecto fade Jean Pierre 6 1,089 25 Septiembre 2014, 03:31
Último mensaje: Whiteneo



Usuarios navegando en este tema: 1 invitado(s)