Enhance the topics readibility in the forums

Hi,

I propose a small enhancement for the topics reading in the forums.

Each topic has an author.

What I propose is to highlight the topic author (with a particular color of his name (colored font for instance)) and use this in all answers from this author along the topic discussion.

Doing so, when we read a topic discussion, we know that this answer we are reading is made by the author of the topic or not.

What do you think of this idea?

Thanks.

Patrice.

4 Likes

Highlighting the OP seems like a sensible idea.

Great idea

Good idea. Reddit has this implemented with a small icon next to their username to indicate it’s the author that’s commenting. I’m sure Discord allows for something similar. @moderators

I don’t think Moderators are the right ones to ask for. Also using the @moderators mention does not trigger a notification, only reporting/flagging topics or sending a message to that group does that.

Maybe @Jummivana @RoyalTot can address this to the admins, it’s a useful feature for sure.

1 Like

Hi!
This would be a nice idea. The forum software is “Discourse” and I’ve yet to find a Discourse plugin for it that does this. I’ve brought this up to the CM’s.

Thanks for the feedback!

2 Likes

You wouldn’t need a plugin, Discourse adds classes to almost everything, a simple bit of sass could be used to target posts created by .topic-owner.

I quite like the idea, so I’ve added it to my stylebot settings for the forums :slight_smile:

image

10 Likes

Good idea! I know who to contact. :slight_smile:

2 Likes

Another great “sass” tip … (still using the PM one, that has saved me quite a few times now)
Thanks @Nyx1819 :+1:

.private_message .topic-post {
background: #50212170;
}

.reply-control >private-message-users {
width:404px;
background: #50912170;
}
.root .tertiary{
color: #804040;
}
.is-today .pika-button {
color:#804040;
font-weight:bold
}

Could you share your .topic-owner one please :slight_smile:

Here it is:

/* Highlight the Topic Author */
.topic-post.topic-owner .username:after {
    content: 'Topic Author';
    background-color: var(--tertiary-medium);
    color:  whitesmoke;
}

It is a variation of the SASS that I have for highlighting moderators, and community managers (included below for those interested). you can override the forums style rules using the Chrome extension Stylebot.

SASS: Highlight staff
span.user-title, div.avatar-flair {
  display: none;
}

.MSFSCommunityTeam.username:after, .topic-map .group-MSFSCommunityTeam a:after, .topic-list-item .posters a.group-MSFSCommunityTeam:after {
    content: "CM";
    background: #dedede;
    color: black;
}

.MSFSCommunityTeam.username:after{
    content: "Community Manager";
}

.ModeratorTeam.username:after, .topic-map .group-ModeratorTeam a:after, .topic-list-item .posters a.group-ModeratorTeam:after {
    content: "MOD";
    background: #099fb3;
    color: white;
}

.ModeratorTeam.username:after{
    content: "Forum Moderator";
}

/* Post Badge - Base Styles */
.username:after {
    padding: 3px 7px 1px 6px;
    margin-left: 10px;
    font-family: "ProximaNova-Regular", Arial, sans-serif;
    font-weight: normal;
    font-size: 0.70em;
}

/* Recent Post - Base Styles */
.topic-list-item .posters a:after {
    position: absolute;
    padding: 2px 3px 1px 3px;
    font-weight: normal;
    text-align: center;
    font-size: 0.60em;
    opacity: .85;
    width: 19px;
    margin-left: -25px;
    margin-top: 15px;
}


/* Topic Map - Base Styles */
.topic-map [class*="group-"] a:after {
    position: absolute;
    padding: 2px 3px 1px 3px;
    font-weight: normal;
    line-height: 1;
    bottom: 0;
    text-align: center;
    right: 0;
    left: 0;
    font-size: 0.60em;
    opacity: .85;
    width: 26px;
}
1 Like

Many thanks … but struggling to get it to run in “stylish”/Firefox - maybe one day, you can help be in discord to get it running …(where I can share my screen with you ) :slight_smile:

UPDATE: Working now (must have been a cache issue)
Looks Great – thanks

Nice idea! Trying out @Nyx1819’s SASS here!

2 Likes
.topic-post.topic-owner .username:after {
    content: 'Topic Author';
    background-color: var(--tertiary-medium);
    color: whitesmoke;
    margin-left: 5px;
    font-size: 70%;
    padding: 1px 5px;
}

This looks better (IMHO, of course :stuck_out_tongue: ). But the font-size might be too small for some.

2 Likes

Nice! Thank you :slight_smile:

2 Likes

The new OP flair is looking good. Thanks @Jummivana and team!

By the way, what does « OP » mean?
Thanks.
Patrice.

Original poster. In this case you would be the TA.

OK. Thanks.

Hi, when I started the forum today I saw a black on white front page. My style is set to white, so that is how it should look. However, if I open a section or a topic I see this atm

It seems dark background from the dark style is applied, while the lettering matches the white style !

So I have set my UI style to dark now… to have WHITE text at least… but I’d really prefer to see the light UI style repaired…

Hi @Jummivana

You will need to add this as well, it hides the badges from the private message information box at the bottom of the first post.

.private-message-map .username:after {
    display: none;
}