Comentarios al estilo de Windows 8

La llegada de Windows 8 realmente nos sorprendió a todos. A mí en especial me atrajo mucho el diseño de esta nueva plataforma. Nos enseña una nueva manera de utilizar los colores en recuadros, sin necesidad de tantos degradados, imágenes y texto muy llamativo.
Y como llevar este diseño al CSS no es tan complicado, me tomé tiempo para personalizar los comentarios de Blogger a la manera del nuevo Windows. Lo logré basándome en capturas de Windows 8 y el código fuente que podemos encontrar inspeccionando el messenger de Outlook.

La mensajería en Windows 8.

El messenger de Outlook.

Puedes ver en este blog de pruebas cómo quedarán los comentarios.
Lo que hice fue lo siguiente:

• Agrandar los avatares y colocar un borde izquierdo.
• Aplicar el fondo a los bloques de los comentarios, y una pequeña pestaña para que parezca un globo de diálogo.
• En las respuestas impares, cambiamos la posición de los avatares hacia la derecha para dar la idea de un diálogo entre quien realizó la pregunta y quien la respondió. Además, tal cual lo dice Windows, aclaramos el fondo y oscurecemos el texto.
• Cambiar los enlaces de "Responder" y "Suprimir" por iconos.
• Creo que es todo.

Demo

Para comenzar debemos borrar todos los estilos predeterminados para los comentarios de las plantillas de Blogger. Si utilizas una platilla original de Blogger debes buscar la acotación

/* Comments
----------------------------------------------- */

entre los estilos y borrar todo el contenido hasta la siguiente acotación.

Ahora podemos comenzar a personalizar. Prefiero hacerlo a pasos para que entiendas lo que vamos haciendo.

Primero aplicamos una muy útil propiedad llamada box-sizing a todo (sí, todo), utilizando el selector universal.

.comments, .comments * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
/* Lo siguiente adapta el ancho de los comentarios, cámbialo si lo necesitas */
.comments .comments-content .comment {
float: left;
width: 100%;
}

Continuemos con los avatares.

.comments .avatar-image-container {
/* El alto y el ancho */
min-height: 50px;
width: 50px;

border: 0;

/* El borde izquierdo, puedes cambiar el color */
box-shadow: -3px 0 0 #6ec419;

margin:0!important
}

.comments .avatar-image-container img {
/* Repetimos el ancho y alto */
max-width: 50px;
height: 50px;

border:0!important;
}

Ahora la mordida del comentario individual.

.comments .comment-block {
/* El margen del comentario impar */
margin-left: 70px;
position: relative;
}

.comments .comment-replies .comment .comment-block:before, .comments .comment .comment-block .comment-header:before {
border-width: 6px;
position: absolute;
border-style: solid;
height: 0;
width: 0;
top: 15px;
content: "";
}

.comments .comment-replies .comment:nth-child(even) .comment-block:before, .comments .comment .comment-block .comment-header:before {
left: -12px;

/* Color de la mordida de los comentarios impares */
border-color: #71AA00 #71AA00 transparent transparent;
}


.comments .comment-replies .comment:nth-child(odd) .comment-block:before {
right: -12px;

/* Color de la mordida de los comentarios pares */
border-color: #9BE900 transparent transparent #9BE900;
}

Personalicemos la cabecera de los comentarios y el contenido.

.comment-header, .comment-content {

/* Fondo del comentario individual impar */
background: #71AA00;

/* Color del texto del comentario individual impar */
color: white;

margin: 0!important;
}

.comment-header {
padding: 8px 15px;
}

.comment-header .user a {

/* Color del enlace al perfil del usuario del comentario individual impar */
color: rgba(255,255,255,.9)!important;

/* Tamaño del enlace al perfil del usuario del comentario individual impar */
font-size: 13px;
}

.comment-content {
padding: 0px 15px 30px
}

Coloquemos la fecha y hora del comentario debajo del contenido.

.comments .comments-content .datetime {
margin-left: 6px;
position: absolute;
bottom: 8px;
left: 10px;
}

.comments .comments-content .datetime a {
/* Color de la fecha */
color: rgba(255,255,255,.6);
}

Algunos estilos para las respuestas.

.comments .comment-replies {
margin: 0!important;
width: 80%;
float: right;
}

.comments .comment-thread.inline-thread {
margin: 0!important;
padding: 0!important;
}

.comments .comment-replies .comment .comment-block {
width:70%;
}

.comments .comment-replies .comment:nth-child(odd) .comment-block {
margin-left: 70px!important;
}


.comments .comment-replies .comment .comment-block .comment-header:before {
display:none!important
}

.comments .comment-replies .comment:nth-child(odd) .avatar-image-container {
float:right!important;
}

.comments .comment-replies .comment:nth-child(odd) .comment-header .user a {
/* Color del enlace al perfil del usuario en las respuestas impares */
color:rgba(0,0,0,.9)!important
}

.comments .comment-replies .comment:nth-child(odd) .datetime a {
/* Color de la fecha del comentario en las respuestas impares */
color: rgba(0,0,0,.6)!important;
}

.comments .comment-replies .comment:nth-child(odd) .comment-header, .comments .comment-replies .comment:nth-child(odd) .comment-content {
/* Color del fondo de las respuestas impares */
background: #9BE900!important;

/* Color del texto en las respuestas impares */
color: #000!important;
}

Cambiemos los enlaces de "Responder y suprimir" por iconos, que aparecerán al pasar el cursor por el comentario.

.comment-actions {
display: block;
position: absolute;
right: 6px;
top: 6px;
opacity:0;
-ms-opacity:0;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
}

.comments .comment-block:hover .comment-actions {
opacity:.9;
-ms-opacity:.9;
}

.comments .comment .comment-actions a {
padding-right: 5px;
padding-top: 5px;
display: inline-block;
width: 25px;
height: 25px;
text-indent: -999px;
background: url(http://1.bp.blogspot.com/-hyaIc5d-QZU/UNMl4CQk33I/AAAAAAAABi4/heRp7d-ejhQ/s50/botones+comentarios+w8.png);
}

.comments .comment .comment-actions .blog-admin a {
background-position:-75px 0;
margin-left:3px;
}


.comments .comment-replies .comment:nth-child(odd) .comment-actions .blog-admin a {
background-position:-75px -75px!important;
}


.comments .thread-toggle {
margin-top: 5px;
}

Con eso terminé yo, pero seguramente algún boton, enlace o palabrita quedará aburrida sin estilos, por lo que deberás tomarte la molestia de agregar el CSS que creas necesario para dejarlo a la par con los comentarios.

Como habrás notado, el proceso no es tan difícil, y desde ahora tú podrás personalizar los comentarios a tu gusto y también que combine con la temática de tu blog.