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]

Alerta con el tutorial editado por mi
[Imagen: xrwulBF.png]

Bueno primero tenemos que hacer

1) Vamos a myalerts_alert_row_popup borramos el html que tenemos y ponemos este.

<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>

PHP

Select All

2) Ahora vamos a myalerts_headericon borramos el html que tenemos y ponemos este.

<span class="myalerts_popup_wrapper{$newAlertsIndicator}">
	&mdash; <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&amp;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>

PHP

Select All

Aclaracion tienen que arreglar las rutas de las imagenes yo ahora aqui dejare las 3 imagenes que tienen que poner.
Imagen1: [Imagen: 53m7Zkl.png]
Imagen2: [Imagen: hC6M5EP.png]
Imagen3: [Imagen: 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.

.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;
}

PHP

Select All

Y listo ya tenemos nuestro myalert editado como en la imagen de muestra
[Imagen: xrwulBF.png]

Espero que les guste.

Un Tutorial de Esper Design
http://esper-design.skn2.com/showthread....572#pid572

Probado y funcionando 100% .

+1

Saludos . :thumbsup:

Por casualidad no tienes el archivo de lenguaje en español?

Por casualidad no tienes el archivo de lenguaje en español?

Aquí te dejo uno, yo mismo edité algunas partes de falta de ortografía y errores sintaxis de la lengua española xD.

Lang Esp

Saludos.

Por cierto, este tema ya lo había visto pero tenía más comentarios tal vez fue en Soportemybb xD

en soportemybb Habian mas temas guias y demas

esta xvr men gracias me sirvio

Buenas, ¿sabéis como hacer para cambiarlo de lugar? Porque yo tengo el panel a la izquierda que es donde saldrán las alertas, pero me aparece así:

[Imagen: 34qtmpy.png]

Me encanta este tutorial, muchas gracias .

¿Sabes css? Eso lo puedes arreglar con un simple margin-left

Enviado desde mi Sony Xperia E mediante Tapatalk.

CSS sé muy poco, sé lo básico de lo básico XD. Pero mi pregunta en parte es dónde lo sitúo?

No me funciona, hago todo bien y me lleva a una pagina en blanco