How to style WP 2.7 threaded comments

cdharrison:

Beautiful! Thanks so much for this. Spent almost an hour looking for styling techniques!

I’ll post some additional designs to get folks started by this weekend. I know what I’ve posted can definitely be improved upon.

@cdharrison: Thanks a lot for the CSS example! But how would you integrate such CSS with the comments.php file?

Nice reply on your site, cdharrison! ?? Thanks

cdharrison,

You saved me a metric ton of work; my CSS is horrible.

Much thanks!

Do you think we will soon have a clear guide on how to customize the comments page? It seems that I will need to modify the core WordPress files to do what I could do by simply modifying comments.php on WP 2.6

Are we going backward with WP 2.7 or what?

It seems that I will need to modify the core WordPress files

Why would you need to do that, exactly? You need to be specific as to what you want to do before we can tell you the right way to do it.

Well, I want to modify the whole CSS, want to have a .png “under” my avatar, want to resize my avatar, etc.

cdharrison gave a clear and easy CSS but with it I can’t modify avatar size, as an example, without modifying WP 2.7 core files.

Well, maybe I am missing something, but as easy it was to customize 2.6 and below as difficult it seems to be with 2.7

avatar_size is one of the parameters you can pass to wp_list_comments(). No core editing needed. Just edit the theme.

wp_list_comments(array(
'avatar_size'=>48,
'other_parameter'=>'whatever',
));

And so forth. I’m not quite sure what you mean by adding a png under your avatar though. You could probably add it with a filter, but I’d need really specific info to tell you how to do it.

There’s very little about the generated comments that is not easily customizable. It’s just a different way of customizing them.

Hmm… Do you mean I could do something like:

wp_list_comments(array(
'avatar_size'=>48,
'ol.commentlist li.comment-author-admin'=> {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard { font:normal 16px georgia,times,serif; }
));

etc.?

I need to find an easy way to modify the CSS. Modifying the image size is only one part. As I said, maybe I missed something, but it seems to me that WP2.6 was easier to customize.

If a clear guide could get out for 2.7 that would be really useful, as for now I don’t know how to customize comments like on 2.6 AND thread the comments.

No, that’s not correct at all. Any and all CSS goes into your style.css file, not into the comments.php.

Do you know anything about what CSS is and how it works? It does not go in your PHP files.

Might want to read up on some basics: https://www.csstutorial.net/

Also Theme Development might be useful for you .

As far as 2.7 goes, customizing the comments is much easier than it was in 2.6, because with only a few minor exceptions, you mostly do it by simply adding or modifying the CSS file.

If you understand PHP, this explains the differences between the old style comments.php and the new 2.7 style:
https://ottodestruct.com/blog/2008/09/29/wordpress-27-comments-enhancements/

Maybe I was not clear enough.

In WP 2.6 it was easy to customize comments.php because it was possible to add ol li ul etc. inside the loop. Now, it is not possible to do this with 2.7.

Try to add <li class=”xxx” > in comments.php now… It is more difficult.

I am still looking for an easy way to customize my comments.

p.s. I know where CSS file should be. Thank you. I had no problem customizing with WP 2.6 simply by adding to the loop.

In WP 2.6 it was easy to customize comments.php because it was possible to add ol li ul etc. inside the loop.

Okay, but what you’re not answering is:
a) Why do you want to do that in the first place?
b) Where do you want to put this extra code?

The answer to question A is the most important part here, really, because if you’re changing the way the XHTML output is, then you’ve probably already done it wrong. This is supposed to be the semantic web here, your HTML code should be considered a fixed thing. You don’t change it to make it LOOK different, you only change it to make it have different CONTENT. Looks can almost always be done through CSS manipulation.

But if you really DO need to have the HTML output differently, then how I tell you to do it very heavily depends on specifically what changes you want to make. As in, what code, exactly, do you want added where? It’s not a matter of making any old random change you like, because 99% of the time, you really should not be messing with the actual HTML in the first place.

In fact, changing the HTML is counter-productive and more likely to hurt your search engine rankings in the long run. If every site uses similar HTML for comments, say, then search engines can optimize for that format. Therefore using a different format will hurt you. See?

Now, it is not possible to do this with 2.7.

It IS possible to do this, in very specific and fixed ways. And if you need absolute control for some insane reason, there is always the callback functionality.

Try to add <li class=”xxx” > in comments.php now… It is more difficult.

I’ll use this as an example. What do you mean by add <li class=”xxx”>? Do you want to add a new class to the LI’s which wrap the comments? Like “xxx”? Well, that’s easy:

// add an xxx class to all the comments
function comment_add_xxx($classes) {
	$classes[] = 'xxx';
	return $classes;
}
add_filter('comment_class','comment_add_xxx');

Done. See the difference between this method and the old approach? This method lets you modify specific pieces in specific ways without leaving spaghetti code all over the theme.

The long-term idea is to decouple your changes to the core code AND to the theme. Because much like you can auto-upgrade plugins, soon you’ll be able to auto-upgrade THEMES. So it’s not a good idea to change the theme directly either, in the long run.