Author badge on Topic Owner's posts

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

8 Likes
2

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

2 Likes
3

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

1 Like
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:

3 Likes
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;
}
4 Likes
7

Cross linking the new theme component :partying_face:

2 Likes