site banner

Friday Fun Thread for January 20, 2023

Be advised: this thread is not for serious in-depth discussion of weighty topics (we have a link for that), this thread is not for anything Culture War related. This thread is for Fun. You got jokes? Share 'em. You got silly questions? Ask 'em.

1
Jump in the discussion.

No email address required.

I figured I'll put it here, since the custom CSS thread is buried, and I don't know how much traffic the meta thread is getting.

Reddit-like branching comment structure has it's advantages and disadvantages. I like it for the most part, if some comment gets a lot of replies from different people, it makes it a lot easier to navigate conversations. However, I hate it when people get into one-on-one conversations. Not the conversations themselves, these can be very interesting, but there's something about the stacking indentation that drives me nuts.

So I thought, would it be possible to have the comments branch out, but only when they have sibling elements? Turns out that yes, and it's achievable with simple CSS. Compare:

Here's the code, if you like it (I'm using the "reddit" theme, the precise values for width and translation may vary for you):


.comment.anchor:only-child {

  transform: translate(-24px);

  width: calc(100% + 24px);

}


/*** Mobile ***/

@media (max-width: 767.98px) {

.comment.anchor:only-child {

  transform: translate(-14px);

  width: calc(100% + 14px);

}

}

You can add it in your profile settings

How did you get the lines on the left to show up with the "reddit" theme? And do you have a fix for the line between top-level comments as well?

How did you get the lines on the left to show up with the "reddit" theme?

Oh, that's custom css as well:


.comment-collapse-bar-click {

    border-right: 2px solid grey;

}

And do you have a fix for the line between top-level comments as well?

Not sure what you mean? Is that on my screenshot, or happens to you when you use my css? Can you post a pic showing what you mean?

Not sure what you mean? Is that on my screenshot, or happens to you when you use my css? Can you post a pic showing what you mean?

These lines separating the top-level comments in the default "TheMotte" theme are not visible with "reddit". With my minimal knowledge of CSS and some experimentation, I have determined that this fixes the problem:


.comment-section > .comment ~ .comment {

	border-top: 1px solid grey;

}

Oh, that's custom css as well:

This snippet appears to create another bar slightly to the right of the bar seen in "TheMotte". With "reddit", only the new bar is visible. Personally, I prefer the original bar on the left. This makes the original bar visible instead:


.comment .comment-collapse-bar {

	border-right: 2px solid grey;

}

So I ended up not using your original snippet, but it helped me make my own custom CSS. Since, as I said, my knowledge of CSS is minimal, I didn't even know where to start before this. Thanks!

Interesting, I find the consistent tree structure more intuitive than the sibling only branching screenshot. Props to customization

I figured it wouldn't be for everyone. When I got the idea I wasn't sure if I will like it in standard cases, but I got used to it pretty quick.

Then in extreme cases (8-level deep comment chains) it spares me from going into frothing-at-the-mouth rage, so seems like a clear win.