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

For an alternate look, I like them to display the full width of the column so you only have one per row, like this:

To achieve this look:
Go into Custom File Editor in the Thesis submenu
Make sure custom.css is selected in the pulldown.
Scroll to the bottom of this file and paste the following code underneath: */

.custom .teaser {
width: 100%;
margin-top: 2em;
padding-top: 2em;
border-top: 1px dotted #bbb;
text-align: justify;
}
.custom .teasers_box {
padding-top: 0;
padding-bottom:0;
border-top: 0;
}

Save this and you will now have teasers that span the full-width of your main column!

I really like the way this looks, particularly for image-heavy blogs since it allows you to display a good size thumbnail making your posts all the more compelling. Once you’ve changed the teaser width, you now have more space to play with so you can increase the size of the thumbnail graphic to really catch attention. That is found in the Design Options menu, in Default thumbnail settings

The addition of an image to the teaser is a really simple way to give your Thesis design an extra boost. This is especially great for creative sites that use wonderful imagery – food blogs, arts n crafty blogs, art/design blogs etc.

Assuming you also typically use a header image at the very top of your post (similar to the way posts on this blog look), the easiest way to achieve this by default is to use Thesis image fields to handle the main image for your post, from which it will also auto-create the teaser thumbnail.

Set up the default options
In the Thesis options menu, go to the Design Options submenu, then Post Images and Thumbnails. The Default Post Image Settings control where the main image for your post will be positioned. I personally prefer ‘before post/page content’ so that it shows up under the headline of the post, immediately before the text of the post. You can play with the options to see how it changes the look.

The Default Thumbnail Settings relate to how the thumbnail will be displayed in the teaser. I prefer “Left with text wrap” but again, play with it and see what suits you.

All of these settings can be overridden on a post by post basis if necessary.
Don’t forget the big ass save button.

Implement in a post
When you are writing your post and you want to add an image to the top of the post, you click on upload image as normal. The difference happens when you would ordinarily click ‘insert into post’. Instead, you now copy the url of your image and hit save instead.

Now scroll down the post editing page past several fields until you reach “Post Image and Thumbnail”. In the field labeled “post image” – paste the url of your image, then enter the alt text in the field below.

Now save your post and that’s it. Your image will automatically appear at the top of your post AND in the teaser as a thumbnail.
The other fields will inherit the information you set in the default Thesis menu as above. If you want to override the defaults, this is where you would do that, but generally speaking you won’t need to touch these.
You can play with the placement and border options to change the look.

This process will give you the same teaser thumbnail as main header image. If you want a different thumbnail – you’ll have to upload a separate image to your media library, grab the image url and paste it into the Thumbnail image field on your post. Note that if you specify an image url here Thesis will not resize it, so you will have to upload the exact size image you want to display.

Other images you want to include in the body of your post can be uploaded and inserted in the usual manner – this method relates to a main header image for your post only.