Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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;}
share|improve this question
    
a CSS-only question is more suited for stackoverflow.com –  helgatheviking Feb 29 '12 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 Feb 29 '12 at 5:47
    
@EAMann Thanks, and sorry. I'm learning what questions go where. :) –  Rick Smith Feb 29 '12 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 –  DigitalSea Feb 29 '12 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 Feb 29 '12 at 14:50
add comment

closed as off topic by Wyck, EAMann Feb 29 '12 at 14:50

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 2 down vote accepted

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;
}
share|improve this answer
    
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 Feb 29 '12 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 Feb 29 '12 at 6:12
    
@EAMann I totally agree! Thanks for helping me look good! :) Did you see it up and running? –  Rick Smith Feb 29 '12 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 Mar 1 '12 at 0:17
add comment

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