Tutorial: Personalizar comentarios

¡Hola tomodachis! ¿Qué tal, como andan? Yo muy bien :3 Hoy es un día húmedo y caluroso en mi provincia, en algunos lugares llueve y en otros todavía no... Y bueno yo aquí aburrida en mi habitación junto a my baby [mi gatito] mientras lo acaricio owo. 

Okkk, a lo que venía, les traigo un tutorial n.n

Editar los comentarios a tu gusto

Yo antes les había dado los tutoriales de:

Emoticones en los comentarios / Como ponerle una imagen a los comentarios anónimos

Y ahora vamos a la personalización de los comentarios

Te va a quedar algo así:

Solo que con los colores y el estilo que te guste a vos :3

Es super fácil, nos vamos a

Plantilla-Editar HTML-Ctrl+F y buscas

]]></b:skin>

Y arriba de ]]></b:skin> pegas este código:

/* Caja del comentario */

.comment-content{

background:#fff ;

padding:13px;

border-radius:10px;

color:#999; }

/* Titulo "No hay comentarios/nro Cometarios" */

h4{

border-radius: 10px;

background:#FFC9D9;

text-align:center;

color:#fff;

text-shadow: 0px 0px 3px #fff;

}

/* Nombre del usuario */

.user {

background: #fff;

padding: 7px;

margin-left: 10px;

border-radius: 10px 10px 0 0;

}

.icon {

background: transparent;

}

/* Caja de color */

.comment-block{

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUM9G56CYTinQKxi1jrttTkpuUzMZV-ilu2bMdjZXu2y2M9n1nqv-Di9UMxgjUFH4t7y6BEBTI75oJw-2X9rLhtlXbQeYhldLWvGAODSK3BrtmjMb1dW51hn1suYeJBqXyhyAZt2HAa78B/s400/cute+fondo+%252814%2529.png); 

padding:10px;

border: 1px dashed #fff;

border-radius: 15px 15px 15px 15px;

}

/* Links de la caja de color */

.comment-block a{

font-weight: normal;

}

/* Contorno de los avatares */

.avatar-image-container{

background:#FFC9D9;

padding:5px;

border-radius:50% 50% 0% 50%;

}

/* Avatares de comentarios */

.avatar-image-container img{

-webkit-transition: all 0.8s ease-out;

-moz-transition: all 0.8s ease-out;

transition: all 0.8s ease-out;

border-radius:50%;

}

/* Avatares de comentarios "HOVER" */

.avatar-image-container img:hover{

border-radius:50%;

transform: rotate(360deg) ;

-webkit-transform: rotate(360deg) ;

-moz-transform: rotate(360deg) ;

-o-transform: rotate(360deg) ;

-ms-transform: rotate(360deg) ;

}

/* Links Fecha/Responder/Eliminar */

.secondary-text a{

color: #fff;

padding: 3px;

background:#FFC9D9;

float: center;

border-radius:5px;

text-shadow: none;

}

Celeste: Los colores, puedes elegirlos en Colores HTML 

Rojo: Link de la imágen de fondo

Verde: Medidas

Azul: Borde redondeado [puedes cambiar a solid y estará cuadrado]

Tutoriales relacionados:
Emoticones en los comentarios / Como ponerle una imagen a los comentarios anónimos