Customize Disqus
Solution 1
Repeating what @Assaf wrote but the current instructions for disqus styling are here.
They make it clear you can't style everything, only a few select things. For example for links you can set the color but not much else. I tried this on my own blog and it worked
#disqus_thread a {
color: red;
}
But I also tried this
#disqus_thread a {
color: red;
font-weight: bold; /* no effect */
text-decoration: underline; /* no effect */
}
According to those docs, things you can set.
-
Choose the light or dark theme
It's set on the admin page under Admin > Setup > Appearance
-
Set the color of paragraphs and links
#disqus_thread p { color: green; } #disqus_thread a { color: red; }
-
Set the width of the comments
#disqus_thread { width: 700px; }
Add your logo if you pay for the Pro version
Solution 2
Reference: 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 --*/
Solution 3
Since disqus inherits the colors from its parent element, the simplest way is to add a wrapper and style it:
<div id="disqus-wrapper">
<div id="disqus_thread"></div>
</div>
#disqus-wrapper a:any-link {
color: #333; /* the color you want here */
}
Related videos on Youtube
Lancelot
Updated on September 15, 2022Comments
-
Lancelot over 1 year
I've just integrated Disqus in a Wordpress theme that I'm developing. Everything works fine except the CSS. How can I apply my own css style to Disqus ?
In my .less file, I wrote this :
#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; } } } } } } } }
But it doesn't work at all. I searched on the Internet and I found that my css style will not be applied because Disqus is in a iFrame. And I can find antyhing to customize Disqus in the admin panel. So, how can I solve this ?
I work on localhost. Could it be a problem?
Many thanks!