How to style WP 2.7 threaded comments

Hi Otto,

Ok let’s say I want to use different classes. Does it mean I will have to run the code above for each and different classes?

Let’s say I want to change background color, add two particular png images line above and below comment, add an image behind the avatar, change avatar size, replace “Says” by something else, change the date format… well that was easy as 1-2-3 with previous WP.

Now I don’t even know where to start. I searched on the web and people seemed confused about something as simple as replacing “Says” by something else. And I’m not talking about addind the different classes…

I don’t see yet how WP 2.7 is suppose to be simple. Of course, I want to believe it is, but been unable to do what I want to do (see above) I sometimes think I’d need to go back to 2.6 or wait for 2.8 or until someone has made a clear FAQ about how to customize comments.php

BTW, I am not an expert. I’m just the usual guy trying to customize a bit his comments and I really don’t understand how to do now what I used to do with 2.6

;Ok let’s say I want to use different classes. Does it mean I will have to run the code above for each and difference classes?

No, it will mean that you will customize your code to do what you want it to do. That one function could just as easily add a dozen classes, based on any sort of criteria it wanted. I just wrote it to add only one.

Now I don’t even know where to start.

Well, you start by taking it one thing at a time and asking one question at a time.

I searched on the web and people seemed confused about something as simple as replacing “Says” by something else.

2.7 is still beta, and as things have changed, people have asked questions about it, and so on. For a long time, there was no way to adjust the avatar size, for example. Until I made a patch to do it and got it included in the code.

Remember, 2.7 is not even finalized yet. Expecting everything to be all answered and laid out when it’s still being actively developed is asking a bit much, don’t you think?

I don’t yet see how WP 2.7 is suppose to be simple.

Of course not. You are used to editing things directly instead of indirectly. That’s understandable. It is a different way of looking at things, so it will take you time to learn it.

I want to change background color, add two particular png images line above and below comment, add an image behind the avatar, change avatar size, replace “Says” by something else, change the date format…

One thing. One change. Let’s work it one step at a time.

Background color can be changed via CSS.

Avatar size I already gave you above. Just add the avatar_size parameter to your wp_list_comments call. The size you give it is the size of a side in pixels.

I have no idea what you mean by adding an image behind the avatar. I suspect you want to use CSS to give the avatar some more margins and then give it a background-image, but regardless, that’s pure CSS.

Ditto on the images, probably some kind of background-image thing. I can’t be specific without details.

“Says” cannot currently be easily replaced, as such, but you can use CSS to hide it or make it not show up (display:none).

Date and time display in comments can be altered by adding filters to get_comment_date and get_comment_time.

Thanks for your explanation.

But let’s say that I want to customize the comments.php (that’s the matter, after all), do I use cdharrison CSS or do I use your code above?

And if I want to add the image behind the avatar, how would you do it with that “different way of looking at things”. I used to simply add a reference to a class “.gravatar_align” and that was it. Now I just don’t understand how to do it.

Ok, I will try to use the code above

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

(replacing xxx by .gravatar_align)

but then do I put the code again and again for each class? If I have let’s say 10 classes to add?

Sorry again, maybe this is clear to you (or to others reading) for to me this is complicated.

But let’s say that I want to customize the comments.php (that’s the matter, after all), do I use cdharrison CSS or do I use your code above?

… That doesn’t make any sense. Those two things are independent of each other entirely.

Look, you keep saying things like “customize comments.php” as if that was one thing that had only one way to accomplish. It’s not. What exactly do you want to customize? It’s not “comments.php”, because that is a BIG thing. Name a LITTLE thing that you want to do. Break down this “customize comments.php” idea that you have into several dozen little ideas instead.

For some things, you’ll add code to the functions.php file (or directly into comments.php). For other things you’ll add a couple styles to your stylesheet. But how you do it depends on what the heck it is that you’re doing… And by that I mean the LITTLE thing that you’re doing. Not the big one.

And if I want to add the image behind the avatar, how would you do it with that “different way of looking at things”. I used to simply add a reference to a class “.gravatar_align” and that was it. Now I just don’t understand how to do it.

