En el post anterior ya vimos como crear y entender la estructura básica del comments.php; y si bien ya tenemos la armazón de nuestros comentarios, por sí sola no es nada amigable, por lo que en este artículo procederemos a darle estilo con CSS.
Para ello primero, basado en los estilos CSS de Chris Harrison, procederé a explicar cada una de las clases CSS de los nuevos comentarios de WordPress, para que tengan una noción básica de que hace cada uno.
ol.commentlist {} /* Estilos para la lista de comentarios */
ol.commentlist li {} /* CSS para cada elemento individual de la lista de comentarios */
ol.commentlist li.alt {} /* Alterna estilo de los elementos de lista */
ol.commentlist li.bypostauthor {} /* CSS para el comentario hecho por el autor de un post */
ol.commentlist li.byuser {} /* Estilos para cuando comenta un usuario registrado */
ol.commentlist li.comment {} /* Elementos individuales, el comentario en sí */
ol.commentlist li.comment div.vcard {} /* DIV que agrupa el avatar, nick y URL de cada comentario */
ol.commentlist li.comment div.vcard cite.fn {} /* Nombre del comentarista cuando este no deja URL */
ol.commentlist li.comment div.vcard cite.fn a.url {} /* Aplica cuando el comentarista deja la dirección de un sitio web */
ol.commentlist li.comment div.vcard img.avatar {} /* Para el avatar que se muestra en cada comentario */
ol.commentlist li.comment div.vcard span.says {} /* Da estilo a la frase "says" ó "dijo" en los comentarios */
ol.commentlist li.comment div.commentmetadata {} /* DIV donde se muestra la hora y fecha en la que se realizó la opinión */
ol.commentlist li.comment div.comment-meta {} /* Fecha del comentario */
ol.commentlist li.comment div.comment-meta a {} /* Lo mismo que arriba pero aplica si se muestra como enlace */
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.) /* Listas, blockquotes y más en los comentarios */
ol.commentlist li.comment div.reply {} /* DIV del botón de respuesta a un comentarios especifico */
ol.commentlist li.comment div.reply a {} /* Estiliza los enlaces dentro del DIV Reply */
ol.commentlist li.comment ul.children {} /* Define la posición y otras cosas de la lista de comentarios anidados */
ol.commentlist li.comment ul.children li {} /* Para cada elemento de la lista de Child Comments */
ol.commentlist li.comment ul.children li.depth-2 {} /* Para cada nivel de anidación de comentarios */
ol.commentlist li.comment ul.children li.depth-3 {} /* Idem a arriba, tan sólo cambia el número */
ol.commentlist li.even {} /* Establece valores de las propiedades CSS de los comentarios pares */
ol.commentlist li.odd {} /* Establece valores de las propiedades CSS de los comentarios inpares */
ol.commentlist li.parent {} /* Comentario padre de los Child Comments */
ol.commentlist li.pingback {} /* Estilo para elementos con trackbacks ó pingbacks */
Ok ya tenemos orientación, de igual forma faltan estilos para Pingbacks, no lo explico todo porque sería muy largo el post, pero siempre podrán consultar el enlace de arriba y tomar referencia de lo que ya tenemos.
No obstante la teoría no es nada si no hay un ejemplo práctico.
Por lo que este es el CSS que utilizaremos para darle una fachada vistoza a nuestra armazón lograda previamente, los estilos están probados para llegar a los 6 niveles de anidación sin problema, además de ser crossbrowser… y claro que pueden modificarlos 
a su conveniencia.
div#respond { margin: 20px 0 10px 0; background: #F7F7F7; border: 1px solid #CCC; padding: 10px 10px; overflow: hidden; }
div#respond textarea { background: #FFF; width: 90%!important; height: 75px; padding: 7px; color: #464646; font-family: arial; font-size: 14px; border: 1px solid #CCC; }
div.allowed-tags { width: 90%!important; font-style: italic; background: #F9F9F9; padding: 7px; font-size: 0.75em; }
div.navigation { clear: both; overflow: hidden; margin-bottom: 15px; }
p#comment-notes { padding-right: 20px; }
div.navigation a { color: #5190CE; }
div.navigation a:hover { color: #464646; }
div.navigation .alignleft { float: left; width: 50%; }
div.navigation .alignright { float: right; text-align: right; width: 50%;}
div.cancel-comment-reply { margin: 10px 0 10px 0; text-transform: capitalize;}
ol.commentlist { font-size: 1.1em; list-style:none; text-indent:0; margin:0 0 0em; padding:0; text-indent:0; }
ol.commentlist li { margin: 12px 0; background : #FFF url('images/comment_white_bg.png') repeat-x bottom; border: 1px solid #ddd; color: #B3B3B3; }
ol.commentlist li.comment { border: 1px solid #dfdfdf; background: #FDFDFD; padding: 1em; }
ol.commentlist li div.vcard cite.fn a.url { text-decoration: none; }
ol.commentlist li div.vcard img.avatar { border: 2px solid #ccc; width: 54px; height: 54px; float:left; padding: 5px; background: #fff; margin-right: 12px; }
ol.commentlist li div.comment-meta a { color: #8c8c8c; text-decoration: none;}
ol.commentlist li div.comment-meta a:hover { text-decoration: underline; }
ol.commentlist li div.vcard cite.fn a.url:hover { }
ol.commentlist li p { color: #606060; clear:both; margin: 10px 0; text-align: justify; }
ol.commentlist li ul { list-style:square; margin: 0 0 1em 2em; }
ol.commentlist li div.reply { text-align: right; margin: 5px; }
ol.commentlist li div.reply a { font-size: 0.815em; background: #609d1e; color: #f9f9f9; padding: 3px 7px; text-decoration: none; text-transform: capitalize; }
ol.commentlist li div.reply a:hover { background: #464646; color: #f8f8f8; padding: 4px 7px; text-decoration: none; }
ol.commentlist li ul.children { list-style: none; margin: 1em 0 0; text-indent:0; }
ol.commentlist li ul.children li.depth-2 { background: #f3f3f3; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-3 { background: #eeeeed; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-4 { background: #e4e4e4; border: 1px solid #d4d4d4; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-5 { background: #f3f3f3; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-6 { background: #eeeeed; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
Si se me pasó algo no duden en aclararmelo, en el siguiente post de la serie veremos como realizar unos cuantos trucos para mejorar la interactividad del usuario.
También te puede interesar:
Escrito por Esteban Rojas
Blogger radicado en México, fundador de Kernel Web, autodidacta, fanático de WordPress, por el momento estudiando el bachillerato, luego ya veremos.
Un comentario oftopic. Llevo meses tratando de numerar los comentarios anidados. Antes de que fueran anidados, numerarlos era muy fácil, pero ahora no lo he conseguido.
Tu que eres un experto en WordPress conoces una forma de hacerlo?
Saludos!
Este comentario es para probar si esta anidado
Hola Edinson
es algo complicado para hacerlo con código al pelo, sobretodo por la paginación y la compatibilidad con la separación de comentarios y trackbacks que esta de moda.
Pero eso no quiere decir que no halla una solución, si queres la numeración tu respuesta es un plugin:
http://wordpress.org/extend/plugins/gregs-threaded-comment-numbering/installation/
No obstante ahora que me metiste la duda voy a buscar e intentar hacerlo con código puro, pero lo veo difícil por lo que dijé primero.
Saludos y espero te sirva mi respuesta.
Quisiera saber si los comentarios que estan en espera de moderación se les puede aplicar un estilo propio xd…