Como editar la caja de comentarios

Hola a todos mis queridos angelitos.. ¿como están? Hoy les traigo un pequeño tutorial a petición de SDLN..
Como ya habran visto se trata de como personalizar los comentarios en el blog..

Pueden ver un vista previa en los comentarios de mi blog de pruebas
Bueno en fin.. comencemos con el tutorial:

Paso1:

Para que este tutorial funcione deben asegurarse de que no pegaron ningun código para personalizar los comentarios antes, y si lo hicieron deben borrarlo antes de comenzar..


Ahora que se aseguraron de eso, deben ir a Plantilla | Editar HTML y pegar arriba de ]]></b:skin> el siguiente código

.comments .comments-content .icon.blog-author {background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);}

/* -- Fuente y tamaño del texto de los comentarios -- */

.comments {font-family: 'Arial'; line-height: 14px; font-size: 12px;}

/* -- Estilos de la cajita contenedora de los avatares -- */

.avatar-image-container {background: url('http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png');padding: 5px;border:2px solid #FFDDB0;}

/* -- Estilo de la caja de los comentarios -- */

.comment-block {border: 8px solid #CDBB93; border-radius: 8px; background: #fff; color: #666; box-shadow: inset 0 0 50px #FFDDB0, 0 0 3px #FFDDB0; border-image: url('http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png') 30 30 round; right: -15px; position: relative;

}

/* -- Estilo de los links responder o elmiminar el comentario -- */

.comments .comment .comment-actions a,.comments .comment .continue a {display: inline-block; margin: 0 0 5px 5px; padding: 0 2px; text-align: center; text-decoration: none; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); color: #9CD1C9; border: 2px solid #bbb; border-radius: 2px; height: 20px; line-height: 20px; font-weight: normal; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white; text-decoration:none;}

/* -- Color y tamaño de la fecha de los comentarios -- */

.comments .comments-content .datetime a {color:#9CD1C9; font-size:12px; float:right; text-decoration:none;}

.comment-content {margin:0 0 8px; padding:0 5px;}

/* -- Estilo de la cabecera donde va el nombre del que comenta -- */

.comment-header {font-size:18px; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white; border-bottom:2px solid #bbb; padding:5px;}

.comments .comments-content .user a {color:#9CD1C9; font-weight:normal; text-decoration:none;}

/* -- Color del link del nombre del que comenta -- */

.comment-header a {color: #335650; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;}

/* -- Oculta el lapicito en los comentarios del autor del blog -- */

.comments .comments-content .icon.blog-author{width:0px; height:0px; display:inline-block;}

.comments .comments-content .owner-actions {position:absolute; right:0; top:0;}

/* -- Estilo en el link mas respuestas de un comentario -- */

.comments .thread-toggle {margin: 0 0 10px 5px; padding: 0 5px; text-align: center; text-decoration: none; display: inline-block; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); color: #9CD1C9; border: 2px solid #FFDDB0; border-radius: 2px;font-weight: normal;}

/* -- Aca no hay nada que editar -- */

.comments .thread-toggle .thread-arrow {display:inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px;}

.comments .thread-expanded .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc

AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}

.comments .thread-collapsed .thread-arrow{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Paso2:

Una vez que lo pegaron guardan y se fijan si es que se coloco correctamente el código.. traten de pegarlo entero sin que les falte ningún pedacito o lucirá mal.

Les tiene que quedar asi:

Paso3:

Editan a su gusto, coloque etiquetas que indican que cambia que en el código para que les sea mas fácil la edición.. si editan en los lugares donde dice color, border o background ya van a personalizar casi todo, traten de no tocar donde dice margin o padding asi no se les mueve de lugar nada.. :)

Espero y les sea de ayuda el tutorial! - cualquier duda envienmela a sol.pourcel@gmail.com