Need help? Check out our Support site, then


Change default comment bubble color in Twenty Eleven theme.

  1. iliketoplayindirt
    Member

    My blog is based upon the customized Twenty Eleven theme. Using the black background option, the default comment bubble color is almost invisible on my blog . People have asked me if they are able to leave comments because the can't see the comment bubble! What CSS text can I add to change the color of the default comment bubble and the number inside? Thanks in advance for your help! JH

    The blog I need help with is smallstepsmakeadifference.wordpress.com.

  2. iliketoplayindirt
    Member

    Well, now I feel like an idiot! You must have used the very tags I identified for this entry to find that answer. Yes, very helpful! Still trying to figure out how to change the color of the text inside the bubble (number of comments).

  3. To change the background color, border color, and link color of the comment bubble in the Twenty Eleven theme, add this to your Appearance → Custom Design → CSS editor:

    .entry-header .comments-link a {
    	background-color: #48d1cc;
    	border-color: #008080;
    	color: #000080;
    }

    Note that you can adjust the color codes as needed.

    There's no need to change out the image as advised in the other thread because the image is actually a mask. Pretty clever!

    Make sure to remove this part of your current custom CSS before adding the example from above or the link color won't change:

    .comments-link a, .no-reply a {
    	color: #073693 !important;
    }
  4. iliketoplayindirt
    Member

    First of all, thank you both for your help! The suggestions are wonderful! I used the suggestion below:
    .entry-header .comments-link a {
    background-color: #48d1cc;
    border-color: #008080;
    color: #000080;
    }
    This works very well! Two quesions: 1) How do I control the hover color of the text bubble and, 2) What element controls the text color within the text bubble?

  5. The hover color of the comment bubble is here:

    article.feature-image.small .entry-summary p a:hover, .entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active, .feature-slider a.active {
    background-color: #EBB667;
    }
  6. 2) What element controls the text color within the text bubble?

    The text showing the number of comments is a link, so the ".entry-header .comments-link a" selector in the example above is how to target the text, and the "color" property changes its color.

  7. iliketoplayindirt
    Member

    Thanks, all! Very very helpful!

Topic Closed

This topic has been closed to new replies.

About this Topic