Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Sandbox - coding threaded comments, post author

  1. vivianpaige
    Member

    I'm trying to make some changes due to the threaded comments and I simply am not having any luck on a couple of things.

    First, it seems that a comment with a reply has a different setup that a comment without one but I can't figure out which element needs to be changed. Take a look here. Note that I have put the Reply link on the right. Where there is a threaded comment after it, the link appears in the wrong place, overlapping the line a the top of the next comment.

    The second part is that I have carefully coded the hover (the top line goes from 1 pix to 3 pix) to keep the screen from jumping. Since I can't figure out which element(s) I need to change, the hover results in a jumping screen.

    Finally - because the threaded comments allow the background to bleed through, I've done away with backgrounds on comments. However, I still want to differentiate my comments from the others. What I'd like to do is have my name show up in a different color. Again, I can't figure out the proper element (has to be something with bypostauthor in it) to get that changed.

    Any help would really be appreciated.

    The blog I need help with is blog.vivianpaige.com.

  2. gwideman
    Member

    Couple of ideas:
    1. Comments with replies have those replies contained in a ul with class "children".

    2. I futzed around in Firebug, adding clear:both:

    .commentlist li {
    clear: both; <--- added
    }

    That seemed to fix the spacing following the "Reply" link. However, in Firebug the clear: both then disappeared, yet still seemed to be in effect -- very odd.

    ... had to quit working on this puzzle, but maybe that's at least a start.

  3. vivianpaige
    Member

    Ah - that seems to have taken care of the reply spacing and the jumping - thanks!

    Now to continue trying to figure out how to have my name show up in a different color. (I put the background color back on the comments for the posters and now have just mine in white.)

  4. gwideman
    Member

    If you literally mean you want your author name ("vjp") to be a different color, how about:

    .bypostauthor .comment-author {
    color: red;
    }

    ... or somesuch?

    BTW, I see that posts are classed with both "bypostauthor" and "comment-author-vivianpaige", which have the same effect if you're the only post author, but offer different effect if you have multi authors.

  5. vivianpaige
    Member

    Yep. Trying to change the vjp to another color. The first option you gave .bypostauthor .comment-author doesn't have any effect. I also tried .comment-author-vivianpaige and it affects the comment itself and not the author name.

    But you led me down the correct path, as this works:

    .bypostauthor .comment-author  a {
color:#F4783E;
font-weight:bold;
}

    Thanks!

  6. vivianpaige
    Member

    OK, so that's not working after all. When someone responds to me, their name is in orange, too.

    I'll keep tinkering.

  7. vivianpaige
    Member

    I think this fixed it:

    .bypostauthor .comment-author {
color:#00458E;
font-weight:bold;
}

.bypostauthor .comment-author a {
color:#F4783E;
font-weight:bold;
}

    Although I have no idea why.

  8. gwideman
    Member

    Hmmm, I see the problem, and I think it's still there. My original bright idea was to rely on the containing li.bypostauthor to select only contained div.comment-author instances for the special color. However, that will *also* impact div.comment-author instances that belong to replies of other people, if they are contained anywhere within li.bypostauthor -- ie: any replies to vjp comments.

    Adding the "a" adds some further confusion -- it overrides less specific "a" styling, so that's desirable. And it sometimes distinguishes div.comment-author instances, inasmuch as your own account has a link, while *some* of your commenters do not. However, I think if a commenter with a link replies, their name is going to get the orange treatment.

    Right now I don't see a way around this. The "right" way would be to use the ">" selector to be more precise about selecting the nesting li.bypostauthor > [precise tags] > div.comment-author for special color, but I believe ">" is not supported by all browsers.

    I also see there's a bug in Sandbox where it's cranking out redundant copies of class strings, as in:

    li id="comment-145153" class="comment byuser comment-author-vivianpaige bypostauthor even thread-even depth-1 comment c2 byuser commentauthor-vivianpaige bypostauthor c-y2009 c-m02 c-d17 c-h05">

    ... where several of the class names are repeated. But probably not harmful nor relevant to the current situation.

  9. otto42
    Member

    For sandbox-10, you can reference the comment-author link directly on post authors only by styling this:
    .bypostauthor>div>div>div.comment-author a

    The > makes it only reference the immediate children and not the subchildren later.

  10. otto42
    Member

    Alternately, ".bypostauthor div.vcard > div.comment-author a" would probably also work.

  11. gwideman
    Member

    otto42: Right, but AFAIK child selector ">" is not implemented in IE6 and before.

  12. vivianpaige
    Member

    I also see there's a bug in Sandbox where it's cranking out redundant copies of class strings, as in:

    li id="comment-145153" class="comment byuser comment-author-vivianpaige bypostauthor even thread-even depth-1 comment c2 byuser commentauthor-vivianpaige bypostauthor c-y2009 c-m02 c-d17 c-h05">

    ... where several of the class names are repeated. But probably not harmful nor relevant to the current situation.

    I didn't know what I was seeing but I saw this too. Which was why I was having so much trouble trying to figure out the styling.

    Alternately, ".bypostauthor div.vcard > div.comment-author a" would probably also work.

    Will this work in the older version of Sandbox? Or should I be trying:

    The "right" way would be to use the ">" selector to be more precise about selecting the nesting li.bypostauthor > [precise tags] > div.comment-author for special color, but I believe ">" is not supported by all browsers.

    I really don't care about IE6 or before. What goes into that [precise tags] box?

  13. gwideman
    Member

    >What goes into that [precise tags] box?
    One or more "paths" similar to what otto42 showed, with the basic idea that to be selective enough about the target element you want to color you have to specify its precise parentage back to the element that shows it's by you.

    You probably know this, but in case not:

    xxx yyy { } means select any yyy somewhere within an xxx.
    xxx > yyy { } means select a yyy which is an immediate child of an xxx.

    So, Firebugging away... looks like

    li.bypostauthor>div>div>div.comment-author>a

    ... should be precise enough. Probably otto42's suggested:

    .bypostauthor>div>div>div.comment-author a

    also is close enough, unless any other "a" tags can occur within a div.comment-author.

    And one might need some extra fudging to make sure your selector beats any :link and :visited styling (which it appears has higher priority in IE7 vs FF3, so extra testing required.) Eg:

    li.bypostauthor>div>div>div.comment-author>a:link,
    li.bypostauthor>div>div>div.comment-author>a:visited { your stylin' }
    ... or similar.

  14. vivianpaige
    Member

    Nope, I didn't know that. Everything I know about CSS has been trial and error, mainly. I'll give this a go and see how it turns out. Thanks for the help!

  15. devblog
    Member

    I see your name in orange. I take it your solved this?

  16. vivianpaige
    Member

    Nah - just haven't had time to get back to it. I need to try the stuff above to see if it works but I also need at least 3 more hours in my day :(

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags