Dar estilo a tus Comentarios Wordpress

Publicado por Nikko el dia 8 Jul 2008 - Guardado en 676 Views php, CSS, WordPress, Tutoriales, Diseño Web 676 Views

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:

PLAIN TEXT

PHP:

<ol class="commentlist">
<?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

PLAIN TEXT

CSS:

ol.commentlist {
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

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!

Personalizar los estilos a tus Comentarios en Wordpress — Simplemente… Nebel

8 - 07 - 2008


[...] blog serán muy especiales :P… Y bueno leyendo Xyberneticos pues encontré con este entrada Dar estilo a tus Comentarios Wordpress yo hace meses que queria saber como hacerlo pero no se me ocurria nada!!!… Y Si piensas [...]
Personalizar los estilos a tus Comentarios en Wordpress | Simplemente... Nebel

8 - 07 - 2008


[...] Vía: Xyberneticos [...]
Gerar2

8 - 07 - 2008


Master!
Despues de tanto buscar y buscar, por fin encontré esta info!

Gracias loko!

Saludos desde Argentina
Illi.Pro

8 - 07 - 2008


Siempre en xyberneticos encuentro los mejores tips de diseño para mi blog, gracias Nikko
Marcelo

8 - 07 - 2008


Se que aquí saben muchod e wordpress, alguin me podría decir porque tengo mi wordpress sin estilo. no me toma la hoja de estilo supongo... pero si alguin le ha pasado lo mismo o tiene alguna sugerencia se lo agaradeceria....

Saludos
Enlaces Dominicales XXII | Trazos Web

8 - 07 - 2008


[...] Dar estilo a tus Comentarios Wordpress. [Xyberneticos] [...]
roy

8 - 07 - 2008


hi there, i would like to ask for some little help setting this up.
I can't seem to make it work
Can you please help me out with it?

thanks,
Roy
Blogueando en Internet: Semana cincuenta y siete » Blogueando con Francesc Josep

8 - 07 - 2008


[...] Dar estilo a tus Comentarios Wordpress [...]
Diego-kun

8 - 07 - 2008


Todavia no comprendo esto...podrias hacer un tutorial mas detallado?

Xyberneticos

Dar estilo a tus Comentarios Wordpress