Question

I may be missing something really simple here, but I am trying to style the background to my disqus comments to a white color (like the blog post content area) but for some reason the background of the site is still overriding my styling. I have no idea why. Here is my styles.css…Does any one see what’s going on? (Here is a single post where you can see the background is white, although my css should be making it white, unless I’m doing something wrong. http://noahsdad.com/fox-4-interview-noah/ )

/*  
Theme Name: Standard-Child-Theme-1
Description: Standard is a meticulously designed and coded theme for professional blogging. It adapts to mobile devices and individual posts can be styled distinctly for words, images, quotes, links, videos, or statuses. It includes a light and dark style sheet and precision, zero-config SEO techniques are built-in. Visitors will love it. Search engines will love it. And you will love it.
Author: 8BIT
Template: Standard
*/

@import url("../Standard/style.css");

.dsq-full-comment { color: #F5F5F5 !important; }

#subscribe_dock input[type="submit"] { padding: 5px 2px; font-size:11px; }

/* Social Icons For Top Right Graphic */
#text-25    {position:relative;}
#social         {background:url(http://noahsdad.com/wp-content/uploads/2012/02/down-syndrome-blogs-noahs-dad.jpg) no-repeat; height:300px; width:300px; position:relative;}
.social_icon        {height:32px; width:32px; display:inline-block;}
.social_trans       {height:32px; width:32px;}
#social_dock        {position:absolute; top:70px; left:8px;}
#social_dock a *    {border:0;}
#subscribe_dock     {position:absolute; bottom:-5px; left:8px;}
#social #facebook   {background:url(http://noahsdad.com/wp-content/uploads/2012/02/social-sprite-2.png) no-repeat;}
#social #twitter    {background:url(http://noahsdad.com/wp-content/uploads/2012/02/social-sprite-2.png) no-repeat -32px 0px;}
#social #youtube    {background:url(http://noahsdad.com/wp-content/uploads/2012/02/social-sprite-2.png) no-repeat -64px 0px;}
#social #rss        {background:url(http://noahsdad.com/wp-content/uploads/2012/02/social-sprite-2.png) no-repeat -96px 0px;}
#social #pintrest   {background:url(http://noahsdad.com/wp-content/uploads/2012/02/social-sprite-2.png) no-repeat -128px 0px;}
#social #googleplus {background:url(http://noahsdad.com/wp-content/uploads/2012/02/social-sprite-2.png) no-repeat -160px 0px;}

/* Needed In Order To Get Social Icons To Show Up Correctly */
div.social_icon img {background: none;}

Here is the code that was added to get it to work. Any ideas why I needed all of this code to get it to work? Thanks.

#disqus_thread {
    clear: both!important;
    background: white;
    background: white;
    margin: 0 0 40px 0;
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;

Answer 1

I took a look at the site. The id of the element that you want to target and change the background color of is disqus_thread. So find where that is in your CSS and add the appropriate styling there.

You can do this either in your default.css file or your noahsdad.css file. You could also add this line to any CSS file that you have access to:

#disqus_thread {
    background: #fff; // white
}