Day 8: Styling Author Comments

Author comment highlighting in WordPressIf you run a WordPress site with comments you have most likely responded to a few comments yourself. But unless people pay attention they won’t necessarily know that you are the author of that post and they may take you for just another commenter. What you need is some styling that visually separates your author comments from the other reader comments. On this 8th Day of WordPress we’ll take a look at the surprisingly easy task of styling author comments for WordPress.

For simplicity I’m using a twentyten child theme as the example here, but the same principles will carry over to all other themes as long as they use the built in commenting function in WordPress.

Identifying the author with .bypostauthor

One of the many great things about WordPress is that as long as you use a well built theme it generates more code and more metadata than you’ll ever need. Comments are no exception. If you open a post with some comments on it and look at the source code you’ll quickly spot lots of seemingly superfluous data that actually offers up hooks for you to connect style code to. Below are two examples of this type of code, the first one from a comment left by a visitor, the second one from a comment left by the post author:


<li class="comment even thread-even depth-1" id="li-comment-1">


<li class="comment byuser comment-author-mor10 bypostauthor odd alt depth-2" id="li-comment-3">

As you can see the second comment carries with it far more information in the form of classes. From the beginning it tells me it’s a comment, it was left by a registered user, that user was me (mor10), and I am also the post author and so on. Styling these classes you can micromanage the appearance of different types of comments in pretty much any way you want. We’re going to focus on the .bypostauthor class but this same technique can be used to target any of the other classes as well.

Giving the author some style

Default twentyten commentsIn the twentyten theme all comments are styled the same by default. Even so the development team has prepared style tags for customization of things like odd and even comments as well as the post author. As a result styling comments from a post author as different from other commenters can be as easy as adding a new background colour to the .bypostauthor style like this:


.commentlist .bypostauthor {
	background-color: #CCCCCC;
}

The result would be what you see below:
Customized author comment
Sure, it’s customized, but it lacks that style that makes it attractive. To really make the author comments pop we need to do a bit more.

Bringing some real style to the author comments

This is where the lines between the designer and the developer start getting blurred. Creating a great looking style to identify an author comment is as much about coming up with a good look and colour combination as it is finding the correct code to style. For this tutorial I’ve made a bunch of simple changes that add some style to the author comment. Consider these stepping stones on your way to your own custom author style.

Step 1: Flip the gravatar from left to right

Looking at the twentyten stylesheet we see that the .avatar style places the image absolutely 4px from the top and 0px from the left. To move it to the right we need to create a new style to override the old one:


.commentlist .bypostauthor .avatar {
	top: 0px;
	position: relative;
	float: right;
}

Step 2: Shift the text to the left

The position of the text within the comment is defined by the .commentlist li.comment style so to move the text to the left we need to override the left padding. Everything else can be left the way it is:


.commentlist li.bypostauthor {
	padding: 0 0 0 0;
}

Step 3: Add a nice border with rounded corners

Now that the layout has changed we can add a border around the comment and give it some nice rounded CSS3 corners. The rounded corners will not work in Internet Explorer until IE9 comes out but even if it doesn’t these borders will still look nice:


.commentlist li.bypostauthor {
	border: 1px solid #DFDFDF;
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
}

The Proverbial tip of the iceberg

With some simple styling using the .bypostauthor class you can create custom styling for your author comments just like you see in the image at the top of this article. And as you saw by the markup for the comments, you can get even more fancy with it creating custom styles for each individual author if your site has more than one. Now that you know how to do it it’s time to implement custom styling for your author comments on your own site.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

12 thoughts on “Day 8: Styling Author Comments

  1. Yay! You’re going to make me into a WordPress genius! I love this 24 Days of WordPress. I am a big fan of yours – I found you from the Lynda.com WordPress tutorial.

    I have a pretty basic question – what file do I open up in order to make these changes? I have a child of TwentyTen theme just like you set up on the Lynda.com tutorial.

    Thanks so much!
    Liat
    knitfreedom.com

  2. Hi Morten,

    Thank you so much for putting out a lot of time and effort for these free tutorials.

    I am new to WordPress and CSS but I tried to build my own theme from scratch. I used the tag below from your tutorial to make my replies stand out but it did not work.

    .commentlist .bypostauthor {
    background-color: #CCCCCC;
    }

    I can’t trouble shoot since I copied and pasted the comment form from a tutorial =/. Your help would be greatly appreciated!

    1. The .bypostauthor class depends on your theme files using it. In your case the case it doesn’t look like the theme is differentiating between author and regular commenter. You may have to change out your comments.php file and do some more tweaking before you get this to work. Be warned though that if you change out your comments.php file you have to redo all the styling and layout to get it to work. A better option may be to look at the twentyten comments.php file, find the if statement that creates the .bypostauthor class and add it to your existing theme.

  3. Hello,

    Thank you for this very well-written post, it is very clearly organized. However, it doesn’t work for me. I am sure it’s an issue on my end, but can’t seem to find what it is exactly…

  4. Nevermind, I just fixed it.

    It took #commentlist instead of .commentlist

    🙂

    Thanks again, great post!

  5. Wow, great coding!

    I’m designing my own theme from scratch based on the Twenty Ten v1.2 php functions and file structure, so I’ve my own style.css file. Including .commentlist .bypostauthor in my style.css file and having in my comments.php file worked like a charm.

    Thanks.

  6. How can I do the same in twentyfifteen? I tried to adapt your approach without any result, probably because twentyfifteen differ in the stylesheet (or maybe in comments.php or functions.php too). A little help would be greatly appreciated.

Comments are closed.