[Tutoriales] Personalizar comentarios 100% mío

Holiii!!! Hoy os traigo un tutorial sobre cómo personalizar los comentarios y poner como la foto de arriba. El tutorial es 100% mío, ya que lo que hice fue ponerme a probar cosas con la opción de inspeccionar elemento, y luego poniéndolas en la plantilla. Bueno. Empecemos con el tutorial:



Lo primero es ir a Plantilla>Editar HTML y buscar (ctrl+F):

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

Si no os sale así, borrad los guiones.

Borra todo lo haya debajo hasta el siguiente apartado, y copia el siguiente código:

.comments .comments-content .loadmore a {
  border-top: 1px solid #f5f5f5; /*Borde*/
  border-bottom: 1px solid #f5f5f5; /*Borde*/
}
.comments .continue {
  border-top: 2px solid #ffc2c2;  /*Borde*/
}
.comments .comments-content .comment:last-child {
border-bottom: 0;
padding-bottom: 0;
padding: 20px;
background: #f5f5f5; /*Fondo*/
border-radius: 20px; /*Bordes redondeados*/
}
.comments .comments-content .comment-replies {
margin-left: 36px;
margin-top: 1em;
border-radius: 20px; /*Bordes redondeados*/
border: 2px dashed #ffc2c2;  /*Borde*/
}
.comments .comment-block {
margin-left: 48px;
position: relative;
background: url('URL_DEL_FONDO'); /*Fondo*/
padding: 10px;
border-radius: 20px; /*Bordes redondeados*/
border:2px solid #FF8C8C;  /*Borde*/
}
.comments .avatar-image-container {
float: left;
max-height: 36px;
overflow: hidden;
width: 36px;
background: #ffc3c3; /*Fondo*/
border-radius: 50%; /*Bordes redondeados*/
border: 3px solid #FE9292;  /*Borde*/
margin-left: -2px;
}
.comments .avatar-image-container img {
max-width: 36px;
border-radius: 50%; /*Bordes redondeados*/
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.comments .avatar-image-container img:hover {
-webkit-transform:rotate(360deg);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizpJz7_zi6UiyDe8beNYFov3pJU417qYSgvoh2VucP4CDaWl7NC0l68EG3BFBa-ILVuN0NzhW4Fz9NqdtL9LbW-2IrK3cpwMMUSFQolwMP0B7EtInYQsitUe_Vekk8b6hbhoCYEdaNKvD4/s1600/Cursors+Kawaii+By%253B+MinnieKAWAII+%252822%2529.gif);
background-size: 100%;
}
.comments .comment .comment-actions a {
background: #f5f5f5; /*Fondo*/
padding: 5px;
border-radius: 20px; /*Bordes redondeados*/
margin:5px;
box-shadow: inset 0 0 8px #989898; /*Sombra*/
}
.comments .comments-content .datetime {
float: right;
}
#comment-post-message {
margin-top:10px;
}
.comments .comments-content .comment-content {
text-align: justify;
background: #fff; /*Fondo*/
padding: 10px;
margin: 20px;
box-shadow: 0 0 5px; /*Sombra*/
border-radius: 10px; /*Bordes redondeados*/
}
.comments .comments-content .comment-header {
margin: 0 0 8px;
background: #FE9292; /*Fondo*/
padding: 10px;
margin-top: -10px;
margin-left: -10px;
border-top-left-radius: 15px; /*Bordes redondeados*/
border-top-right-radius: 15px; /*Bordes redondeados*/
width: 100%;
}
.user a:link {
color: #fff !important; /*Color de la letra*/
}
.comments .comment .comment-actions a:hover {
background: #FDB1B1; /*Fondo*/
box-shadow: inset 0 0 10px #FA3131, 0 0 10px;
color: rgb(169, 5, 5); /*Sombra*/
}

Y eso es todo, luego solo tenéis que ir probando a cambiar los colores, a lo mejor quitarle los bordes redondeados, etc.

Si tenéis alguna duda o problema no dudéis en preguntármelo. Beshus y hasta mañana!!