Modify Users column to contain only one avatar (latest poster)

[ljpp]

I am currently running Sam’s Minimal theme, but I would like to experiment with the default layout again with only one change: I would want the Users catecory avatars reduced to only one, representing the latest poster.

Sorry if this has been asked before, but I could not find a code example by searching. Anyone done this and could share?

[cpradio]

CSS Solution

.topic-list .topic-list-item img.avatar:not(.latest) { display: none; }

[ljpp]

Thanks, it works great. However, there is a rather massive gap now in between the columns - How to adjust the width of Users accordingly?

[cpradio]

Here ya go!

.topic-list .posters { width: 50px; min-width: 50px; }

[ljpp]

Ok, someone is seriously rocking tonight! Looks pretty good now - time for some user feedback.

[ljpp]

Buggers, found one more imperfection - the other columns are aligned to center, but the avatars in Users are aligned to the left.

[cpradio]

Just change

.topic-list .posters { width: 50px; min-width: 50px; }

to

.topic-list .posters { width: 50px; min-width: 50px; text-align: center; }

[Mittineague]

Maybe targeting the a.latest instead of the td would be an easier approach?

[cpradio]

For what? If you want to align something, you have to target its parent to align the items within it appropriately.

[ljpp]

.topic-list .posters { width: 50px; min-width: 50px; text-align: center; }

I actually tried that already, but it does not seem to align the avatar as expected.

[Mittineague]

AH, OK, sorry. I missed comprehending what the current issue was. I was thinking it was a “collapse” thing

Time for a food break

[cpradio]

Ah, @ljpp that’s because the <a> tag around the avatar has a float. Here is how to fix it, also add this

.topic-list .posters>a { float: none; margin: 0; }

[ljpp]

And that solved it. I am guessing that renaming “Users” to “Latest” is a HTML level change, as with the Sam’s minimal theme.

I am going to utilize this on a high volume forum, where the default layout does not work well, as every thread reaches 5+ writers/avatars. So you get a massive wall of random color avatars on the index page.

[ljpp]

Theres a closed thread here…

Changing or removing the last poster avatar highlight

Here’s a thought for tweaking blur and radius: .topic-list .avatar.latest:not(.single) { box-shadow: 2px 4px 8px 2px #999999 } img.avatar { border-radius: 100px; box-shadow: 1px 3px 3px 0px #999999; } before [image] after [image] after (alt) and a slightly less radical proposal with no drop shadows on non-latest avatars: .topic-list .avatar.latest:not(.single) { box-shadow: 2px 4px 8px 2px #aaaaaa } [image]

…which does not actually show how to get rid of the blue halo around the avatar. That is obviosuly useless now, as we have sanitized the avatar count to one. I hacked my using Chromes developer tools and got rid of it, but when trying to apply the same via Discourse Customization it does not work. Also the highlighted avatar is misaligned for some reason.

Any ideas how to eliminate the halo and fix alignment.

[cpradio]

This looks to be close

.topic-list .posters a:first-child .avatar.latest:not(.single) {
  border: 0px solid transparent;
  top: 2px;
  left: 2px;
  box-shadow: 0 0 0 0;
}

[ljpp]

Here is one thing I suggest everyone to try. I have slightly reduced vertical padding around topic rows, to allow more topics in the view:

.topic-list th, .topic-list td { padding: 8px 5px;}

On my screen Discourse now features ~17 topics, which is comparable to Simple Machines Forum default theme (~19 rows). We have moved to Discourse from SMF, and my users have requested tighter layouts.