Dar estilo a tus Comentarios WordPress
Si piensas rediseñar por completo tu blog, no estaría nada mal, dedicar tiempo a elaborar cosas creativas para los comentarios de tu blog. Partiendo de esa idea, encuentro en darrenhoyt, algunos prácticos ejemplos que podrás utilizar como base, donde se incluyen inclusive ejemplos de códigos y la posibilidad de los PSD originales.
Ampliar info y mas ejemplos Styling Your WordPress Comments
Lo primero será, editar tu archivo "comments.php" de tu theme wp:
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<div class="commenttext">
<cite><?php comment_author_link() ?></cite>
<?php comment_text() ?>
<span class="date"><img src="/images/commentlink.gif" alt="" /> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_time() ?> on <?php comment_date('n/j/y') ?></a></span> <?php edit_comment_link('edit',' ',''); ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';?>
<?php endforeach; /* end for each comment */ ?>
</ol>
Un poco de estilo
margin:0;
padding:0;
}
.commentlist li {
margin-bottom:8px;
background: #60360b url(http://www.yoursite.com/images/comment_arrows.gif) bottom no-repeat;
color:#FFF;
list-style:none;
width:413px;
}
.commentlist .commenttext {
background:url(http://www.yoursite.com/images/bg_paint.gif) no-repeat;
padding:22px 22px 50px 22px;
}
.commentlist cite {
display:block;
color:#FFF;
font-weight:bold;
text-transform:uppercase;
font-style:normal;
background:url(http://www.yoursite.com/images/bg_cite_arrows.gif) bottom repeat-x;
padding-bottom:12px;
font-size:1.1em;
}
.commentlist a:link, .commentlist a:visited {
color:#fff9b9;
}
.commentlist a:hover, .commentlist a:active {
color:#FFF;
}
.commentlist .date {
background:#930e27;
padding:3px;
}
li.alt {
background:#836241 url(http://www.yoursite.com/images/comment_arrows_alt.gif) bottom no-repeat;
}
li.alt .commenttext {
background:url(http://www.yoursite.com/images/bg_paint_alt.gif) no-repeat;
}
li.alt .date {
background:#67421c;
padding:3px;
}
Descarga PSD original para este ejemplo - Ampliar info y mas ejemplos Styling Your WordPress Comments
