How To Change Colors of Comment Text, Number, Brackets and Backgrounds 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:

 

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