Display Topic Author on Topic List

Contribute UX

AI-generated summary

The discussion revolves around modifying the topic list in Discourse to display only the topic author. Mistflux initiated the conversation, seeking an easy way to accomplish this.

tshenry provided a theme component that achieves the desired result, which can be downloaded from https://theme-creator.discourse.org/theme/tshenry/original-poster-only.

However, ahmadabdolsaheb requested a modification to display the poster’s username instead of their image. tshenry provided the SCSS code for the component and mentioned plans to create a GitHub repository.

tshenry also shared a meta discussion https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552 that might be relevant to the requested modification.

littleviolette reported issues with the CSS code on mobile devices, which tshenry acknowledged and provided a link to another meta discussion https://meta.discourse.org/t/show-original-poster-avatars-on-mobile/171346 that might help resolve the issue.

littleviolette further inquired about limiting the original poster-only layout to specific categories via CSS on mobile. tshenry suggested several options, including seeking help from developers, exploring existing theme components, or hiring someone to build the feature.

1

Hello!

I would like to change the topic list to only display the topic’s author instead of a list of frequent posters in a topic.

Would there be an easy way to accomplish this?

Username of user below topics
2

EDIT: Here’s a more complete solution I threw together that you can download as a theme component:

https://theme-creator.discourse.org/theme/tshenry/original-poster-only

8 Likes
Topic Author
3

@tshenry, awesome, I am looking for a similar solution but i would like to display the poster username instead of their image.

Where could we take a look into the repo of your component?

4

Ah! I definitely goofed by failing to provide a way to download or see the code! It’s just some CSS. I’ll bundle it into a proper theme component on GitHub when I get a chance.

// Hide all posters except the topic author
.topic-list .posters {
    width: 75px;
    text-align: center;
    
    // Only show first poster
    a:not(:first-of-type) {
        display: none;
    }
    // Get rid of offset and decoration
    a:first-child .avatar.latest:not(.single) {
        position: static;
        box-shadow: none;
        border: 0;
    }
    // Adjustment for center alignment
    & > a {
        float: none;
        margin-right: 0;
    }
}

// Make sure the correct user is showing at smaller width
@media screen and (max-width: 850px) {
    .topic-list td.posters {
        // Ensure first poster is showing
        a:not(.latest) {
            display: block;
        }
        // Hide everything else
        a:not(:first-of-type) {
            display: none;
        }
    }
}

What you are trying to accomplish is probably closer to:

4 Likes
7

This is super cool. Thank you!

The CSS code for mobile doesn’t seem to be working. Did Discourse recently change the way it organizes the posters for mobile? Any tips on how to fix it?

Thank you!

8

The above CSS was never intended for mobile, but I think this is probably what you are looking for?

1 Like
9

Yes! I couldn’t limit this OP-only layout to specific categories via CSS using the mobile theme like I can with your CSS code. Do you have tips how I can accomplish that on mobile (sorry new to Ember.js :/)?

10

Unfortunately limiting by category would be a somewhat significant addition to that mobile component since you can’t check the category with the handlebars file alone. There are a few things you could do:

  • Make a Development topic about it and see if any developers are able to give you some pointers
  • Look through the code of existing theme components that involve categories and see if you can find ideas/inspiration
  • Make a listing in the Marketplace and pay someone to build it for you
2 Likes