[Tutorial] Lista de PM y Notificaciones estilo Red Social

**250** · 11 January 2016, 07:58

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

Lista de PM estilo Red Social

[Imagen: hIZrhYP.png]

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)

Registrate o inicia tu sesión para ver este 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.

Código: ( Seleccionar Todo )

<!--CUSTOMS DROPDOWNS FOR NOTIFICATIONS-->

<script type="text/javascript" src="{$mybb->asset_url}/jquery/js/jquery.dropdown.min.js"></script>

<script type="text/javascript" src="{$mybb->asset_url}/jquery/js/jquery.customs.ks.min.js"></script>

<link href="{$mybb->asset_url}/jquery/css/jquery.dropdown.min.css" rel="stylesheet" type="text/css" />

<link href="{$mybb->asset_url}/jquery/css/jquery.dropdown.css" rel="stylesheet" type="text/css" />

<link href="{$mybb->asset_url}/jquery/css/important-css.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

   jQuery(function(){

       jQuery(".latestAlertsListing").load("{$mybb->settings['bburl']}/alerts.php #latestAlertsListing");

       jQuery(".private_messages_popup").load("{$mybb->settings['bburl']}/private.php .private_messages_popup");

   });

    </script>





<!--END DROPDOWNS FOR NOTIFICATIONS-->

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

Código: ( Seleccionar Todo )

<span style="display:none;">

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

<tr>

{$messagelist}

</tr>

Quedando algo como esto:

Código: ( Seleccionar Todo )

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

<tr>

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

    <div class="float_right">

    <input type="text" name="keywords" value="{$lang->enter_keywords}" onfocus="if(this.value == '{$lang->enter_keywords}') { this.value = ''; }" onblur="if(this.value=='') { this.value='{$lang->enter_keywords}'; }" class="textbox" size="25" />

    <input type="submit" class="button" name="quick_search" value="{$lang->search_pms}" />

    (<a href="private.php?action=advanced_search">{$lang->advanced_search}</a>)</div>

    <strong>{$foldername}</strong></td>

</tr>

<tr>

<td class="tcat" align="center" colspan="3"><span class="smalltext"><strong><a href="private.php?fid={$folder}&amp;sortby=subject&amp;order=asc">{$lang->message_title}</a> {$orderarrow['subject']}</strong></span></td>

<td class="tcat" align="center" width="30%" style="white-space: nowrap"><span class="smalltext"><strong><a href="private.php?fid={$folder}&amp;sortby=username&amp;order=asc">{$sender}</a> {$orderarrow['username']}</strong></span></td>

<td class="tcat" align="right"  width="20%" style="white-space: nowrap"><span class="smalltext"><strong><a href="private.php?fid={$folder}&amp;sortby=dateline&amp;order=desc">{$lang->date_sent}</a> {$orderarrow['dateline']}</strong></span></td>

<td class="tcat" align="center" width="1%" style="white-space: nowrap"><span class="smalltext"><input name="allbox" title="{$lang->check_all}" type="checkbox" class="checkbox checkall" value="{$lang->check_all}" /></span></td>

</tr>

{$messagelist}

<tr>

<td class="tfoot" align="right" colspan="6">

<input type="submit" class="button" name="moveto" value="{$lang->move_to}" /> {$folderoplist} {$lang->or}

<input type="submit" class="button" name="delete" value="{$lang->delete}" /> {$lang->selected_messages}

</td>

</tr>

</table>

    



<span style="display:none;">

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

<tr>

{$messagelist}

</tr>

</table>    

</span>

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

Código: ( Seleccionar Todo )

<tr>

<td align="center" class="trow1" width="1%"><img src="{$theme['imgdir']}/{$msgfolder}" alt="{$msgalt}" title="{$msgalt}" /></td>

<td align="center" class="trow2" width="1%">{$icon}</td>

<td class="trow1" width="35%">{$msgprefix}<a href="private.php?action=read&amp;pmid={$message['pmid']}">{$message['subject']}</a>{$msgsuffix}{$denyreceipt}</td>

<td align="center" class="trow2">{$tofromusername}</td>

<td class="trow1" align="right" style="white-space: nowrap"><span class="smalltext">{$senddate}</span></td>

<td class="trow2" align="center"><input type="checkbox" class="checkbox" name="check[{$message['pmid']}]" value="1" /></td>

</tr>

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

Código: ( Seleccionar Todo )

<!-- HIDDEN -->



<tr>

<tr class="{$msgalt}" style="display:none" id="ShowInPopup">

<td class="trow1" width="60%" style="border-bottom:none;" >{$msgprefix}<a href="private.php?action=read&amp;pmid={$message['pmid']}">{$message['subject']}</a>{$msgsuffix}  <span class="alt_{$msgalt}">Nuevo</span></br><span style="cursor:default; font-size:14px">enviado por </span><avatarep[{$tofromuid}]['avatar']> {$tofromusername}</td>

<td class="trow1" width="10%" align="right" style="white-space: nowrap; border-bottom:none;"><span class="smalltext" style="cursor:default">{$senddate}</span></td>

    </tr>

<!-- END HIDDEN-->

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

Código: ( Seleccionar Todo )

<!-- STAR DROPDOWNS -->    



<!-- DROPDOWN1 : PRIVATE MESSAGES-->





<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip" style="display: none; left: 616px; top: 1324.265625px;">

       <div class="dropdown-arrow"></div>

          <ul class="jq-dropdown-menu">

            <li><span style="float:left; font-weight:bold; margin-left: 5px;" >Mensajes Privados</a></span><span style="float: right;font-weight:bold;margin-right: 5px;"><a href="{$mybb->settings['bburl']}/private.php?action=send" >Nuevo Mensaje</a></span></li>

            <li class="jq-dropdown-divider" style="margin-top: 25px;"><span style="font-weight:bold"></span></li>



            <li style="overflow-y: scroll;width: 370px;overflow-x: hidden;min-height: 60px;max-height: 210px;" ><table width="360" border="0" cellspacing="0" cellpadding="5" class="private_messages_popup"></table></li>



            <li class="jq-dropdown-divider"></li>

            <li><div style="text-align:center;padding: 3px 3px;"><a href="{$mybb->settings['bburl']}/private.php" style="text-align: center;font-weight:bold;">Ver todos los Mensajes</a></div></li>



          </ul>

        </div>







<!-- END DROPDOWN PRIVATE MESSAGES-->    



<!---------------------------------------------------->





<!-- DROPDOWN2: NOTIFICATIONS-->    

<div id="jq-dropdown-2" class="jq-dropdown jq-dropdown-tip tip2" style="display: none; left: 616px; top: 1324.265625px;">

    <div class="dropdown-arrow"></div>      

        <div class="jq-dropdown-menu">

            <div><span style="text-align: center;margin-left: 130px;font-weight: bold;">Alertas Recientes</span></div>

            <div class="jq-dropdown-divider" style=""><span style="font-weight:bold"></span></div>

            <div  id="boxscroll" style="display:none2;width: 380px;border: none;height: 100px;"  class="latestAlertsListing"> </div>

            <div class="jq-dropdown-divider"></div>

            <div><span style="float:left; font-weight:bold; margin-left: 5px;" ><a href="{$mybb->settings['bburl']}/alers.php">Ver Alertas</a></span><span style="float: right;font-weight:bold;margin-right: 5px;"><a href="{$mybb->settings['bburl']}/alerts.php?action=delete_all&amp;my_post_key={$mybb->post_code}&amp;ret_link={$myalerts_return_link}"

                       onclick="return confirm('{$lang->myalerts_delete_all_confirm}')">Eliminar Todas</a></span></div>

        </div>



</div>





<!-- END: DROPDOWN NOTIFICATIONS-->



