Bueno aca un tutorial mio que edita otra forma la caja de myalerts mucho mas bonita que la que viene 
Alerta por default cuando lo instalamos:
![[Imagen: QsHeFKj.png]](http://i.imgur.com/QsHeFKj.png)
Alerta con el tutorial editado por mi
![[Imagen: xrwulBF.png]](http://i.imgur.com/xrwulBF.png)
Bueno primero tenemos que hacer
1) Vamos a myalerts_alert_row_popup borramos el html que tenemos y ponemos este.
Alerta por default cuando lo instalamos:
Alerta con el tutorial editado por mi
Bueno primero tenemos que hacer
1) Vamos a myalerts_alert_row_popup borramos el html que tenemos y ponemos este.
Código PHP:
<?php
<li class="alert_row {$alert['rowType']}Row{$alert['unreadAlert']}" id="alert_row_popup_{$alert['id']}">
<a class="avatar" href="{$alert['userLink']}"><img class="alertavatar" src="{$alert['avatar']}" alt="{$alert['username']}'s avatar" width="50" height="50" /></a>
<div class="alertContent">
{$alert['message']}
</div>
</li>
2) Ahora vamos a myalerts_headericon borramos el html que tenemos y ponemos este.
Código PHP:
<?php
<span class="myalerts_popup_wrapper{$newAlertsIndicator}">
— <a href="{$mybb->settings['bburl']}/usercp.php?action=alerts" class="unreadAlerts myalerts_popup_hook" id="unreadAlerts_menu">{$lang->myalerts_alerts} ({$mybb->user['unreadAlerts']})</a>
<div id="unreadAlerts_menu_popup" class="myalerts_popup" style="display:none;">
<div class="popupTitle">{$lang->myalerts_page_title}</div>
<ol>
{$alerts}
</ol>
<div class="popupFooter"><a href="usercp.php?action=alert_settings"><img src="imagen1"></a> <a href="usercp.php?action=deleteAllAlerts&my_post_key={$mybb->post_code}" onclick="return confirm('{$lang->myalerts_delete_all_confirm}')" title="Borrar todos los Alertas"><img src="imagen2"></a> <a href="usercp.php?action=alerts"><img src="imagen3"></a></div>
</div>
</span>
Aclaracion tienen que arreglar las rutas de las imagenes yo ahora aqui dejare las 3 imagenes que tienen que poner.
Imagen1:
![[Imagen: 53m7Zkl.png]](http://i.imgur.com/53m7Zkl.png)
Imagen2:
![[Imagen: hC6M5EP.png]](http://i.imgur.com/hC6M5EP.png)
Imagen3:
![[Imagen: vO2BLlS.png]](http://i.imgur.com/vO2BLlS.png)
3) Bueno cuando ya tenemos editada esas 2 planillas tenemos que editar el CSS del Myalerts
CSSGlobal> Alerts.CSS Borramos todo el css que tiene y ponemos este que ya esta editado por mi.
Código PHP:
<?php
.unreadAlerts {
display: inline-block;
}
.usercp_nav_myalerts {
background: url("images/usercp/bell.png") no-repeat scroll left center transparent;
}
.usercp_nav_myalerts_settings {
background: url("images/usercp/settings.png") no-repeat scroll left center transparent;
}
.usercp_nav_myalerts_delete_all {
background: url("images/usercp/delete.png") no-repeat scroll left center transparent;
}
.usercp_nav_myalerts_delete_read {
background: url("images/usercp/bin.png") no-repeat scroll left center transparent;
}
.newAlerts > a {
color: red !important;
}
.myalerts_popup ol {
list-style: none outside none;
margin: 0;
padding: 0;
}
.myalerts_popup li {
border-bottom: 1px dashed #D4D4D4;
min-height: 31px;
padding: 16px 4px;
}
.myalerts_popup li .avatar {
float: left;
margin-top: -9px;
position: relative;
left: -6px;
}
.myalerts_popup li .alertContent {
color: #5A5A5A !important;
font-size: 11px;
margin-left: 40px;
font-family: arial;
}
.unreadAlert {
background: none repeat scroll 0 0 #FFFBD9;
font-weight: bold;
}
.myalerts_popup_wrapper {
position: relative;
}
.myalerts_popup_wrapper .myalerts_popup {
background: #f9f9f9;
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.576);
font-family: tahoma;
padding: 6px 10px;
position: absolute;
right: 20px;
text-shadow: none;
top: 29px;
width: 365px;
z-index: 9999;
}
.myalerts_popup .popupTitle {
border-bottom: 1px dashed #D4D4D4;
color: #5A5A5A !important;
font-size: 16px;
padding: 4px 0;
}
.popupFooter {
float: right;
font-size: 11px;
padding: 4px 8px;
}
.alertlink {
border: 1px solid transparent;
border-radius: 0 0 0 0;
box-shadow: none;
color: white !important;
display: inline-block;
font-size: 11px;
padding: 0 13px;
position: relative;
right: 14px;
}
.alertlink img {
margin-left: -8px;
margin-right: 5px;
margin-top: -2px;
vertical-align: middle;
}
.avatar_alerts img {
background: none repeat scroll 0 0 white;
border: 1px solid #D5D5D5;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.098);
margin-bottom: -3px;
margin-right: -5px;
margin-top: -3px;
padding: 1px;
}
.avatar_alerts img:hover {
border: 1px solid #7D7D7D;
}
.avatar_popup img {
background: none repeat scroll 0 0 white;
border: 1px solid #D5D5D5;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.098);
padding: 1px;
}
.avatar_popup img:hover {
border: 1px solid #7D7D7D;
}
.alertavatar {
background: white;
padding: 3px;
border: 1px solid #d1d1d1;
border-radius: 30px;
margin-top: -5px;
}
Y listo ya tenemos nuestro myalert editado como en la imagen de muestra
Espero que les guste.
Un Tutorial de Esper Design
http://esper-design.skn2.com/showthread....572#pid572
tal vez fue en Soportemybb xD
![[Imagen: 34qtmpy.png]](http://i62.tinypic.com/34qtmpy.png)
.