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;
}

Comments

  1. says

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

  2. says

    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

    • says

      This should be added to a child theme, it’s meant to modify the existing comment code not replace the comment CSS. This code is a bit old, things may have changed with Twenty Eleven since the post was created, let me know if you have any problems with it.

      • says

        Thanks for the quick reply. Currently I’m using twentyeleven now n I dont change it in child theme, but I must try this because I want my twentyeleven comment theme style look great. Thanks Zeaks!

Leave a Reply