11 January 2016, 07:58
26
Lista de PM estilo Red Social
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.
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
Quedando algo como esto:
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.
Seguimos con esto, nos vamos a la siguiente planilla de Mensajeria privada -> private_messagebit nos encontraremos con esto, o algo casi igual
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
Luego pasamos a la planilla Pie de pagina -> footer y al final de todo pegamos este codigo
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
añadir los siguientes estilos a su global.css
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
Para aplicar a diversos theme es necesario saber retocar los CSS.
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}&sortby=subject&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}&sortby=username&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}&sortby=dateline&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&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&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&my_post_key={$mybb->post_code}&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>
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
Para aplicar a diversos theme es necesario saber retocar los CSS.
Última modificación: 11 January 2016, 08:00 por llProKsll.