Author badge on Topic Owner's posts

Development

AI-generated summary

A user, Don, proposes adding an ‘Author’ badge to the replies of the topic owner in Discourse, suggesting it could be a core feature or theme component. Don shares CSS code to implement this badge on desktop and mobile, targeting the .topic-owner class and adjusting for embedded posts. The badge appears as a label next to the author’s name. Another user, pfaffman, asks if the forum is public, and Don provides a link to a live example. riking suggests omitting the badge on the first post (the original topic) to avoid redundancy, and Don agrees, updating the CSS to exclude the first post. Don further refines the styling, making the badge bold and adjusting spacing. Finally, JammyDodger links to a related meta discussion about a new theme component for the author badge author badge for topic posts.

1

Hello,

It’s going to be really good to huge topics…where users know when the OP reply. Appear an Author badge on OP replies…

I made it with CSS but I think this maybe could be a core feature or a theme component. :slight_smile:

I target the .topic-owner class but I am sure there is a more elegant way. Like this :arrow_down:

Thank you! :slight_smile:

On desktop I target the .names class

.topic-owner article .row .topic-body .topic-meta-data .names::after {
    content: "Author";
    color: var(--secondary);
    background: var(--secondary-medium);
    padding: 0px 8px;
    border-radius: 8px;
}
// Hide from embedded posts
.topic-owner article .row .embedded-posts .topic-body .topic-meta-data .names::after {
    content: "";
}

Looks like this :arrow_down:

Screen Shot 2020-12-02 at 10.07.49 AM

On Mobile I target the .first class

.topic-owner article .row .topic-body .topic-meta-data .names .first::after {
    content: "Author";
    color: var(--secondary);
    background: var(--secondary-medium);
    margin-left: 4px;
    padding: 0px 8px;
    border-radius: 6px;
}

Looks like this :arrow_down:
Screen Shot 2020-12-02 at 10.14.00 AM

If you want to see it in live :arrow_down: I just pick a topic from my site. The only change, the Author label is Hungarian.

2

That’s pretty cool. Is your forum public? Can you edit your post and add a link to that topic?

3

Hello @pfaffman ,
I added the link. Thanks :slight_smile:

4

You might want to consider omitting this on the first post, because that’s always going to come from the topic creator!

CSS edit:

5

Thank you Kane! That’s a good point I will use this :heart::slightly_smiling_face:

6

Little update! :slight_smile:

Desktop :arrow_down:

// Topic Owner

.topic-post.topic-owner article:not(#post_1) .row .topic-body .topic-meta-data .names::after {
  content: "Author";
  color: var(--secondary);
  font-weight: bold;
  background: var(--secondary-medium);
  padding: 0px 8px;
  border-radius: 8px;
  line-height: normal;
}

Mobile :arrow_down:

// Topic Owner

.topic-post.topic-owner article:not(#post_1) .row .topic-body .topic-meta-data .names .first:after {
  content: 'Author';
  color: var(--secondary);
  background: var(--secondary-medium);
  margin-left: 4px;
  padding: 0px 8px;
  border-radius: 6px;
  line-height: normal;
}
7

Cross linking the new theme component :partying_face: