WordPress.org

Forums

[resolved] How to Style all levels of threaded comments with same font size (13 posts)

  1. readwriteandedit
    Member
    Posted 4 years ago #

    Looking for help styling threaded comments. I want all levels to use the same size font. Right now, successive levels have fonts each larger than the last. I'm not sure how to adjust my style sheet.

    I tried

    .commentlist li ul li {
    font-size: 1em;
    }

    as someone suggested on another thread here, but that changed nothing. I'm guessing I need to account for children or parent or the 5 levels of comments in some way. I tried quite a few combinations of the above style code, adding .children, but I get no change in the size of my font.

    Site is wombatwisdom. A post with the levels of threaded comments is Blog is Open.

    Thanks for the help.

  2. Joseph
    Member
    Posted 4 years ago #

    Use this:

    div#single-body ol li li {
        font-size: 1em;
    }
  3. Root
    Member
    Posted 4 years ago #

    I would use

    #selector ol li ol li {
             font-size: 1em
    }
  4. Joseph
    Member
    Posted 4 years ago #

    Threaded comments are unordered lists inside ordered list so that won't work.

  5. moshoodo123
    Member
    Posted 4 years ago #

    @readwriteandedith. i dont have an answer but will like to ask you a question please, can you please tell me which plugin did you use to style your post? i have been looking to make my post look like that for long. i mean plugin thats gives your each post a header and read more button.

    regards

  6. miocene22
    Member
    Posted 4 years ago #

    maybe just use

    .commentlist li{
    font-size:1em;
    }

    this selects all the li elements, regardless of whether it's in a ul or ol.

    You also seem to have many conflicting selectors in your stylesheet like .comment-body p, div#single-body ol li and div#single-body ul li etc that all specify font sizes. This is a bad idea. Just define the font size for everything at once and then specify sizes for sub-elements after like .comment-meta etc.

  7. Root
    Member
    Posted 4 years ago #

    well in that case do

    ol li ul li

    simple descendant selectors

  8. readwriteandedit
    Member
    Posted 4 years ago #

    Thanks for the tips. I'll try each.

    Moshoodo 123, there is no plugin for styling. This is the PressPlay theme and the styling is all in the style.css that came with it.

  9. readwriteandedit
    Member
    Posted 4 years ago #

    Miocene22, I'm not sure about the selectors or why they're styled as they are. This was the stylesheet that came with the theme; I've only tweaked it a bit. I'll try first what you suggested, though I think that was one I tried.

    I only know a little about CSS so this is all guesswork to me.

  10. readwriteandedit
    Member
    Posted 4 years ago #

    Joseph, that div#single-body code worked. Thank you. I'm not sure if it will affect other lists anywhere else, but it took care of this.

    I'm not sure why .comment-list li didn't style the threaded comments. I thought that was exactly what it was for.

    Thanks for all the help.

  11. Root
    Member
    Posted 4 years ago #

    ahhhhhhhhhhhhhhhhhh
    dont all the nested comments have a ul class of children ?

    ul.children {} etc

  12. readwriteandedit
    Member
    Posted 4 years ago #

    Root, they do indeed have children. I tried a couple of options using children, but maybe I didn't get it exactly right. I may try that route again, since it should work. (And I so dislike not being able to make something work that should work.)

    Thanks for following up. I appreciate the help and input.

  13. readwriteandedit
    Member
    Posted 4 years ago #

    Root, just in case you're still following this:

    The styling for threaded comments should be
    ol.commentlist li.comment ul.children li.comment {}
    or a variation thereof.

    I say should be because I couldn't get any variation of this to change the font size in my threaded comments.

    The simplest ul.children did nothing. ul.children li did nothing. And so on. I even tried styling a specific level of comment with ol.commentlist li.comment ul.children li.depth-2, since I had comments of that level, but I saw no change in the font size.

    If anyone else has an answer as to why the commentlist styling didn't work, I'm sure that would help us all out. At this point, I'm going with Joseph's suggestion using div#single-body since that did work.

    Once again, thanks to all.

Topic Closed

This topic has been closed to new replies.

About this Topic