Como estilizar os comentários de resposta no seu blog WordPress 2.7

Uma das maiores vantagens do novo WordPress 2.7 é a possibilidade de ter comentários em resposta a comentários, até um máximo de 10 níveis. Se por ventura navegar por um blog em WordPress irá reparar que por vezes aparece-lhe a opção ‘Responder’ dentro da caixa do comentário emitido pelo outro utilizador, o que significa que é possível você responder directamente a esse utilizador mantendo os diálogos organizados e contextualizados.

O blogueiro cdharrison recentemente mexou na estrutura do WordPress para estilizar os comentários de resposta do seu blog, e o resultado final é no mínimo interessante. Harrison tirou partido destas novas funcionalidades copiando o ficheiro para o seu próprio template. O ficheiro original utilizado foi o ol.commentlist e a sua estrutura base é a seguinte:

ol.commentlist {}  

ol.commentlist li {}  

ol.commentlist li.alt {}  

ol.commentlist li.bypostauthor {}  

ol.commentlist li.byuser {}  

ol.commentlist li.comment-author-admin {}  

ol.commentlist li.comment {}  

ol.commentlist li.comment div.comment-author {}  

ol.commentlist li.comment div.vcard {}  

ol.commentlist li.comment div.vcard cite.fn {}  

ol.commentlist li.comment div.vcard cite.fn a.url {}  

ol.commentlist li.comment div.vcard img.avatar {}  

ol.commentlist li.comment div.vcard img.avatar-32 {}  

ol.commentlist li.comment div.vcard img.photo {}  

ol.commentlist li.comment div.vcard span.says {}  

ol.commentlist li.comment div.commentmetadata {}  

ol.commentlist li.comment div.comment-meta {}  

ol.commentlist li.comment div.comment-meta a {}  

ol.commentlist li.comment * {} – (p, em, strong, blockquote, ul, ol, etc.)  

ol.commentlist li.comment div.reply {}  

ol.commentlist li.comment div.reply a {}  

ol.commentlist li.comment ul.children {}  

ol.commentlist li.comment ul.children li {}  

ol.commentlist li.comment ul.children li.alt {}  

ol.commentlist li.comment ul.children li.bypostauthor {}  

ol.commentlist li.comment ul.children li.byuser {}  

ol.commentlist li.comment ul.children li.comment {}  

ol.commentlist li.comment ul.children li.comment-author-admin {}  

ol.commentlist li.comment ul.children li.depth-2 {}  

ol.commentlist li.comment ul.children li.depth-3 {}  

ol.commentlist li.comment ul.children li.depth-4 {}  

ol.commentlist li.comment ul.children li.depth-5 {}  

ol.commentlist li.comment ul.children li.odd {}  

ol.commentlist li.even {}  

ol.commentlist li.odd {}  

ol.commentlist li.parent {}  

ol.commentlist li.pingback {}  

ol.commentlist li.pingback div.comment-author {}  

ol.commentlist li.pingback div.vcard {}  

ol.commentlist li.pingback div.vcard cite.fn {}  

ol.commentlist li.pingback div.vcard cite.fn a.url {}  

ol.commentlist li.pingback div.vcard span.says {}  

ol.commentlist li.pingback div.commentmetadata {}  

ol.commentlist li.pingback div.comment-meta {}  

ol.commentlist li.pingback div.comment-meta a {}  

ol.commentlist li.pingback * {} – (p, em, strong, blockquote, ul, ol, etc.)  

ol.commentlist li.pingback div.reply {}  

ol.commentlist li.pingback div.reply a {}  

ol.commentlist li.pingback ul.children {}  

ol.commentlist li.pingback ul.children li {}  

ol.commentlist li.pingback ul.children li.alt {}  

ol.commentlist li.pingback ul.children li.bypostauthor {}  

ol.commentlist li.pingback ul.children li.byuser {}  

ol.commentlist li.pingback ul.children li.comment {}  

ol.commentlist li.pingback ul.children li.comment-author-admin {}  

ol.commentlist li.pingback ul.children li.depth-2 {}  

ol.commentlist li.pingback ul.children li.depth-3 {}  

ol.commentlist li.pingback ul.children li.depth-4 {}  

ol.commentlist li.pingback ul.children li.depth-5 {}  

ol.commentlist li.pingback ul.children li.odd {}  

ol.commentlist li.thread-alt {}  

ol.commentlist li.thread-even {}  

ol.commentlist li.thread-odd {} 

De seguida harrison resolveu estilizar um pouco o ficheiro incluindo algumas regras de CSS. O ficheiro original modificado por harrison é o seguinte:

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }  

ol.commentlist li { }  

ol.commentlist li.alt { }  

ol.commentlist li.bypostauthor {}  

ol.commentlist li.byuser {}  

ol.commentlist li.comment-author-admin {}  

ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }  

ol.commentlist li div.comment-author {}  

ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }  

ol.commentlist li div.vcard cite.fn { font-style:normal; }  

ol.commentlist li div.vcard cite.fn a.url {}  

ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }  

ol.commentlist li div.vcard img.avatar-32 {}  

ol.commentlist li div.vcard img.photo {}  

ol.commentlist li div.vcard span.says {}  

ol.commentlist li div.commentmetadata {}  

ol.commentlist li div.comment-meta { font-size:9px; }  

ol.commentlist li div.comment-meta a { color:#ccc; }  

ol.commentlist li p { font-size:11px; margin:0 0 1em; }  

ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }  

ol.commentlist li div.reply { font-size:11px; }  

ol.commentlist li div.reply a { font-weight:bold; }  

ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }  

ol.commentlist li ul.children li {}  

ol.commentlist li ul.children li.alt {}  

ol.commentlist li ul.children li.bypostauthor {}  

ol.commentlist li ul.children li.byuser {}  

ol.commentlist li ul.children li.comment {}  

ol.commentlist li ul.children li.comment-author-admin {}  

ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }  

ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }  

ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }  

ol.commentlist li ul.children li.depth-5 {}  

ol.commentlist li ul.children li.odd {}  

ol.commentlist li.even { background:#fff; }  

ol.commentlist li.odd { background:#f6f6f6; }  

ol.commentlist li.parent { border-left:5px solid #111; }  

ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }  

ol.commentlist li.thread-alt { }  

ol.commentlist li.thread-even {}  

ol.commentlist li.thread-odd {} 

O resultado final é o seguinte: