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;}
  • a CSS-only question is more suited for stackoverflow.com Commented Feb 29, 2012 at 5:19
  • I agree, it's not a WP-specific question ... but since Joshua already answered below I'll keep it here for now.
    – EAMann
    Commented Feb 29, 2012 at 5:47
  • @EAMann Thanks, and sorry. I'm learning what questions go where. :)
    – Rick Smith
    Commented Feb 29, 2012 at 6:09
  • The FAQ is a handy little link to bookmark if you're ever unsure as to what questions can be asked here: wordpress.stackexchange.com/faq Commented Feb 29, 2012 at 8:09
  • To prevent any further downvotes or flags for being off-topic, I'm going to close the question now that it's been answered. In the future, if you ever have a question regarding whether or not your Question belongs here, feel free to ask in chat.
    – EAMann
    Commented Feb 29, 2012 at 14:50

1 Answer 1


Not really a WPSE question but I was bored.

For starters there is no .dsq-full-comment class, that I could find anyway, on the page you linked to. However if you wanted the entire comments block to look all pretty and white like the rest of you site put this on in your themes custom.css file:

#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;
  • Wow ,thanks! I just added it, and it looks awesome! Quick question, the comment site said this code would work "#disqus-thread { color: #F5F5F5 !important; }" but it didn't. I'm sort of a CSS noob, and appreciate the chance the learn. Can you help me understand why the code I was trying to put in didn't work, and why it takes all of the above CSS to make it work? (Thanks. ):)
    – Rick Smith
    Commented Feb 29, 2012 at 5:47
  • The color CSS property sets the color of the text, not the background. The CSS declarations above set the background color, then they force the box holding your Disqus comments to have rounded corners and a slight drop shadow. The corners and shadow are purely optional, but look much better than the all-square alternative.
    – EAMann
    Commented Feb 29, 2012 at 6:12
  • @EAMann I totally agree! Thanks for helping me look good! :) Did you see it up and running?
    – Rick Smith
    Commented Feb 29, 2012 at 8:43
  • @RickSmith You want to change the background property. It appears to be declared twice, I just copied and pasted the CSS of the body div so I didn't write it. However deleting one of the background: white; lines and replacing the remaining with background: #F5F5F5 !important; should change it the the (I'm guessing) grey colour you're looking for
    – Joshua
    Commented Mar 1, 2012 at 0:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.