Hi,
Open style.css file of your theme and in that there will be a code for comment background color..change it to white…
#comments {
margin: 0 10px;
padding: 5px 10px;
padding-left: 25px;
font-size: 9pt;
color: #a8280b;
background: url(images/comment0.jpg) left 5px no-repeat;
}
I have bold the settings which you need to be modified from style.css file.
Thanks,
Shane G.
thanks shane but I don’t see where to change the color?
here is what my .css file looks like
/* comments */
#commentlist { background: url(../../images/techblue/content-bg.jpg) repeat-x #FFF; border: solid #CCC; border-width: 0 1px 1px; list-style: none; padding: 10px; margin: 0 10px 0 0; }
#commentlist li { margin: 0; padding-bottom: 20px; overflow: hidden; }
#commentlist .avatar { border: 1px solid #CCC; padding: 1px; float: left; margin: 0 5px 10px 0; }
#commentlist cite { font-weight: bold; font-style: normal; line-height: 14px; }
#commentlist p { clear: left; font-size: 12px; }
#commentlist .reply { float: right; }
#commentlist .reply a, .comments-navigation a, .read-more, .navigation a { color: #FFF; background: url(../../images/techblue/feed-title.jpg) top repeat-x; text-decoration: none; padding: 5px 8px; margin-bottom: 3px; border: 1px solid #CCC; font-weight: bold; zoom: 1; *display: inline; display: inline-block; }
#commentlist .reply a:hover, .comments-navigation a:hover, .navigation a:hover, .read-more:hover { background: url(../../images/feed-title-white.jpg) top repeat-x; color: #000; }
#commentlist .children { clear: right; margin: 5px 0 0; list-style: none; }
#commentlist .children li { border-bottom: none; border-left: 1px dotted #CCC; padding: 0 0 0 20px; }
#commentlist #respond { clear: both; margin-top: 40px; padding-top: 10px; border-top: 1px dotted #CCC; }
#commentlist .comment-author { padding: 10px 0 0 10px;}
#commentlist .comment-content { padding: 0 10px; }
#commentlist .comment-node { background: #FFF; border: 1px solid #EEE; }
#commentlist .comment-meta { text-decoration: none; color: #999; font-size: 11px; }
#commentlist .comment-controls { background: #FFF; padding: 5px 10px; font-weight: bold; }
#commentlist .comment-controls a:link, #commentlist .comment-controls a:visited { text-decoration: none; }
.comments-navigation { clear: both; margin: 10px 10px 20px 0; }
.nocomments { background: url(../../images/techblue/content-bg.jpg) repeat-x #FFF; border: solid #CCC; border-width: 0 1px 1px; padding: 15px 10px; margin: 0 10px 20px 0; }
#commentsform { background: url(../../images/techblue/content-bg.jpg) repeat-x #FFF; border: solid #CCC; border-width: 0 1px 1px; margin: 0 10px 10px 0; padding: 10px 15px; overflow: hidden; }
#commentsform textarea { width: 98%; height: 100px; padding: 5px; }
im sure this is so simple
Here’s what I ultimately did.
There may be some repetitiveness here, but its worked for my site at http://somethingbeautifulpodcast.com
/* --- 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-retweets {
color: #ccc;
}
/*--- end disqus css --*/
I just added it right into my main CSS file.
But that puts white/grey text on the site’s default background.
If you wanted to only change the background color you might try…
/* --- disqus css -- */
#disqus_thread {
background-color: #ffffff;
border-style: 0px solid;
border-color: #cccccc;
padding: 5px;
}
#dsq-content #dsq-comments .dsq-comment-body {
color: #fff;
background-color: #ffffff;
}
/*--- end disqus css --*/
I haven’t actually tried that, but in theory I think it should work.
