[Tutorial] Editar Caja MyAlerts

Bueno aca un tutorial mio que edita otra forma la caja de myalerts mucho mas bonita que la que viene Smiley-razz

Alerta por default cuando lo instalamos:

Alerta con el tutorial editado por mi Smiley-razz

Bueno primero tenemos que hacer

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

Código 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:

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

Aclaracion tienen que arreglar las rutas de las imagenes yo ahora aqui dejare las 3 imagenes que tienen que poner.
Imagen1:

Imagen2:

Imagen3:

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:

.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

Latest Images

Trending Articles

Latest Images