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.

Es por ello que hoy les presento 3 tecnicas para que puedan crear en su actual o futuro theme WordPress una sidebar única y darle a su proyecto un aire fresco en su diseño:

Crear un Dropdown Blogroll sin Javascript

Idea de Michael Martin, gran diseñador y blogger de Pro Blog Design, es un tecnica que usa CSS para crear un bello dropdown blogroll sin necesidad de JavaScript.

Posts Recientes con efecto Newsticker

Hace un tiempo escribí al menos 3 formas para mostrar posts recientes en WordPress con PHP, sin embargo si lo suyo es ser más dinámicos y lo estático les aburre desde PVM Garage, gran blog que vengo siguiendo hace un tiempo y que recomiendo, nos acercan un método que usa Jquery para crear un efecto newsticker e implementarlo a nuestros posts recientes, de modo que estos roten de abajo para arriba cada corto tiempo.

Mostrar y esconder Widgets con Jquery

Tiene un tiempo pero no por eso deja de ser asombroso; Austin de WPCult nos muestra como usar Jquery para esconder o mostrar los widgets de la sidebar a pedido de los visitante y un click de distancia, inperdible, yo ya estoy pensando en implementar algunas en Kernel Web.

Una caracteristica que ya es casi un estandar en los themes premium, pero que pasa si tú no tienes un theme de este tipo y quieres hacer lo mismo, a continuación la forma de insertar una Author Box en tu theme WordPress:

Creando la Author Box

Sinceramente tengo que decir que aquí varia de acuerdo a la versión de WordPress que uses, debido a las Template Tags que van añadiendo con cada actualización, si usas una versión vieja de WP (2.7 para abajo) esta es la forma de hacerlo:

<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '70' ); }?>
<div class="authortext">
<h4>Escrito por <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>
</div>

Si en cambio estas al dia con tu instalación, vamos, tienes instalada la versión 2.8 para arriba, puedes utilizar el código que yo uso, de esta forma:

<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '70' ); }?>
<div class=authortext">
<h4>Escrito por <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('display_name'); ?></a></h4>
<p><?php the_author_meta('description'); ?></p>
</div>
</div>

Veran que sólo cambian las Template Tags, pero si no usas el método de acuerdo a tu instalación esto hará que desaparezca parte de tu blog al cortarse la ejecución de código en tu template.

Estilizando la Caja de Autor con CSS

Bueno ya esta puesto el armazón vamos a ponerle una bonita fachada d esta forma, el CSS que pondré es el que yo uso con Renovatio, pero ustedes pueden modificarlo a sus necesidades:

/* Estilos CSS para su Caja de Autor */
#authorbox{ background: #EFEFEF; border: 1px solid #CECFD0; width: 560px; margin: 0 auto; margin: 10px 0 10px 0; overflow:hidden; min-height: 115px; height: auto !important; height: 115px; }
#authorbox h4{ font-size: 16px; color: #191919; margin:0; padding: 10px 10px 5px 10px; }
.authortext{ padding: 0 20px 0 100px; }
#authorbox img{ margin: 10px; padding: 0px; float: left; border: 5px solid #ccc; }
#authorbox p{ color: #191919; margin: 0; padding: 0px 10px 10px 10px; }
#authorbox p a { color: #191919; }

Listo eso es todo, no obstante si quieres algo más completo echale un vistazo a la  Author Meta Tag de WP, y puedes implementar más información mediante parrafos dandoles una clase y luego alinearlos con CSS o separando los datos mediante la etiqueta &nbsb, por cierto el demo del resultado de este tutorial pueden verlo abajo de este post.

Y aunque no me considero un experto en el tema, tengo unos cuantos consejos, técnicas y trucos CSS que he ido guardando a lo largo del tiempo, mismas que comparto a continuación:

Trabaja por secciones

Ejemplo aplicado al style.css de un theme WordPress, divide tu hoja en secciones: Estilos Globales o Generales, del Contenedor principal, Sidebar…

/* Global */
body { font: 14px/1.6 Arial, Helvetica, Verdana, sans-serif; }
/*Area de Contenido */
#wrap-post { width: 600 px;  float: left; }

CSS Shorthand, el mejor amigo de tu hoja estilos.

El principio básico del asunto según la W3C es que CSS esta compuesto por 2 cosas: un selector y una declaración y en cada declaración hay una propiedad y un valor, basandonos en esto los shorthands serían propiedades con valores condensados o comprimidos, ejemplo práctico:

/* Propiedad margin sin shorthand */

.elemento {
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 5px;
}

