Tips para Blogger! Personalizar Disqus con CSS + Tutorial

9:00:00 Princess Aleka 4 Comentarios

splash

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.

Captura1

Paso 2: Haz click en “Settings”.

Captura2

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”.

Captura3

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

Captura4

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

Captura5

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”.

Captura6

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

Captura7

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

4 comentarios:

  1. holi ! me sirvio muchito pero tengo una dudita
    en vez de un color de fondo quisiera ponerle una imagen, lo dejo asi?
    background-image: url
    funsionaria? o tendria que ver otra forma?
    porfis ayuda ...:(

    ResponderEliminar
  2. ¡Hola! Creo que desde que Disqus cambió, no se puede modificar el estilo de la cajita de comentarios. Discúlpame por no poder ayudarte. Mucha suerte.

    ResponderEliminar
  3. oki gracias, no importa ya lo solucione de otra forma, te gustaria pasar por mi blog? es teneraaenigma.blogspot.com, no resivo casi visitas asi que me promosiono ^_^

    ResponderEliminar
  4. ¡Hola! Creo que Disqus ya no permite modificar el CSS del formulario. Lo siento. Mucha suerte.

    ResponderEliminar

Deja tu huella en este Universo

Populares de la semana