Windows Live Hotmail rediseñado con Stylish (CleanUp)
Aunque uso Gmail, también tengo una cuenta de correo de Hotmail. Hoy vi que han sacado una versión del cliente web de correo mejor y más simplista. Es una mejora importante, carga mucho más rápido y es todo algo más accesible.
Yo aún lo he mejorado más, o eso creo haber echo. Veamos como en unas imágenes:
Antes
Haz clic para ampliar
Después
Haz clic para ampliar
Cambios realizados:
- He eliminado la publicidad
- He eliminado la caja de “búsqueda en web”
- He eliminado botones inútiles en el menú izquierdo (“Hoy”,”Calendario”,…)
- Re-colocación del perfil de usuario encima del menú izquierdo
- Coloreado de bordes y fondo de los menús
- Bordeado el menú de acciones superior de los emails
- Ocultación de la palabra “HOTMAIL” en negrita y de tamaño enorme
- En general se gana mucho más espacio
- Eliminada la imagen de publicidad del antivirus Trend, al recibir y enviar mensajes.
- Re-diseñada la cabecera de los email (Datos de envio) para facilitar su lectura.
- Resaltados con una caja azul los archivos adjuntos.
Detalle:
Haz clic para ampliar
Todo este rediseño, se ha programado en CSS, para Stylish. Stylish es una extensión de Firefox que permite hacer esto en las paginas web, y cambiar su aspecto cuando las visitas. (Yo lo uso mucho, tengo personalizadas muchas páginas que visito regularmente. Entre otras cosas sirve para poder ocultar contenidos como publicidad
) Si quieres poder tener este aspecto en tu correo Hotmail tienes que usar Stylish y añadir ese código.
Nota: Esto no sirve para el Internet Explorer. Internet Explorer apesta.
Este es el código:
@namespace url(http://www.w3.org/1999/xhtml);
/*
Descripción: Código de Rediseñado para la nueva versión de Hotmail
Autor: Pau de Anguera (Bleend)
URL: http://blog.bleend.net/windows-live-hotmail-redisenado-con-stylish-cleanup/
*/
@-moz-document domain("mail.live.com") {
.AdBannerContainer,.ProductNameContainer,.Bottom,#c_search,.AntiVirus,.ScanLogo{
display:none !important;
height:0px !important;
}
.EmailName{
text-align: center !important;
font-size: 0.9em !important;
}
#c_me{
z-index:100 !important;
position:absolute !important;
top:55px !important;
left:10px !important;
float:left !important;
height:50px !important;
width:180px !important;
background:#F3F7FD !important;
border:1px solid #BBD8FB !important;
}
#c_melink{
margin-top:6px !important;
float:right !important;
}
#c_is {
font-weight:bold !important;
}
#c_signout{
position:absolute !important;
margin-right:-33px !important;
margin-top: -3px !important;
}
#folderListContainer {
margin-top:5px !important;
}
#contentLeft {
width: 180px !important;
background:#F3F7FD !important;
margin-top:30px !important;
border:1px solid #BBD8FB !important;
}
#Middle{
left:10px !important;
}
#toolbarContainer{
border: 1px solid #A6D2FF !important;
border-bottom: none !important;
width:99.6% !important;
}
.NonThemedLinkContainer{
border: 1px solid #A6D2FF !important;
background:#F3F7FD !important;
}
.SenderSafetyMsg,.SenderSafetyLinks{
font-size:0.8em !important;
border-top-width: 1px !important;
border-right-width: 0px !important;
border-bottom-width: 1px !important;
border-left-width: 0px !important;
border-top-style: solid !important;
border-right-style: solid !important;
border-bottom-style: solid !important;
border-left-style: solid !important;
border-top-color: #CCC !important;
border-right-color: #CCC !important;
border-bottom-color: #CCC !important;
border-left-color: #CCC !important;
}
.SecondaryTextColor{
width:20% !important;
}
}
He de decir que no soy muy diestro en CSS, así que si el código no es muy limpio, pido mis disculpas; pero en mi defensa diré que funciona y estoy orgulloso de él.
Nota: Si alguien tiene algo que aportar, ideas, sugerencias o ha mejorado esta versión, agradecería que me lo dijeran
Licencia: Código bajo la Licencia Creative Commons “by-nc”.



