Don
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.
I target the .topic-owner
class but I am sure there is a more elegant way. Like this
Thank you!
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
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
If you want to see it in live I just pick a topic from my site. The only change, the Author label is Hungarian.
8 Likes
pfaffman
(Jay Pfaffman)
2
That’s pretty cool. Is your forum public? Can you edit your post and add a link to that topic?
2 Likes
Don
3
Hello @pfaffman ,
I added the link. Thanks
1 Like
riking
(Kane York)
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
Don
5
Thank you Kane! That’s a good point I will use this
Don
6
Little update!
Desktop
// 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
// 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
Cross linking the new theme component
2 Likes