Well, first off, you were doing it wrong to begin with. You don’t add classes to things to make them style the way you want them. You add styles to things that already have classes.

From what you say, you already have some kind of style that is called .gravatar_align. I assume that you want this to apply to the avatar images themselves? Orr do you want them to apply to the surrounding LI? What exactly does the style DO? You don’t say what “gravatar_align” does at all.

See, in almost all cases, you don’t want to add classes to things. Things already have all the classes they’ll probably need. You need to change the stylesheet to use those already-existing classes.

Avatars already have a class: “avatar”. So if you want to style it, then add the .avatar to your style.css and style it as you see fit.

Otto:

Here is the class I used to had working with the old WP2.6:

.avatar {
background: url(i/image.png) no-repeat top center;
display: inline;
float:right;
margin: 0 0 2px 8px;
	padding: 7px 12px 17px 7px;
	width: 50px;
}

How would you make that work with new Wp2.7?

I hope that understanding this will help me with the other changes I want to do e.g. adding a line between comments, etc.

Thanks

I tried this but for some reason the background image did not show up correctly.

Without knowing how your old html looked, I can’t tell you what changes to make. CSS is custom to the page itself, it’s something you have to specify directly. You can’t just pick and choose pieces and use them and move them around and rename them and expect things to work.

Work specific to the code you have. Don’t try to adapt the old CSS, write new CSS.

Hmm… Can you give me an example of what would work? I simply want to add an image behind the avatar, and I tried the CSS above (only an example; of course I would write a new one that would fit). What would you do?

Thanks

I can’t help you with specific CSS because I can’t see the site you’re working on. However, this will do something along the lines of what you want:

.avatar {
background-image: url(image.png);
padding: 8px;
}

I tested it, it works fine for me. If you want it to float to the right and such, or have variable padding, then that’s something else. But that is enough CSS to stick an image behind the avatars.

Thank you Otto. I will try to work on something. Just a last question for now (I swear): how would you add an image to the top of the comment AND to the bottom of the same comment. I tried to do it but it seems I can’t add two images in the same class. How would you do this?

Thank you very much!

I’d use a callback to add a header and footer div, which I’d then style appropriately.

Alternatively, I’d use a background image which contained the footer and then the header on top of each other, put it on the comment, and then use negative padding at the top to push it up into the comment above it.

However, generally speaking, I wouldn’t do that. Image backgrounds are usually a bad idea, except in small doses.

Thanks for the thread.

Anyone know if you can style Intense Debate comments in a similar way? I tried that plugin briefly, just to get the idea of what they do & what threaded comments will look like.

I disabled Intense Debate comments for now, and will probably wait for WP 2.7 and styling the threaded comments per instructions in this thread.

@otto: I want to add a small image above and another small one below to make a box with rounded corners, that’s what I’m trying to do.

To add this with the callback function, is that correct:

function comment_add_top($classes) {
	$classes[] = 'top';
	return $classes;
}
add_filter('comment_class','comment_add_top');

then I do this one too for the bottom:

function comment_add_top($classes) {
	$classes[] = 'bottom';
	return $classes;
}
add_filter('comment_class','comment_add_bottom');

then I put in my css file:

.top{background-image: url(image.png);}
.bottom {background-image: url(image.png);}

Is this a good way to do it?

The other way, by using the “background image which contained the footer and then the header on top of each other, put it on the comment, and then use negative padding at the top to push it up into the comment above it.”, how would you do this… is it possible to put two background image in the same class/div?

Thanks

Is this a good way to do it?

No, because one will simply take precedence over the other.

is it possible to put two background image in the same class/div?

Yes, in CSS3. But only the WebKit engine supports it at the moment (Safari and Chrome). Firefox and IE won’t handle it yet.

You just put multiple url()’s separated by commas.
.divclass { background-image: url(test1.png), url (test2.png); }

Thanks, I will try this.

If I ever have to add another class, your function may not be very good as it can only add one class, if I understand well (BTW, the second code the first “top” should be replaced by “bottom”… typo). So unless I use the classes already available on WP 2.7 (as stated by cdharrison) it is my understanding that I will be limited to those and only one more if I use your hack.