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.15
SoporteMyBB tiene un total de 943 temas de soporte. 1 quedan aún por resolver, 184 han quedado obsoletos y 758 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: llProKsll[Tutorial] Lista de PM y Notificaciones estilo Red Social

 Iniciado por: llProKsll

 llProKsll
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:342
Temas:28
Registro:04 Apr 2015
Reputación: 232
Emociones Brindadas: 0
Emociones Recibidas: 0
Gracias dados144Gracias recibidos232NacionalidadVenezuela
11 Enero 2016, 07:58 -
#1
22

Mejor respuesta del mensaje Lista de PM y Notificaciones estilo Red SocialLista de PM estilo Red Social

Registrate o inicia tu sesión para ver este contenido

Esto es algo que estaba trabajando desde hace un tiempo y estuve mostrandoles los avances en un tema que hice en la seccion de offtopic

Antes que nada dejare 2 enlaces, uno con el theme My Trade con todo el trabajo hecho y totalmente terminado como lo ven en la imagen y el otro enlace unicamente tiene las herramientas necesarias para poder aplicarlo en cualquier otro theme (.css's y .js's)


Debes agradecer para ver el contenido...


Ahora pasamos a la guia de instalacion en custom theme,

Luego de pegar la carpeta jquery dentro de la raiz del foro, luego nos vamos al headerinclude de nuestro theme y pegamos el siguiente en la parte inferior o superior, donde ustedes gusten.

Registrate o inicia tu sesión para ver este contenido



Luego nos vamos a las planillas de Mensajeria privada -> Private , buscamos la siguiente variable  {$messagelist}  y corremos un poco hacia abajo donte termina la tabla que contiene esta variable, corremos unos espacios hacia abajo  y luego añadimos lo siguiente


Registrate o inicia tu sesión para ver este contenido

Quedando algo como esto:

Registrate o inicia tu sesión para ver este contenido

Recuerden que la composicion puede variar segun el theme pero es el mismo procedimiento, buscan el fin de la tabla ( </table> ) y añadimos el codigo.

Cita:Esto nos permitira hacer todas las ediciones que necesitemos en el popup sin afectar en nada la vista comun de la pagina principal de mensajeria privada


Seguimos con esto, nos vamos a la siguiente planilla de Mensajeria privada -> private_messagebit nos encontraremos con esto, o algo casi igual

Registrate o inicia tu sesión para ver este contenido

en la primera linea de codigo hay un <tr> al cual le agregaremos el siguiente id: HideIn_Popup quedando asi :
<tr id="HideIn_Popup">

Luego corremos a la ultima linea, dejamos unos espacios con "enter"


Añadimos el siguiente codigo que sera lo que se mostrara en el dropdown


Registrate o inicia tu sesión para ver este contenido



Luego pasamos a la planilla Pie de pagina -> footer y al final de todo pegamos este codigo

Registrate o inicia tu sesión para ver este contenido


Ya hasta aqui tenemos todo practicamente listo, ¿ ahora que falta ? pues añadir o ditar el boton que nos mostrara la ventana al dar click :D , nos vamos a las planillas de Cabecera -> header_welcomeblock_member
Este paso es importate, si tu theme no cuenta con un icono de mensajes como el theme mytrade, debes saber colocar el icono para que deformes tu header, este es el codigo tanto para los mensajes como para las notificaciones del myalers


Registrate o inicia tu sesión para ver este contenido
añadir los siguientes estilos a su global.css

Registrate o inicia tu sesión para ver este contenido


Un retoque a los css y se podria aplicarse a cualquier theme, aqui siguiendo mis propios pasos lo añadi al theme Ignite de @ eNvy

Registrate o inicia tu sesión para ver este contenido


Para aplicar a diversos theme es necesario saber retocar los CSS.

Última modificación: 11 Enero 2016, 08:00 por llProKsll.
 
 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 185
Gracias dados54Gracias recibidos185NacionalidadArgentina
11 Enero 2016, 12:51 -
#2
1

Muy bueno @ llProKsll

Yo recuerdo hace siglos haber hecho algo similar, aunque lo mío era solo cambiar el nº de mps y nada más, esto es mucho más completo y elegante ^^.

Lo que si puedo decirte es que, por darte un ejemplo, en Ignite esta bien, pero en MyTrade ya tienes código para el dropdown del menú de usuario, podrías utilizar el mismo código para el menú de mps y te evitas de cargar otro código jquery (Igualmente no soy experto en esto, pero creo que sería la mejor opción tener un código de dropdown global).

Saludos!

 
 llProKsll
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:342
Temas:28
Registro:04 Apr 2015
Reputación: 232
Gracias dados144Gracias recibidos232NacionalidadVenezuela
11 Enero 2016, 14:27 -
#3
0

