Change default comment bubble color in Twenty Eleven theme.

• 

  iliketoplayindirt · Member · Mar 21, 2013 at 11:00 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  timethief · Member · Mar 21, 2013 at 11:03 pm

  • Copy link

  I searched for you. Does this help? https://en.forums.wordpress.com/topic/twenty-eleven-comment-bubble-background?replies=13

• 

  iliketoplayindirt · Member · Mar 22, 2013 at 3:16 am

  • Copy link

  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).

• 

  designsimply · Member · Mar 22, 2013 at 11:33 am

  • Copy link

  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;
  }

• 

  iliketoplayindirt · Member · Mar 22, 2013 at 1:39 pm

  • Copy link

  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?

• 

  thesacredpath · Member · Mar 22, 2013 at 7:12 pm

  • Copy link

  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;
  }

• 

  designsimply · Member · Mar 25, 2013 at 7:00 pm

  • Copy link

  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.

• 

  iliketoplayindirt · Member · Mar 26, 2013 at 1:50 am

  • Copy link

  Thanks, all! Very very helpful!