Tips para Blogger! Personalizar Disqus con CSS + Tutorial

Después de tanto tiempo, vuelvo con otro Tip para Blogger. Al ver el éxito del Tutorial para Instalar el Formulario de Disqus, vengo a mostrarles cómo fue que lo personalicé, utilizando CSS. Lo mejor de todo: solo necesitas conocimientos básicos de HTML y CSS. Sigue los pasos que te describo a continuación:

Paso 1: Entra a Disqus y loguea con tu cuenta de usuario.

Paso 2: Haz click en “Settings”.

Paso 3: Una vez allí, asegúrate de que la casilla “Enable Disqus 2012 features for your site” esté DESMARCADA. Si la dejas marcada, modificar con CSS será totalmente en vano. Ahora dale click a la pestaña “Appearance”.

Paso 4: Cuando cargue la página, vete completamente al final.

Paso 5: Llegarás al cuadro que dice “Custom CSS”. Trabajaremos en esa cajita de texto.

Paso 6: Copia y pega el siguiente código. Al final del tutorial, desglosaré cada una de las líneas, y dejaré una guía rápida para modificar los colores.

.dsq-comment-body {
background:#fff;
color:#666666;
padding-bottom:10px;
font-size:12px;
font-family: Georgia, sans-serif;
}

#dsq-content .dsq-moderator .dsq-comment-header {
background: #dc83ed;
}

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

#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;
}

Paso 7: Para finalizar, haz click en el botón “Save Changes”.

Paso 8: Verifica en tu blog que el formulario haya cambiado de aspecto.

Ahora, para personalizarlo con los colores de la paleta de colores de tu blog, ten en cuenta lo siguiente. Los colores los puedes cambiar por cualquier código hexadecimal de HTML. En Wikipedia hay una tabla muy útil. No olvides dejar el carácter # delante del código. Como dato útil, todo lo que aparece en color verde de este código, es modificable:

.dsq-comment-body { /*Formato del contenedor de comentarios*/
background:#fff; /*Color de fondo*/
border:1px solid #c0c0c0; /*Tamaño y color del borde. Yo lo borré*/
color:#666666; /*Color de la fuente */
padding-bottom:10px; /*Espacio entre líneas*/
font-size:12px; /*Tamaño de la fuente */
font-family: Georgia, sans-serif; /*Fuente */
}

#dsq-content .dsq-moderator .dsq-comment-header {
background: #dc83ed; /*Color de fondo de la cabecera de los comentarios del moderador*/
}

.dsq-comment-text {padding:10px;}
.dsq-comment-header {background:#f5b7ff;color:#734962;margin-left:-6px;} /*Color de fondo de la cabecera de los demás comentarios*/
.dsq-comment-header a {color:#734962;} /*Color de fuente de la cabecera de todos los comentarios*/

#dsq-content .dsq-avatar img { /*Imagen de perfil del comentario*/
border: 0 none; /*Borde*/
box-shadow:inset 1px 1px 1px #c0c0c0; /*Sombra del avatar*/
border-radius: 3px; /*Tamaño de la esquina redondeada*/
height: 36px; /*Alto*/
width: 36px; /*Ancho*/
}

#dsq-content .dsq-avatar { /*Comportamiento del avatar. En este caso rotación a la izquierda*/
-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;
}

¡Todo listo! Espero que te funcione. ¡Y si todo lo demás falla, mándame un correo y vemos qué hacemos! Suerte,

Denise
Twitter