Indicate whether author of a post is also author of OP

Contribute UX
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 Mi Piace