Requesting: Options to remove avatars on topic list and change for Usernames instead

Contribute Feature

AI-generated summary

In a feature request thread titled ‘Requesting: Options to remove avatars on topic list and change for Usernames instead,’ hipp0 seeks to replace avatars with usernames on the topic list, styled by trust level (gray for levels 0–2, colored for 3–4). They note CSS workarounds have bugs — notably, usernames vanish after replies. NateDhaliwal offers CSS to hide avatars entirely on desktop and mobile, but hipp0 clarifies they want to preserve usernames. hipp0 shares a detailed CSS snippet attempting to display usernames via data-user-card, with hover effects and alignment fixes, but still encounters issues with username visibility post-reply and inability to color usernames by trust level. Moin suggests separating the username-coloring issue into a dedicated thread: Unable to change usernames a specific color based on the group they are in. The core request remains: a native option to disable avatars and show trust-level-colored usernames in the topic list for a classic forum aesthetic.

1

I want to have usernames that are grayed out for 0-1-2 trust levels, and colored for 3-4 trust levels.

I can mostly do it with CSS but a lot of bugs happen like when I reply to a thread the original poster username disapears.

It would be cool if this was an option to disable avatars on topic list to give an older style forum look.

I like the avatars in the other areas just not on the main topic list.

2

Hi there, try this:

// Desktop
.topic-list td.topic-list-data.posters {
  display: none !important;
}

// Mobile
.pull-left {
  display: none !important;
}

.topic-list .right {
  margin-left: 0 !important;
}

This removes the avatars in the topic list on desktop and mobile.

1 Like
3

This removes the avatars, but I want to keep the usernames. I will see if it helps with the A.I.

4

This is what I came up with A.I but the usernames disapear when a person replies to a thread. I also wasn’t able to adjust Trust level group colors of people posting.

.topic-list .posters img.avatar { display: none; }
.topic-list .posters { text-align: center !important; }
.topic-list .posters a.latest.single {
  display: block;
  padding: 4px 0;
}


.topic-list .posters a.latest.single::after {
  content: attr(data-user-card);
  display: block;
  font-size: 17px;
  font-weight: normal;
  text-align: center;
}
.topic-list-header th.posters {
  text-align: center !important;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topic-list-header th.posters {
  padding-top: 16px !important; /* adjust value as needed */
}


.topic-list-header th.posters::before {
  content: "Poster";
  font-size: 18px;
  font-weight: normal;
  color: #a6a6a6;
}


.topic-list .posters {
  display: flex;
  justify-content: center;
}

.topic-list th.posters,
.topic-list td.posters {
  width: 100px !important; /* Adjust 80-120px as needed */
  min-width: 100px !important;
}

.topic-list .posters a.latest.single::after {
  margin-top: 10px; /* Adjust value for desired vertical position */
}

.topic-list .posters a.latest.single::after {
  text-decoration: underline transparent;
  text-underline-offset: 1px;
  transition: text-decoration-color 0.2s;
}

.topic-list .posters a.latest.single:hover::after {
  text-decoration-color: #8e0086; /* or #800080 */
}


a.latest.single {
    padding-right: 5px !important;
}


.topic-list-data.posters {
  padding: 13.5px 45px !important;  /* top/bottom 8px, left/right 12px – adjust as needed */
}

.posters.topic-list-data,
.posters.topic-list-data a, {
  font-size: 17px !important;
}

.posters.topic-list-data a.latest.single {
  display: flex;
  align-items: center;
  justify-content: center;
}

.posters.topic-list-data a.latest.single::after {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.topic-list .posters a.latest.single::after {
  content: attr(data-user-card) !important;
  display: block !important;
}

//visibilty
.topic-list .posters a {
  display: none !important;
}

.topic-list .posters a.latest {
  display: inline-block !important;
}

.topic-list .posters a.latest::after {
  content: attr(data-user-card) !important;
  display: block !important;
  font-size: 17px;
  margin-top: 4px;
}
5

I have the impression that the question of changing the color of usernames is independent of displaying them in the topic list. Perhaps it would be better to continue discussing that question here: Unable to change Usernames a specific color based on the group they are in