Personalizar Disqus con CSS

He visto muchos blogs en los que se utiliza Disqus como sistema de comentarios, lamentablemente esta magnífica extensión sólo posee 2 estilos: Houdini y Narcissus, y para algunos puede significar un contra al momento de usarla en su plantilla ya que la adaptación a veces no es muy buena.

Si bien en la página de Disqus explican los pasos para añadir CSS personalizado, no muestran los selectores necesarios para modificarlo, y en esta oportunidad mencionaremos los más importantes para que puedan así personalizar sus formularios exitosamente.

El tutorial:

Antes de empezar el tutorial aclararé que es posible insertar CSS directamente en la plantilla del blog o desde el escritorio de Disqus (Settings | Appearance). Recomiendo a ciegas que usen la función integrada de Custom CSS en Disqus para evitar así problemas de atributos (Si los insertan directamente en la plantilla necesitarán sobreescribir cada atributo con el valor !important).

Lista de selectores:

/*DISQUS SELECTORES CSS*/

.dsq-content-stub { /*LOGO DISQUS CARGANDO*/
}

/*SECCIÓN PARA POSTEAR*/
.dsq-post-area { /*Contenedor post completa*/
}

.placeholder { /*Textarea para comentar*/
}

.dsq-request-user-stats { /*Status del usuario*/
}

.dsq-button { /*Botón comentar*/
}

.dsq-subscribe-rss { /*Enlace suscripción RSS*/
}
.dsq-subscribe-email { /*Enlace e-mail*/
}

.dsq-comments-title {/*Mostrando X comentarios*/
}


/*COMENTARIOS*/

.dsq-comments { /*Contenedor de todos los comentarios*/
}
.dsq-header-avatar { /*Avatar del comentarista*/
}

.dsq-full-comment { /*Contenedor de comentario único*/
}

.dsq-comment-cite { /*Enlace nombre de perfil*/
}

.dsq-comment-header-meta { /*Cabecera comentarista*/

}

.dsq-comment-body { /*Cuerpo del mensaje*/
}

.dsq-button-small  { /*Botones del comentario*/
}

.dsq-pagination { /*Paginación de comentarios*/
}

/*FOOTER DISQUS*/

.dsq-item-trackback { /*Sección Trackbacks*/
}

Para que puedan modificar cada item de manera correcta he añadido un comentario destacado en color verde, recuerda que puedes aplicar los atributos que desees, si no sabes usar CSS te recomiendo que leas esta guía para que empieces a hacer tus propios cambios.

Si lo deseas puedes revisar este blog de pruebas para comprobar que la personalización funciona correctamente. El código que utilicé fué el siguiente, puede servirles como ejemplo:

.dsq-comment-body {
background:#fff;
border:1px solid #c0c0c0;
color:#222;
padding-bottom:10px;
font-size:12px;
font-family: Century Gothic, sans-serif;
}

.dsq-comment-text {padding:10px;}
.dsq-comment-header {background:#3d7196;color:#fff;margin-left:-6px;}
.dsq-comment-header a {color:#fff;}

#dsq-content .dsq-avatar img {
border: 0 none;
box-shadow:inset 1px 1px 1px #c0c0c0;
border-radius: 3px;
height: 36px;
width: 36px;
}

#dsq-content .dsq-avatar {
-webkit-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
-moz-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
-o-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
z-index:200;
}

Importante:

Si hay algunas classes que no haya agregado puedes comprobarlas tu mismo con Firebug, una extensión para Firefox que permite analizar cada elemento y así detectar las classes. Si usas Google Chrome basta con seleccionar un elemento con botón derecho del mouse y selecciona "Inspeccionar elemento", ya que este último navegador incluye ya algo similar.