<!-- END: DROPDOWN -->

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

Código: ( Seleccionar Todo )

<span class="sep"><a href="#"  data-jq-dropdown="#jq-dropdown-1" ><i class="fa fa-envelope fa-2x"></i> <span class="pms">{$mybb->user['pms_unread']} </span></a></span>

<span class="sep"><a href="#"  data-jq-dropdown="#jq-dropdown-2"><i class="fa fa-bell fa-2x"></i> <span class="pms">{$mybb->user['unreadAlerts']} </span></a></span>

añadir los siguientes estilos a su global.css

Código: ( Seleccionar Todo )

.sep {

    margin-right: 20px;

}



.pms {

    position: relative;

    top: -17px;

    left: -10px;

    font-size: 11px;

    color: #FFFFFF;

    padding: 2px 6px;

    border-radius: 3px;

    background: #c10307;

    background: -moz-linear-gradient(top, #c10307 0%, #9b0324 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c10307), color-stop(100%,#9b0324));

    background: -webkit-linear-gradient(top, #c10307 0%,#9b0324 100%);

    background: -o-linear-gradient(top, #c10307 0%,#9b0324 100%);

    background: -ms-linear-gradient(top, #c10307 0%,#9b0324 100%);

    background: linear-gradient(to bottom, #c10307 0%,#9b0324 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c10307', endColorstr='#9b0324',GradientType=0 );

}

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

[Imagen: p6ouUF1.png]

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

**180** · 11 January 2016, 12:51

2

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!

**250** · 11 January 2016, 14:27

0

(11 January 2016, 12:51 )eNvy escribió: Registrate o inicia tu sesión para ver este contenidoMuy 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

, 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
[Imagen: spnuLe8.png]

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 ( Registrate o inicia tu sesión para ver este contenido) 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.

**180** · 11 January 2016, 16:06

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:

Registrate o inicia tu sesión para ver este contenido

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:

Código: ( Seleccionar Todo )

<script type="text/javascript">

jQuery(document).ready(function($) {



    function DropDown(el) {

        this.dd = el;

        this.initEvents();

    }



    DropDown.prototype = {

        initEvents : function() {

            var obj = this;



            obj.dd.on('click', function(event){

                $(this).toggleClass('active');

                event.stopPropagation();

            }); 

       }

    }



    $(function() {

        var dd = new DropDown( $('#dd') );

        $(document).click(function() {

            $('.wrapper-dropdown-5').removeClass('active');

        });



    });

});

</script>

Slide de Ignite:

Código: ( Seleccionar Todo )

$(document).ready(function () {

     $("#toggle").click(function () {

        $("#userbar").animate({width: 'toggle'});

    });

});

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

Saludos!

**250** · 12 January 2016, 13:56

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

**250** · 14 January 2016, 19:36

1

@ 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

[Imagen: cADJJpk.png]

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

**180** · 14 January 2016, 22:51

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.

15 January 2016, 00:25

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.

**250** · 15 January 2016, 05:15

0

(14 January 2016, 22:51 )eNvy escribió: Registrate o inicia tu sesión para ver este contenidoPues 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).

17 March 2016, 08:08

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] Estilo de Pestañas en Perfil	ARESKY	1	86	24 February 2024, 22:04 Último mensaje: Whiteneo
	[Tutorial] Foros al estilo VBulletin	Yadomi	6	3,082	1 July 2018, 21:31 Último mensaje: spyke
	[Tutorial] Fieldset con estilo iv y boton en el editor.	Whiteneo	7	1,805	20 February 2018, 20:39 Último mensaje: SuperDiego
	[Tutorial] Portal estilo página de descargas	Yadomi	16	4,460	24 May 2017, 16:35 Último mensaje: krvam
	[Tutorial] [Para Subforos] Mensajes nuevos y viejos al estilo VBulletin	Yadomi	1	1,191	23 October 2014, 03:48 Último mensaje: Whiteneo