Indicate whether author of a post is also author of OP

Contribute UX

AI-generated summary

The discussion revolves around visually indicating whether the author of a post is also the author of the original post (OP). tophee initiates the conversation, suggesting a visual hint like an icon or styling change next to the author’s name. Mittineague shares their idea of using an avatar to remember the OP, but thinks it’s more important to recall the discussion topic.

codinghorror suggests that CSS classes for OP identification already exist, which vinothkannans confirms as the topic-owner class. tophee proposes a CSS solution using a topic owner avatar halo, but struggles to exclude the first post in a topic. clapmyhands provides a solution by adding :not(:first-child) to .topic-owner, but notes that it may not support older browsers.

1

When you enter a topic through a link to a post further down in the thread you often need context in order to understand that post. It’s fairly easy to figure out the topic title and the post to which the post is replying. What I sometimes miss is information whether the author of the post is also the author of the OP. How about providing some visual hint about this on every subsequent post of the original poster?

I don’t have a good solution yet but would like to put this out for discussion. So, for example, the visual marker could be an icon next to the authors name or before the title but it could also be more subtle like changing the way the name is displayed or so.

2 Me gusta
2

Interesting idea. To some extent I often do fairly well at remembering who the OP is by their avatar. But I think what I usually feel is more important for me to remember is what the discussion of the topic is about. (I have been known to wander off topic at times :blush: )

In any case I think it would be possible to put together a few lines of JavaScript that gets an OP identifier (name?) and uses that as a CSS selector to apply style to the name / avatar where it appears in the topic.

2 Me gusta
3

I believe the CSS classes for this already exist in the topic?

1 me gusta
4

No. It doesn’t exist for likes.

5

When were likes discussed? The CSS classes should be on the user metadata shown with each post.

6

Not sure if we have a .op class, but even if we don’t it’s pretty easy to add one in a customization

7

Sorry. I misunderstood.

Yes we have OP class topic-owner.

6 Me gusta
8

I tried a couple of class-based solutions for this and my favourite one is to use the topic owner avatar halo as already used in topic lists:

.topic-owner .topic-avatar img {
box-shadow: 0 0 3px 1px #a7d5ec;
border: 2px solid #85c2e0;
position: relative;
top: -2px;
left: -2px
}

If you are already using the material design avatar shadow, it makes sense to simply change the colour of that shadow:

.topic-owner .topic-avatar img {
    box-shadow: 0 2px 4px #a7d5ec;
    border: 2px solid #85c2e0;
}

.topic-avatar img:hover {
    box-shadow: 0 8px 10px  #a7d5ec);
}

So far so good. What I haven’t figured out yet is how to turn this off for the first post in a topic. Could anyone advise me?

Here is another way of indicating the original poster, but I dismissed it because I find it too strong plus: the fontawesome rocket looks like a wrench at that small size:

.topic-owner .names span.username::after { 
    content: '\f135';
    font-family: FontAwesome;
    font-size: smaller;
    color: #646464;
    margin:0px 0px 0px 5px;
}

Disclaimer: I am quite a CSS-noob so chances are that these snippets are not perfect. Feel free to provide improved versions.

2 Me gusta
9

Hi tophee,

found a way to exclude the first post in a topic. Basically add :not(:first-child) to .topic-owner

.topic-owner:not(:first-child) .topic-avatar img {
box-shadow: 0 0 3px 1px #a7d5ec;
border: 2px solid #85c2e0;
position: relative;
top: -2px;
left: -2px
}

however as mentioned below, it’s a css3 selector and older browser might not support it. I don’t know how discourse browser support looks like. :sweat_smile:

you can try it and check if it suits your needs :smile:

5 Me gusta