how to make comments more compact in Twenty Eleven?

  • The comments section in Twenty Eleven is really spread out, and I’d like to tweak the CSS so it’s more compact. Here is a page on my site with a few comments, so show how they’re currently spread out (scroll down to the bottom):

    https://www.asherworldturns.com/bucket-list-perth-australia/

    I’d love to streamline the comments so they take up less space. Like when I reply to a comment, I’d like my name and the date to move up to the right of my avatar so it’s a better use of space / more compact. Also, can I expand the width of the comments section so that it has the same margins as my content column? The right side isn’t as wide as it could be.

    I haven’t had much luck attempting to fix it on my own. Any ideas on how to adjust CSS?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Look at this CSS I get looking quickly from your site:

    .sfw-commentlist .children li.sfw-comment {
    background: none repeat scroll 0 0 #FFFFFF;
    border-left: 1px solid #DDDDDD;
    border-radius: 0 3px 3px 0;
    margin: 1.625em 0 0;
    padding: 1.625em;
    position: relative;
}

    Look at the margin and padding properties, try with lesser values. I’d recommend using Firebug (Firefox addon) to try changes and seeing it live as you adjust your CSS, then copy the rules to your CSS files of the theme in your server to make those changes available to all the visitors of your site.

    Thread Starter AsHerWorldTurns

    (@asherworldturns)

    I tried to find that exact code but I don’t see “.sfw-commentlist”. This is the code area in my CSS that relates to comments:

    /* =Comments
----------------------------------------------- */

#comments-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	line-height: 2.6em;
	padding: 0 0 2.6em;
	text-transform: uppercase;
}
.nopassword,
.nocomments {
	color: #aaa;
	font-size: 24px;
	font-weight: 100;
	margin: 26px 0;
	text-align: center;
}
.commentlist {
	list-style: none;
	margin: 0 auto;
	width: 68.9%;
}
.content .commentlist,
.page-template-sidebar-page-php .commentlist {
	width: 100%; /* reset the width for the one-column and sidebar page layout */
}
.commentlist > li.comment {
	background: #f6f6f6;
	border: 1px solid #ddd;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 0 1.625em;
	padding: 1.625em;
	position: relative;
}
.commentlist .pingback {
	margin: 0 0 1.625em;
	padding: 0 1.625em;
}
.commentlist .children {
	list-style: none;
	margin: 0;
}
.commentlist .children li.comment {
	background: #fff;
	border-left: 1px solid #ddd;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	margin: 1.625em 0 0;
	padding: 1.625em;
	position: relative;
}
.commentlist .children li.comment .fn {
	display: block;
}
.comment-meta .fn {
	font-style: normal;
}
.comment-meta {
	color: #666;
	font-size: 12px;
	line-height: 2.2em;
}
.commentlist .children li.comment .comment-meta {
	line-height: 1.625em;
	margin-left: 50px;
}
.commentlist .children li.comment .comment-content {
	margin: 1.625em 0 0;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
.comment-meta a {
	font-weight: bold;
}
.comment-meta a:focus,
.comment-meta a:active,
.comment-meta a:hover {
}
.commentlist .avatar {
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px #ccc;
	-moz-box-shadow: 0 1px 2px #ccc;
	box-shadow: 0 1px 2px #ccc;
	left: -102px;
	padding: 0;
	position: absolute;
	top: 0;
}
.commentlist > li:before {
	content: url(images/comment-arrow.png);
	left: -21px;
	position: absolute;
}
.commentlist > li.pingback:before {
	content: '';
}
.commentlist .children .avatar {
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	left: 2.2em;
	padding: 0;
	top: 2.2em;
}
a.comment-reply-link {
	background: #eee;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #666;
	display: inline-block;
	font-size: 12px;
	padding: 0 8px;
	text-decoration: none;
}
a.comment-reply-link:hover,
a.comment-reply-link:focus,
a.comment-reply-link:active {
	background: #888;
	color: #fff;
}
a.comment-reply-link > span {
	display: inline-block;
	position: relative;
	top: -1px;
}

/* Post author highlighting */
.commentlist > li.bypostauthor {
	background: #ddd;
	border-color: #d3d3d3;
}
.commentlist > li.bypostauthor .comment-meta {
	color: #575757;
}
.commentlist > li.bypostauthor .comment-meta a:focus,
.commentlist > li.bypostauthor .comment-meta a:active,
.commentlist > li.bypostauthor .comment-meta a:hover {
}
.commentlist > li.bypostauthor:before {
	content: url(images/comment-arrow-bypostauthor.png);
}

    I tried playing with a few of the values in my Child Theme but it didn’t adjust the margins / padding at all. Any idea which specific values I should try changing?

    I’m also still looking for a way to adjust MY responses to comments, so that my name and the date float to the right of my avatar (like it does when other people comment). Again, here is the link to a post with comments at the bottom, to show what I’m talking about.

    I’ve checked again and the CSS formatting your comments area look coming from the Spam Free WordPress plugin you are running on, that’s the reason for the prefix.

    Try Firebug, it located quickly the file where the active CSS is. You’ll fall in love with it for customizing your CSS ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘how to make comments more compact in Twenty Eleven?’ is closed to new replies.