Posted 11 months ago #
Hi, how can I modify the comments in WP 2.7 ?
I want to move the avatar, name and date out of the comment box in the default theme.
Any ideas in how to style them ?
Better if its not the core files, as in every update I will have to re edit, thing that its not the best, but if thats the only way, please share too.
Thanks.
Posted 11 months ago #
You don't have to modify the core files but you do need to update your theme's comments.php to use the new comment features.
Read up Otto's post here for instructions on how to implement threaded and paged comments in your theme. The instructions are really good and I was able to implement them on my site just by reading that post.
Read Chris Harrison's post here on CSS styling the comments. He has a couple of other really useful posts there too on this topic, it's all good.
Now if you want to fully control how the comments look, placement of DIVs etc. then head over to Jeremy's post on implementing a callback.
He's talking about the default theme, so I think it's probably already good for the new features.
Generally, when I want to play with styling, I use the Web Developer plugin for Firefox. This lets me change the stylesheet and see my changes in real time. Then, when I have it the way I want, I copy the whole stylesheet and paste it over my old one.
Posted 11 months ago #
Yes, I am talking of WP 2.7 with the default theme in a fresh install.
I can style a bit that way, but I can't alter the structure, for example having the avatar outside the comment box.
Is there a work around ?
Thanks.
Most things you can do via CSS. Some things require some minor filtering code. But without seeing your site and having more specific detail on what you want, it's difficult to say exactly how to do it.
Posted 11 months ago #
Hi Otto.
I have it locally so I cant share a link, but its easy.
WP 2.7, default theme, fresh install. Thats where I am starting.
Thanks.
Well, again, without specific details, I can't give you anything other than generalities.
I mean, if you want to move the avatar up 50 pixels, you could do this:
.avatar {
position: relative;
top:-50px;
}I need to know exactly what you want to do in order to tell you how to do it. I mean *exactly*. You want to move the avatar around, great. Where to?
Here's the thing, you talk about wanting to move the avatar outside the comment box, but you don't need to alter the structure of the underlying HTML to do that. You don't need to alter the underlying structure of the HTML to move anything anywhere, because the HTML does not define layout in any way whatsoever. Or, at least, it shouldn't. So you're not making a whole lot of sense to me, and thus I'm unable to answer in any great detail here.
Posted 10 months ago #
Thanks Otto, fair enough.
Here it is what I have in mind. I thought the structure needed to change to modify it like that, it seems I was wrong.
So how to chenge it then ?
Thanks again.
Hmm. Yeah, okay. A little beyond my pay grade, but I'll give it a shot.
Starting with the default theme, the first thing to do is to get the avatar back over to the left. Find the .commentlist li .avatar and change the float from right to left. While we're at it, lets adjust the border to give it that gray edge thing and curve the corners a bit (Firefox only, but what the heck):
.commentlist li .avatar {
float: left;
border: 3px solid #ccc;
padding: 2px;
background: #ccc;
-moz-border-radius:6px;
}Next, you want to eliminate the special background colors on the .commentlist bits, along with the lines between them. There's some business with the .alt that you will want to check for too. Just find and eliminate the css that's giving it those background colors.
We want to jazz up the comment text a bit, so let's pad it around a bit and give it a new background color, as well as some slightly less curvy corners:
.commentlist p {
margin-top:30px;
background: #ccc;
padding:10px;
-moz-border-radius:4px;
}If you want a gradient like in your example, you'll probably need to use an image for the background instead. Same goes for the up arrow thingy.
That text seems awfully close to the avatar though. Let's push it right 10 pixels or so:
.commentlist cite, .commentmetadata a {
margin-left:10px;
}I think you get the idea at this point. Just move things around until you get the look you want.
Note that doing this is all a lot simpler with a good tool. I like to use the Web Developer plugin for Firefox. It lets me edit CSS on a live webpage and see the changes as I make them. Then I can copy/paste my changes into the CSS file to make them permanent.
Posted 4 months ago #
I know this thread is months old, but the answer was not provided yet.
To answer the original question, you can edit the structure of the comment loop in the file
/wp-includes/comment-template.php
Be careful when editing this file as it is techincally outside of the template folder and is more of a hack than a customization.
Posted 2 weeks ago #
oh noes.
why is it that complicated just to change the comments structure? :\
You must log in to post.
