Weekend Project: Styling Author Comments with Custom CSS

Last week we shared how to style your comments if you use Advanced Templates. This week we'll be focusing the Weekend Project on how to style your comments with only CSS.

In order to take part in this Weekend Project, you'll need to be a Pro-Unlimited (and above) member, and use the Custom CSS feature. All set? Let's get started!

First things first, though, let's take a look at how comments appear before any changes are made. Note that, due to the comment settings I've selected for this example, the comments include a profile image to the left of each comment.

The first comment is from a theoretical reader, whereas the second comment is from me, logged into my TypePad account. Being logged into your TypePad account is key.

When you leave a comment in your own blog, the system automatically recognizes you as the owner. When that happens, it inserts the comment-by-owner CSS class into the comment. That class is what we'll exploit to style comments you write while logged in.

Here are a few style options to consider, but don't think you're limited to only these:

• indent your comment
• add a background color
• add a border
• add background image to comment

We provide the CSS, as well as what the final product could look like, below.

Indent your comment

The CSS to perform the indented look is:

.comment-by-owner {
 margin: 0px 0px 0px 40px;
}

Add a background color

The CSS you would need to change the background color of your comment is:

.comment-by-owner {
 background-color: #f6f6f6;
}

If you've set avatar photos to appear, then you'll need to also include:

.comment-by-owner .comment-avatar {
 padding: 5px 0px 0px 5px;
}

.comment-by-owner .comment-content {
 padding: 5px 0px 0px 0px;
}

Add a border

The CSS you'll need to add a border to your comment is:

.comment-by-owner {
 border: 1px solid #c0c0c0;
}

If you've set avatar photos to appear, then you'll need to also include:

.comment-by-owner .comment-avatar {
 padding: 5px 0px 0px 5px;
}

.comment-by-owner .comment-content {
 padding: 5px 0px 0px 0px;
}

Add a background image

The CSS you'll need to add a background image to your comment is:

.comment-by-owner {
 background: #ffffff url(http://example.typepad.com/image.jpg) no-repeat 0px 0px;
}

If you've set avatar photos to appear, then you'll need to also include:

.comment-by-owner .comment-avatar {
 padding: 0px 0px 0px #px;
}

.comment-by-owner .comment-content {
 padding: 0px 0px 0px #px;
}

.comment-by-owner .comment-footer {
 padding: 0px 0px 0px #px;
}

If you do not have avatar photos to appear, though, you'll need to also include:

.comment-by-owner .comment-content {
 padding: 0px 0px 0px #px;
}

Regardless of whether profile images appear, replace # with the pixel width of the image you've added as the background image. In our example, the "owner" image is roughly 100px wide, so I would replace #px with 100px.

If you have questions about uploading an image for your CSS use, you'll want to learn how to use the File Manager. Once uploaded, click on the image's file name, then copy the URL of the image from the browser's address bar. Replace http://example.typepad.com/image.jpg with the URL you copied.

And that's all you need to get started with styling comments you leave on your blog! We hope you enjoy trying out this Weekend Project and continue to check in for future projects. :)

Comments

[Dave]

Thank you for putting this up. I am sure it will be useful to a great many bloggers.

[Kofla Olivieri]

Thanks, I was finally able to do this in my blog. It looks great!