Change default comment bubble color in Twenty Eleven theme.

  • Author
    Posts
  • #1191976

    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.

    #1192119

    timethief
    Member
    #1192154

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

    #1192174

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

    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?

    #1192209

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

    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.

    #1192267

    Thanks, all! Very very helpful!

The topic ‘Change default comment bubble color in Twenty Eleven theme.’ is closed to new replies.