Insignia de autor en publicaciones del propietario del tema

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 Me gusta

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

2 Me gusta

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

1 me gusta

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 Me gusta

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

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 Me gusta

Cross linking the new theme component :partying_face:

2 Me gusta