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

**URL:** https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716
**Category:** Support
**Created:** [1월 10, 2016, 9:54오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716 "2016-01-10T21:54:56Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [1월 10, 2016, 9:54오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/1 "2016-01-10T21:54:56Z")

</div>

I am currently running [Sam’s Minimal](https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552) 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?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [1월 10, 2016, 9:59오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/2 "2016-01-10T21:59:34Z")

</div>

CSS Solution

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

```

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [1월 10, 2016, 10:04오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/3 "2016-01-10T22:04:57Z")

</div>

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

![](https://global.discourse-cdn.com/meta/original/4X/8/3/3/833088789699e6f6db3c89e33c9c5f71a6a7bde1.png)

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [1월 10, 2016, 10:06오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/4 "2016-01-10T22:06:35Z")

</div>

Here ya go!

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

```

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [1월 10, 2016, 10:09오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/5 "2016-01-10T22:09:56Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [1월 10, 2016, 10:39오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/6 "2016-01-10T22:39:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [1월 10, 2016, 10:54오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/7 "2016-01-10T22:54:30Z")

</div>

Just change

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

```

to

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

```

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [1월 10, 2016, 10:56오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/8 "2016-01-10T22:56:52Z")

</div>

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

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [1월 10, 2016, 10:59오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/9 "2016-01-10T22:59:01Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [1월 10, 2016, 10:59오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/10 "2016-01-10T22:59:46Z")

</div>

> [@cpradio](#):
>
> .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.

![](https://global.discourse-cdn.com/meta/original/4X/a/1/4/a1402815aa8f8e11a1772334d4f866de9ccca24d.png)

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [1월 10, 2016, 11:02오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/11 "2016-01-10T23:02:06Z")

</div>

AH, OK, sorry. I missed comprehending what the current issue was. I was thinking it was a “collapse” thing ![](https://global.discourse-cdn.com/meta/original/3X/d/6/d65d366bed2eb3e6934d3ec688d9c3f2749dc231.gif)

Time for a food break

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [1월 10, 2016, 11:03오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/12 "2016-01-10T23:03:29Z")

</div>

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

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

```

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [1월 10, 2016, 11:07오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/13 "2016-01-10T23:07:57Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [1월 11, 2016, 3:48오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/14 "2016-01-11T15:48:32Z")

</div>

Theres a closed thread here…

[https://meta.discourse.org/t/changing-or-removing-the-last-poster-avatar-highlight/27211](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.

![](https://global.discourse-cdn.com/meta/original/4X/e/3/3/e339e982081b08b02c7e211e155f2b444955195f.png)  
Any ideas how to eliminate the halo and fix alignment.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [1월 11, 2016, 4:43오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/15 "2016-01-11T16:43:28Z")

</div>

This looks to be close

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

```

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [1월 11, 2016, 5:00오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/16 "2016-01-11T17:00:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [3월 2, 2019, 7:55오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/18 "2019-03-02T19:55:36Z")

</div>



---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [3월 3, 2019, 10:08오후 UTC](https://meta.discourse.org/t/modify-users-column-to-contain-only-one-avatar-latest-poster/37716/19 "2019-03-03T22:08:40Z")

</div>