/* Propiedad margin usando shorthand */
.elemento { margin: 10px 5px 20px 10px; } 

Para entender mejor esto, les recomiendo leer la Guía del CSS Shorthand.

Agrupa selectores

Tienes 2 o más selectores y las mismas reglas, no escribas lo mismo 2 veces.

.bloque { background: #FFF; padding: 15px; margin-top: 10px; }
.articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Agrupalos de esta forma:

.bloque, .articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Menos espacio es igual a más rápido.

La optimización del CSS apunta a la compresion de éste, entre menos espacio hay entre tus selectores, más rápido cargará el navegador tu página. Por ende es mejor escribir las declaraciones como lo hice en el anterior ejemplo, sin espacios en blanco.

Espero que esta serie de tips te ayude a escribir hojas de estilo más optimizadas.

Comentarios Personalizados de Kernel Web

Si usas un theme diseñado para WordPress 2.7 esto es sumamente fácil, puesto que todo se hace con CSS usando algunas clases, tomaré de referencia las de este blog para mostrarlo de forma práctica:

ol.commentlist li.bypostauthor {  background: #D4EDFE; border: 3px solid #FFF;  }

Esto es si tenemos sólo un autor activo en nuestro blog, en caso de tener 2, 3 o más podemos recurrir a usar el siguiente tipo de estilo:

ol.commentlist li.comment-author-esteban-rojas { background:#333; border: 2px ridge #ff8800; }

ol.commentlist li.comment-author-tu-nombre-de-usuario { background: #333; border: 1px solid black; }

Esto para que cada autor tenga su propio estilo CSS a la hora que comente, el nombre de usuario vendría a ser el nombre que usamos para loguearnos en nuestro blog , si aún conservas el que  por defecto te asigna WordPress al instalarlo en tu server, el cual es admin, basta con asignar lo siguiente a tu hoja de estilos:

ol.commentlist li.comment-author-admin { Acá irian tus estilos }

Si en cambio usas una plantilla antigua, y por ende sin comentarios adaptados a WordPress 2.7, la forma de conseguir que tus comentarios resalten de entre los de tus lectores es la siguiente:

Abrimos nuestro comments.php y localizamos el siguiente código:

<?php foreach ($comments as $comment) : ?>

Y debajo añadimos lo siguiente:

<?php
   $isByAdmin = false;
   if($comment->comment_author_email == "tucorreo@demo.com"){
   $isByAdmin = true;
   };
?>

Esto no es más que una función condicional enfocada a verificar si el correo del comentarista es igual al correo del admin "tucorreo@demo.com" , por lo que tendrán que cambiar este último por el suyo y debajo añadir lo siguiente :

<li class="<?php if ($isByAdmin) echo 'admin-comment'; else echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Que indica que si el correo coincide con el que pusieron se formatee ese comentario con la clase que establezcan, en este caso: admin-comment. Luego de esto bastara con ir al archivo style.css de nuestro theme y establecer los estilos CSS para la clase, generalmente tienen esta forma:

.commentlist li.admin-comment { background: #D4EDFE; border: 3px solid #FFF; }

Si su bitácora tiene 2 o más administradores bastará con añadir una sentencia elseif o las que sean necesarias, puesto que estas se ejecutan en orden al devolver un valor cierto o falso, para 2 admins o autores quedaria así:

<?php
        $isByAuthor = false;
        $isByAdmin = false;
        if($comment->comment_author_email == "correoadmin1@demo.com"){
            $isByAdmin = true;
        } elseif($comment->comment_author_email == "correoadmin2@demo.com"){
            $isByAuthor = true;
        };
        ?>

Se añadiria la clase: author-comment al CSS y abajo del código anterior se colocaria:

<li class="<?php if ($isByAdmin) echo 'admin-comment'; elseif ($isByAuthor) echo 'author-comment';
else echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Para ello basta con introducir tu hoja de estilos y CSS Fixer se encargará de sugerirte algunas propiedades, comentarios o hacks a insertar en tu archivo CSS para que tu blog o página se miré bien en la aberración exploradora 6 una cosa que siempre es difícil de lograr.

Aunque según leo en Código Geek, tal parece que los chicos de Redmond ya se hartaron de esta versión del Explorer y planean mandarlo al olvido con una actualización dentro de poco, esperemos que los usurios también se pongan las pilas y hagan que por fin este browser desaparezca.

Pero mientras eso pasa, esta herramienta es una gran opción para los que tenemos que lidiar con este navegador.

Enlace | IE6 CSS Fixer