(11 Enero 2016, 12:51 )eNvy escribió: Muy bueno @ llProKsll

Yo recuerdo hace siglos haber hecho algo similar, aunque lo mío era solo cambiar el nº de mps y nada más, esto es mucho más completo y elegante ^^.

Lo que si puedo decirte es que, por darte un ejemplo, en Ignite esta bien, pero en MyTrade ya tienes código para el dropdown del menú de usuario, podrías utilizar el mismo código para el menú de mps y te evitas de cargar otro código jquery (Igualmente no soy experto en esto, pero creo que sería la mejor opción tener un código de dropdown global).

Saludos!

Gracias  Gran sonrisa , si es bastante complejo de hecho jajaja. estoy conciente de que el theme MyTrade viene con una query de dropdown incluido, lo que sucede es que cuando comence con la idea de todo esto estaba trabajando en el theme default, al escoger un theme mytrade para comenzar a trabajarlo me di cuenta que tenia su propio codigo para el el menu de opciones de usuario
Registrate o inicia tu sesión para ver este contenido
pero funciona diferente y es mucho mas complejo que el que se utiliza para los mensajes y las notificaciones, me parecio mucho mas simple y menos metodico usar este ya que tampoco es que se muucho de esto de las jquery's y programacion, todo esto lo comence a experimentar con todo esto luego de entender el funcionamiento de un tutorial de @Dark Neo ( [Tutorial] Ultimos temas en el inicio del foro ) experimentando sin saber mucho al respecto, pero tenia una diea mas o menos clara de lo que podia lograr, rebuscandome entre guias, tutos y videotutoriales, surtiendome un poco de conocimientos para no llegar a barrancos, en el proceso fui cuadrando todo, siempre en el error y ensayo hasta que salia algo proximo a lo que queria para seguir adelantando el trabajo y luego volvia al principio y lanzaba un ojo para pulir una y otra vez lo mismo, hasta que lo termine y lo comparti. n.n  Sonrisa
Volviendo a tu sugerencia, creo que si, si puede hacer con el mismo codigo que ocupa el mytrade, solo que no se como cuadrar las funciones  Indeciso  ambos funcionan diferente.

Última modificación: 11 Enero 2016, 14:28 por llProKsll.
 
 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 185
Gracias dados54Gracias recibidos185NacionalidadArgentina
11 Enero 2016, 16:06 -
#4
0

Mira, creo que Square y MyTrade, ambos themes que hice, fueron de los primeros y usaba un código jQuery que no es muy largo pero hoy en día podría decirse que sí.

En los diseños actuales simplemente utilizo el código que dejo Envira en un tutorial, y lo hago simplemente porque es como debería funcionar, sin agregados.

Te dejo el link del tutorial para que le pegues un vistazo:

http://community.mybb.com/thread-172860.html

Algo similar hice con Ignite, el código del menú deslizante son 2 líneas simples de código, sin tantas vueltas ni problemas, lo mismo hace el código de ese tutorial, utiliza el método slidetoggle para crear el slide.

Slide de MyTrade:

Registrate o inicia tu sesión para ver este contenido

Slide de Ignite:

Registrate o inicia tu sesión para ver este contenido

Nota: son diferentes slides, sí, pero es para que te des una idea de la diferencia entre un código y el otro.

Saludos!

Última modificación: 11 Enero 2016, 16:10 por eNvy.
 
 llProKsll
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:342
Temas:28
Registro:04 Apr 2015
Reputación: 232
Gracias dados144Gracias recibidos232NacionalidadVenezuela
12 Enero 2016, 13:56 -
#5
0

Vale, ojie un poco el tuto y el live demo, cuando tenga tiempo pruebo a ver que tal se visualiza usandolo de manera slide, tenia planes de hacer unos 2 themes pero me desanime al ver los repo de la 2.0, en mis planes estaba hacer los themes responsive, que no es dificil pero si es tedioso y la version 2.0 es responsive por defecto y trae algunas cosas utiles para jugar con diseños y apariencia.

por cierto te quedo muy sensualon ese slide menu del theme ignite, tenia rato sin ver algo que me llamara la atencion y pues algo tan simple como eso me dejo asombrado, te luciste  Gran sonrisa , con ese theme me diste en mi punto debil (los themes dark) Gran sonrisa

Última modificación: 12 Enero 2016, 13:57 por llProKsll.
 
 llProKsll
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:342
Temas:28
Registro:04 Apr 2015
Reputación: 232
Gracias dados144Gracias recibidos232NacionalidadVenezuela
14 Enero 2016, 19:36 -
#6
0

