How to change text color in Disqus comment textarea?

4 Views

I’m using Disqus external comment system with WordPress (as a WP plugin) and I’m trying to customize it with my custom CSS.

Everything works great, but I have problems with replacing the default text color in the form textarea.

Read More

I tried it with: 

#dsq-content .dsq-textarea .dsq-textarea-wrapper, #dsq-content .dsq-input-wrapper { color: red !important }

but I was not successful, even when I targetet just “textarea” it not worked.

It seems that javascript is playing together because there are 2 events: when the textarea is focused and blurred. When there is a “blur” then .placeholder-grey CSS class is added to the textarea, but targeting that with CSS not worked as well.

Disqus has very poor documentation, so I figured out all this with code inspection.

Any ideas would be really appreciated.

P.S. I don’t have a working example online, you can see it on any blog/website where Disqus is used, for example on their own blog at: http://blog.disqus.com/post/974280725/achievement-unlocked-merging-profiles#disqus_thread

Post Views: 4

Related posts

Leave a Reply

4 comments

  1. Depending on how the theme is laid out, Disqus may inherit a different text color which may be the same as the background. You can change it using the following override:

    #dsq-content { color: #ffffff !important; }

    If the text color still does not change, you will need to target comments more directly. This can be done with the following CSS:

    .dsq-full-comment { color: #ffffff !important; } /*for Narcissus theme users*/

.dsq-comment-body { color: #ffffff !important; } /*for Houdini theme users*/

  2. If you didn’t solve it yet I found a solution that worked for me. Just a bit after the body{} tag in the style sheet of wordpress, you will find the ul{} in there change the color:#FFFFFF to color:#000000 (or what ever color you like). It worked for me and I hope it will work for you to.

    body{
 text-decoration: none;
 background-color: #000000;
}

a:hover{
 color: #FFFFFF;
}

a {
 color: #CCCCCC;
 text-decoration: none;
 font-size: 14px;
}      

li {
 padding: 10px 10px 0px 10px;
}      

ul {
 list-style:none;
 >>> color: #000000;     
 margin-left: 25px;    
}

  3. The site you link to has a css style block just before the textarea, if you edit this to add color: #f90; it’ll change the color from the usual black to orange (in this example). Presumably you could also add this in the head of the document instead.

    If you use something like Chrome’s developer tools or, I imagine, Firebug for Firefox you can edit the html/css in place to see the effect live (although it won’t persist) to see what changes you can, or need to, make.

  4. The website you weblink to has a css design prevent just before the textarea, if you modify this to add color: #f90; it’ll modify along with from the regular dark to lemon (in this example). Presumably you could also add this in the go of the papers instead.

    Spybubble Free