Personaliza Disqus - css, wordpress, less, disqus

Acabo de integrar Disqus en un tema de Wordpress que estoy desarrollando. Todo funciona bien, excepto el CSS. ¿Cómo puedo aplicar mi propio estilo css a Disqus?

En mi archivo .less, escribí esto:

#disqus_thread {
position: relative;
display:block;
margin: 0 0 20px 0;
padding: 20px;
line-height: 1.5;
color: @brandGray !important;
background-color: @white;
.flat-box-shadow;
overflow: hidden;
clear: both;

iframe {

body.dark {

#layout {

#main-nav {

nav {

a {
color: @brandViolet !important;

&:link,
&:visited {
color: @brandViolet !important;
}

&:hover,
&:active,
&:focus {
color: @lightViolet !important;
}

}

}

}

}

}
}
}

Pero no funciona en absoluto. Busqué en Internet y descubrí que mi estilo css no se aplicará porque Disqus está en un iFrame. Y puedo encontrar antyhing para personalizar Disqus en el panel de administración. Entonces, ¿cómo puedo resolver esto?

Yo trabajo en localhost. ¿Podría ser un problema?

¡Muchas gracias!

Respuestas

0 para la respuesta № 1

Referencia: http://casadeblundell.com/jonathan/custom-styling-for-disqus-css/

/* --- disqus css -- */

#disqus_thread {
color: #ffffff;
border-style: 0px solid;
border-color: #cccccc;
padding: 5px;
}

#dsq-content #dsq-comments .dsq-comment-body {
color: #fff;
background-color: #000000;
}

.dsq-reaction-body {
color: #fff;
}

.dsq-reaction-header cite, .dsq-reaction-header span {
color: #ccc;
}

.dsq-reaction-retweets {
color: #ccc;
}

/*--- end disqus css --*/

---

0 para la respuesta № 2

Repitiendo lo que escribió @Assaf pero Las instrucciones actuales para el estilo disqus están aquí..

Dejan en claro que no se puede personalizar todo, solo unas pocas cosas selectas. Por ejemplo, para los enlaces puedes configurar el color pero no mucho más. Lo intenté en mi propio blog y funcionó.

#disqus_thread a {
color: red;
}

Pero también probé esto

#disqus_thread a {
color: red;
font-weight: bold;           /* no effect */
text-decoration: underline;  /* no effect */
}

Según esos documentos, cosas que puedes configurar.

• Elige el tema claro u oscuro

  Está configurado en la página de administración en Admin> Configuración> Apariencia

• Establecer el color de los párrafos y enlaces.

  #disqus_thread p {
  color: green;
  }
  #disqus_thread a {
  color: red;
  }
  

• Establecer el ancho de los comentarios.

  #disqus_thread {
  width: 700px;
  }
  

• Agrega tu logo si pagas por la versión Pro

---

0 para la respuesta № 3

Dado que disqus hereda los colores de su elemento principal, la forma más sencilla es agregar una envoltura y darle un estilo:

<div id="disqus-wrapper">
<div id="disqus_thread"></div>
</div>

#disqus-wrapper a:any-link {
color: #333; /* the color you want here */
}

---

-2 para la respuesta № 4

Un truco simple para cambiar. Disqus fondo . Si está utilizando un plugin "disqus-comment-system", abra el archivo comments.php. y buscar disqus_thread carné de identidad. Ahora agrega tu propia clase. por ejemplo : <div id="disqus_thread" class="myclass">

Y finalmente agrega esta clase en tu archivo css. Y cambia lo que quieras. como: relleno, fondo, etc Esta misma técnica funciona en otros plugins de discusión también.

Gracias

---