WordPress.org

Ready to get started?Download WordPress

Forums

How to style WP 2.7 threaded comments (45 posts)

  1. baal666
    Member
    Posted 5 years ago #

    Hi,

    I'd like to style WP2.7 threaded comments. So far I have been able to set odd and even colors, but how can I customize them more?

    I've tried Jeremy's callback function but it didn't work.

    Anyone has any idea how to do the trick?

    Thanks

  2. Chris Harrison
    Member
    Posted 5 years ago #

    <ins>I posted about this on my site: Stylizing Threaded/Nested Comments in WordPress 2.7</ins>

    Here's the structure for ol.commentlist so far... (I'm sure I'm missing something here, but this should be the meat of it.)

    1. ol.commentlist {}
      • ol.commentlist li {}
        • ol.commentlist li.alt {}
        • ol.commentlist li.bypostauthor {}
        • ol.commentlist li.byuser {}
        • ol.commentlist li.comment-author-admin {}
        • ol.commentlist li.comment {}
          • ol.commentlist li.comment div.comment-author {}
          • ol.commentlist li.comment div.vcard {}
            • ol.commentlist li.comment div.vcard cite.fn {}
              • ol.commentlist li.comment div.vcard cite.fn a.url {}
            • ol.commentlist li.comment div.vcard img.avatar {}
            • ol.commentlist li.comment div.vcard img.avatar-32 {}
            • ol.commentlist li.comment div.vcard img.photo {}
            • ol.commentlist li.comment div.vcard span.says {}
          • ol.commentlist li.comment div.commentmetadata {}
          • ol.commentlist li.comment div.comment-meta {}
            • ol.commentlist li.comment div.comment-meta a {}
          • ol.commentlist li.comment {} - (p, em, strong, blockquote, ul, ol, etc.)
          • ol.commentlist li.comment div.reply {}
            • ol.commentlist li.comment div.reply a {}
          • ol.commentlist li.comment ul.children {}
            • ol.commentlist li.comment ul.children li {}
            • ol.commentlist li.comment ul.children li.alt {}
            • ol.commentlist li.comment ul.children li.bypostauthor {}
            • ol.commentlist li.comment ul.children li.byuser {}
            • ol.commentlist li.comment ul.children li.comment {}
            • ol.commentlist li.comment ul.children li.comment-author-admin {}
            • ol.commentlist li.comment ul.children li.depth-2 {}
            • ol.commentlist li.comment ul.children li.depth-3 {}
            • ol.commentlist li.comment ul.children li.depth-4 {}
            • ol.commentlist li.comment ul.children li.depth-5 {}
            • ol.commentlist li.comment ul.children li.odd {}
        • ol.commentlist li.even {}
        • ol.commentlist li.odd {}
        • ol.commentlist li.parent {}
        • ol.commentlist li.thread-alt {}
        • ol.commentlist li.thread-even {}
        • ol.commentlist li.thread-odd {}

    It needs some work, but hopefully this will help to get you started. Here is some of the CSS I am using on my site [Example]:

    ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
    ol.commentlist li { }
    ol.commentlist li.alt { }
    ol.commentlist li.bypostauthor {}
    ol.commentlist li.byuser {}
    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; }
    ol.commentlist li.comment div.vcard cite.fn { font-style:normal; }
    ol.commentlist li.comment div.vcard cite.fn a.url {}
    ol.commentlist li.comment div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
    ol.commentlist li.comment div.vcard img.avatar-32 {}
    ol.commentlist li.comment div.vcard img.photo {}
    ol.commentlist li.comment div.vcard span.says {}
    ol.commentlist li.comment div.commentmetadata {}
    ol.commentlist li.comment div.comment-meta { font-size:9px; }
    ol.commentlist li.comment div.comment-meta a { color:#ccc; }
    ol.commentlist li.comment p { font-size:11px; margin:0 0 1em; }
    ol.commentlist li.comment ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
    ol.commentlist li.comment div.reply { font-size:11px; }
    ol.commentlist li.comment div.reply a { font-weight:bold; }
    ol.commentlist li.comment ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
    ol.commentlist li.comment ul.children li {}
    ol.commentlist li.comment ul.children li.alt {}
    ol.commentlist li.comment ul.children li.bypostauthor {}
    ol.commentlist li.comment ul.children li.byuser {}
    ol.commentlist li.comment ul.children li.comment {}
    ol.commentlist li.comment ul.children li.comment-author-admin {}
    ol.commentlist li.comment ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
    ol.commentlist li.comment ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
    ol.commentlist li.comment ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
    ol.commentlist li.comment ul.children li.depth-5 {}
    ol.commentlist li.comment ul.children li.odd {}
    ol.commentlist li.even { background:#fff; }
    ol.commentlist li.odd { background:#f6f6f6; }
    ol.commentlist li.parent { border-left:5px solid #111; }
    ol.commentlist li.thread-alt { }
    ol.commentlist li.thread-even {}
    ol.commentlist li.thread-odd {}
  3. johnkolbert
    Member
    Posted 5 years ago #

    cdharrison:

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

  4. Chris Harrison
    Member
    Posted 5 years ago #

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

  5. baal666
    Member
    Posted 5 years ago #

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

  6. baal666
    Member
    Posted 5 years ago #

    Nice reply on your site, cdharrison! :) Thanks

  7. cdharrison,

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

    Much thanks!

  8. baal666
    Member
    Posted 5 years ago #

    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?

  9. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  10. baal666
    Member
    Posted 5 years ago #

    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

  11. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  12. baal666
    Member
    Posted 5 years ago #

    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.

  13. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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: http://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:
    http://ottodestruct.com/blog/2008/09/29/wordpress-27-comments-enhancements/

  14. baal666
    Member
    Posted 5 years ago #

    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.

  15. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  16. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  17. baal666
    Member
    Posted 5 years ago #

    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

  18. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

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

  19. baal666
    Member
    Posted 5 years ago #

    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.

  20. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  21. baal666
    Member
    Posted 5 years ago #

    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

  22. baal666
    Member
    Posted 5 years ago #

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

  23. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  24. baal666
    Member
    Posted 5 years ago #

    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

  25. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  26. baal666
    Member
    Posted 5 years ago #

    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!

  27. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  28. Dgold
    Member
    Posted 5 years ago #

    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.

  29. baal666
    Member
    Posted 5 years ago #

    @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

  30. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic