How To Change Colors of Comment Text, Number, Brackets and Backgrounds in Thesis

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

change colors of comment elements in thesis

The other day a friend asked me about styling the various parts of the Thesis comments display and when trusty Google didn’t come up with a fast answer, I was forced to delve into some CSS with the aid of Firebug to determine the solution.

If you use the Thesis theme, on your homepage you may display the number of comments for a post, like so:

thesis comments

 

So the question is, how to change the colors of each of those elements – the word ‘comments’, the curly brackets and the number of comments. You can simply copy/paste the relevant code snippet from below into your custom css file to achieve the desired result. I’m using the color #000000 in the code samples, but you can pick out your own colors here.

Change bracket and comment number color:

.custom .format_text .to_comments span {
color: #000000;
}

Change just the word ‘comments’:

.custom .format_text .to_comments a {
color: #000000;
}

Change just the color of the brackets:

.custom .format_text .to_comments span.bracket {
color: #000000;
}

Change only the color of the number of comments:

.custom .format_text .to_comments a span {
color: #000000;
}

As an extra bonus, here’s how you can change the background color of your own comment box, so that your responses as the author stand out from others:

/* this controls the background that holds your name and the date of the comment*/
.custom div#comments dt.bypostauthor, #comments dt.bypostauthor div.format_text{
background:#FFFFCC;
}

/* this controls the background that holds your comment text*/
.custom div#comments dd.bypostauthor, #comments dd.bypostauthor div.format_text {
background:#FFFFCC;
}

/* this controls the color of your comment text*/
.custom div#comments dd.bypostauthor, #comments dd.bypostauthor format_text {
color:#000000;
}

So there you go, now you can get fancy with it….

 

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Weekly WordPress Tips To Your Inbox

+ Get 50% Off The Beginner's Guide to SEO Ebook!
  • This field is for validation purposes and should be left unchanged.

This Post Has 7 Comments

  1. Martyna

    Lucy, hello
    Thank you for the tutorial. I am trying to change the color of the comment box, this is what I want to start with. Just working on a new website. it's url is under my name

    can you help?
    thank you

  2. Rajib Kumar

    Hey Lucy Beer, nice customization for thesis comment. But, comment box customization are not working for my thesis.

    1. LucyBeer

      Hi Rajib. If you can post the code you are using and what you are trying to change, maybe I can help troubleshoot….

  3. Micah G Robinson

    Great code… Doesn't change the { # or comment/text on the actual post, just the blog page.
    Any ideas?

    1. LucyBeer

      Hi Micah – it should work there just fine. Can you point me to a link that displays this issue and let me know the code you are using?

  4. Lucy Beer via Facebook

    It really depends what you want to do with it. It’s easy to customize up to a point, but then, as with any other theme, if you want to do anything really fancy you’ll still need to get into the code. I’m not a total Thesis advocate, I just have learned a lot about it because I have several clients that use it.

  5. Doug Willis via Facebook

    What are your thoughts on Theis? Would you recommend it?

Leave a Reply

Your email address will not be published. Required fields are marked *