Better Twenty Eleven Comments

I find the comments in Twenty Eleven take up far too much room and it’s always bothered me. I posted some CSS on the forums here that tightened them up a bit, but it had a few issues.

Today while working on NomNom theme, I had it set to the single column layout and noticed the comment avatars were not pushed over the the left side, but instead placed inside the comment box and it looked really nice. I thought, this is just what I need for my narrow layouts and even 3 column layouts as the narrow comment area is precious and doesn’t need to be used up with a bunch of padding and an image.

Here’s before and after screenshots while using my left/right sidebar layout of NomNom.

Anyways, I haven’t decided if I will add this to all the layouts for NomNom, or just for the ones that need it, I try to keep the look of NomNom the same as Twenty Eleven, and just offer options and easy on/off features.

This should work perfectly with any Twenty Eleven theme that hasn’t modified the comments. However, NomNom theme will require a few CSS edits because I adjusted the comments, if you don’t want to risk doing them, just wait until the next version.

Leave a comment and let me know if you think I should add these to all layouts in NomNom, or just the extra ones I’ve added. (I’ve had to edit this code 3 times, if you notice an issue, please report it.)

/* Tidy Comments
---------------------------------------------- */
/* remove the talking arrow, unless you want it */
.page-template-sidebar-page-php .commentlist > li:before,
.singular  .commentlist > li:before,
.single  .commentlist > li:before {
    content: none;
}
/* Make comments as wide as possible*/
.page-template-sidebar-page-php .commentlist,
.single  .commentlist { width: auto; }
/* Make sure we have room for our comment avatars */
.page-template-sidebar-page-php .commentlist > li.comment,
.singular  .commentlist > li.comment,
.single  .commentlist > li.comment {
	margin-left: 102px;
	width: auto;
}
/* Talking avatars take up too much room at this size */
.page-template-sidebar-page-php .commentlist > li.comment,
.singular  .commentlist > li.comment,
.single  .commentlist > li.comment {
	margin-left: 0;
}
.page-template-sidebar-page-php .commentlist > li.comment .comment-meta,
.page-template-sidebar-page-php .commentlist > li.comment .comment-content,
.singular  .commentlist > li.comment .comment-meta,
.singular  .commentlist > li.comment .comment-content,
.single  .commentlist > li.comment .comment-meta,
.single  .commentlist > li.comment .comment-content {
	margin-right: 85px;
}
/* fix the margin for narrow content in threaded comments */
.commentlist .children li.comment .comment-content,
.commentlist .children > li.bypostauthor, .commentlist > li.bypostauthor {
	margin-right: 0;
}
.page-template-sidebar-page-php .commentlist .avatar,
.singular  .commentlist .avatar,
.single  .commentlist .avatar {
	background: transparent;
	display: block;
	padding: 0;
	top: 1.625em;
	left: auto;
	right: 1.625em;
}
.page-template-sidebar-page-php .commentlist .children .avatar,
.singular .commentlist .children .avatar,
.single  .commentlist .children .avatar {
	background: none;
	padding: 0;
	position: absolute;
	top: 2.2em;
	left: 2.2em;
}
.page-template-sidebar-page-php #respond,
.singular #respond,
.single #respond {
	width: auto;
}
.singular #respond {width: 62.9%}
/* comment fix for single pages and attachment pages */

.image-attachment .commentlist{width: 68.9%;}
.image-attachment #respond {width: 62.9%;}

/* Change the post author comment look as well */
/* Post Author threaded comments background */
.commentlist .children > li.bypostauthor,
.commentlist > li.bypostauthor  {
	background: #efefef;
}

/* Lightened the background color of postauthor and highlighted the avatar instead */
.commentlist > li.bypostauthor .vcard img,
.commentlist .children > li.bypostauthor .vcard img {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom: 5px solid #F5D800;
	padding-bottom: 2px !important;
}

31 thoughts on “Better Twenty Eleven Comments

  1. Brandon

    I don’t know why the WordPress team left the talking avatar image in the styling when using the single column layout. The avatars are moved to the right due to size constraints but the talking avatar image is still present on the left side like some vestigial organ. Anyway, the “content:none” style did the trick. Thanks.

    Reply
    1. Zeaks

      Post author

      I’ve never cared for Twenty Elevens comment styles. It looked nice for the first few minutes, then it was just annoying at how much space was wasted to make them fancy.

      I re-styled them in NomNom to look like these ones, but left the option to show the old ones.

      Reply
  2. Himadri

    Hello,
    I want to change the comment box of my web blog but cannot getting any suitable code to edit this.Please suggest me.

    Reply
  3. George

    I’m using your TwentyEleven-Layouts theme. Which is great by the way for a three column layout.
    I’ve tried everything available on the web to remove the website field in the comment box without success.
    Can you please tell me how to get rid of it?
    Thanks

    Reply

Leave a Reply