@ eNvy he pasado toda la mañana viendo el codigo y probando maneras de implementarlo y despues de acomodar muchos estilos por fin termine y quedo bastante simpatico a la vista con un efecto chevere

Registrate o inicia tu sesión para ver este contenido

es el mismo codigo del dropdown que esta en el MyTrade modificado, y de verdad que me gusta mas e..é, no es mas "simple" como dijiste pero si me gusta mas, mas tarde pulo el estilo y lo comparto, para la mayoria de los usuarios esto sera util nada mas en el mytrade, para poder aplicarlo en otros themes sera algo complicado creo que necesitaria hacer otra guia, no se en lo personal me costo un rato algo largo hacer eso Gran sonrisa

Última modificación: 14 Enero 2016, 19:40 por llProKsll.
 
 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 185
Gracias dados54Gracias recibidos185NacionalidadArgentina
14 Enero 2016, 22:51 -
#7
0

Pues sí, eso sería únicamente con MyTrade por el código que trae aparte para el dropdown.

Pero creo que de forma nativa, MyBB trae un dropdown integrado, aunque nunca me puse a ver realmente como funciona ni que tan particular es, hay muchas variantes de un menu dropdown, para mí (personalmente) el mejor menu dropdown es aquel que realmente tiene un slide al abrir y cerrar el menu, y que no necesariamente requiere que presiones el mismo botón para cerrarlo, cosa que sucede muchas veces con ciertos menús dropdown.

 
 Itzamna
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:90
Temas:3
Registro:23 Jan 2013
Reputación: 35
Gracias dados80Gracias recibidos35NacionalidadCanada
15 Enero 2016, 00:25 -
#8
0

Muy interesante esta informacion, habria que ver como montarlo y como quedaria en por ejemplo el tema default de mybb que muchos usan por flojera de buscar otro o falta de tiempo o conocimientos, pero si muchos lo usan.

 
 llProKsll
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:342
Temas:28
Registro:04 Apr 2015
Reputación: 232
Gracias dados144Gracias recibidos232NacionalidadVenezuela
15 Enero 2016, 05:15 -
#9
0

(14 Enero 2016, 22:51 )eNvy escribió: Pues sí, eso sería únicamente con MyTrade por el código que trae aparte para el dropdown.

Pero creo que de forma nativa, MyBB trae un dropdown integrado, aunque nunca me puse a ver realmente como funciona ni que tan particular es, hay muchas variantes de un menu dropdown, para mí (personalmente) el mejor menu dropdown es aquel que realmente tiene un slide al abrir y cerrar el menu, y que no necesariamente requiere que presiones el mismo botón para cerrarlo, cosa que sucede muchas veces con ciertos menús dropdown.

Estuve haciendo algunas pruebas y luego de prestarle atencion a las instrucciones que da el codigo, el dropdown abre con la funcion click, pasa de estar normal (oculto) a estar activo (visible), de nuevo con otro click pasa de estar activo a estar normal indiferentemente del sitio donde clickees y de verdad que para los mensajes no me cuadra mucho en cambio para las notificaciones si seria viable, lo otro que podria hacer es estilizar el otro codigo de dropdowns y añadirle un efecto slide.

Para mi un dropdown es un menu o pestaña que se despliega con un click indiferntemente el efecto visual que este tenga, aquellos menus que se despliegan al pasar el mouse son Menus desplegables, o al menos de esa manera se identifican en el internet.


EDITO

bastante interesante los acabados que se puede lograr con jquery y algo de css, a mi codigo le añadi un efecto se podria decir slide mediante keyframes, se me han ocurrido varias ideas y hasta me dieron ganas de hacer uno de mis proyectos avandonados (un theme).

Última modificación: 15 Enero 2016, 08:10 por llProKsll.
 
 lavaskins
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:12
Temas:6
Registro:24 Sep 2015
Reputación: 4
Gracias dados4Gracias recibidos4NacionalidadVietnam
17 Marzo 2016, 08:08 -
#10
0

I saw something like the inbox list of "thanhtu", but thank you for sharing Sonrisa

 


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Fieldset con estilo iv y boton en el editor. Whiteneo 7 981 20 Febrero 2018, 20:39
Último mensaje: SuperDiego
  [Tutorial] Portal estilo página de descargas Yadomi 16 2,650 24 Mayo 2017, 16:35
Último mensaje: krvam
  [Tutorial] Foros al estilo VBulletin Yadomi 5 1,930 5 Diciembre 2014, 18:05
Último mensaje: desencriptador
  [Tutorial] [Para Subforos] Mensajes nuevos y viejos al estilo VBulletin Yadomi 1 776 23 Octubre 2014, 03:48
Último mensaje: Whiteneo



Usuarios navegando en este tema: 1 invitado(s)