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

Product Support

AI-generated summary

Modifying the Users Column to Display Only One Avatar

ljpp wants to modify the Users column in a Discourse topic list to display only one avatar, representing the latest poster. cpradio provides a CSS solution:

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

This solution is further refined to adjust the width of the Users column:

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

and center align the avatar:

.topic-list .posters { width: 50px; min-width: 50px; text-align: center; }
.topic-list .posters>a { float: none; margin: 0; }

ljpp confirms that these solutions work and plans to implement them on a high-volume forum to improve the default layout. Additionally, ljpp and cpradio work together to eliminate the blue halo around the avatar and fix alignment issues.

In a separate suggestion, ljpp recommends reducing the vertical padding around topic rows to display more topics in the view:

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

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?

2

CSS Solution

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

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

4

Here ya go!

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

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

6

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

7

Just change

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

to

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

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

9

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

10

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

11

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

Time for a food break

12

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

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.

14

Theres a closed thread here…

https://meta.discourse.org/t/changing-or-removing-the-last-poster-avatar-highlight/27211

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

15

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

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.