Display Topic Author on Topic List

ux
#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:

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 #dev 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