[Tutorial] Editar Caja MyAlerts
Bueno aca un tutorial mio que edita otra forma la caja de myalerts mucho mas bonita que la que viene :P Alerta por default cuando lo instalamos: ...

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

Alerta por default cuando lo instalamos:
[Imagen: QsHeFKj.png]

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

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']}">
    <
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: [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.

Código PHP:
.unreadAlerts {
    
displayinline-block;
}
.
usercp_nav_myalerts {
    
backgroundurl("images/usercp/bell.png"no-repeat scroll left center transparent;
}
.
usercp_nav_myalerts_settings {
    
backgroundurl("images/usercp/settings.png"no-repeat scroll left center transparent;
}
.
usercp_nav_myalerts_delete_all {
    
backgroundurl("images/usercp/delete.png"no-repeat scroll left center transparent;
}
.
usercp_nav_myalerts_delete_read {
    
backgroundurl("images/usercp/bin.png"no-repeat scroll left center transparent;
}
.
newAlerts {
    
colorred !important;
}
.
myalerts_popup ol {
    list-
stylenone outside none;
    
margin0;
    
padding0;
}
.
myalerts_popup li {
    
border-bottom1px dashed #D4D4D4;
    
min-height31px;
    
padding16px 4px;
}
.
myalerts_popup li .avatar {
    
floatleft;
    
margin-top: -9px;
    
positionrelative;
    
left: -6px;
}
.
myalerts_popup li .alertContent {
    
color#5A5A5A !important;
    
font-size11px;
    
margin-left40px;
    
font-familyarial;
}
.
unreadAlert {
    
backgroundnone repeat scroll 0 0 #FFFBD9;
    
font-weightbold;
}
.
myalerts_popup_wrapper {
    
positionrelative;
}
.
myalerts_popup_wrapper .myalerts_popup {
    
background#f9f9f9;
    
border-radius0 0 8px 8px;
    
box-shadow0 10px 25px rgba(0000.576);
    
font-familytahoma;
    
padding6px 10px;
    
positionabsolute;
    
right20px;
    
text-shadownone;
    
top29px;
    
width365px;
    
z-index9999;
}
.
myalerts_popup .popupTitle {
    
border-bottom1px dashed #D4D4D4;
    
color#5A5A5A !important;
    
font-size16px;
    
padding4px 0;
}
.
popupFooter {
    
floatright;
    
font-size11px;
    
padding4px 8px;
}
.
alertlink {
    
border1px solid transparent;
    
border-radius0 0 0 0;
    
box-shadownone;
    
colorwhite !important;
    
displayinline-block;
    
font-size11px;
    
padding0 13px;
    
positionrelative;
    
right14px;
}
.
alertlink img {
    
margin-left: -8px;
    
margin-right5px;
    
margin-top: -2px;
    
vertical-alignmiddle;
}
.
avatar_alerts img {
    
backgroundnone repeat scroll 0 0 white;
    
border1px solid #D5D5D5;
    
box-shadow0 2px 2px rgba(0000.098);
    
margin-bottom: -3px;
    
margin-right: -5px;
    
margin-top: -3px;
    
padding1px;
}
.
avatar_alerts img:hover {
    
border1px solid #7D7D7D;
}
.
avatar_popup img {
    
backgroundnone repeat scroll 0 0 white;
    
border1px solid #D5D5D5;
    
box-shadow0 2px 2px rgba(0000.098);
    
padding1px;
}
.
avatar_popup img:hover {
    
border1px solid #7D7D7D;
}

.
alertavatar {
    
backgroundwhite;
    
padding3px;
    
border1px solid #d1d1d1;
    
border-radius30px;
    
margin-top: -5px;



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
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
Por casualidad no tienes el archivo de lenguaje en español?
Aprendiendo cada vez mas
(6 Mar, 2014, 11:10 pm)Mobius escribió: 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 Confused tal vez fue en Soportemybb xD
en soportemybb Habian mas temas guias y demas
Aprendiendo cada vez mas
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 Wink.
Última modificación: 1 Apr, 2014, 2:00 am por Nosftcry.
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