Trying to show self replies in color

Contribute Feature

AI-generated summary

The discussion revolves around adding a feature to highlight self-replies in a Discourse template, similar to a messenger app. Initially, vinothkannans suggests using the .topic-owner CSS class, but nildarar clarifies that this class only applies to the topic creator’s replies.

nildarar seeks a class to highlight all replies made by the logged-in user. pmusaraj provides a JavaScript code snippet that adds a post-by-current-user class to posts made by the current user, which can then be styled using CSS. nildarar expresses gratitude for the solution, finding it simpler than expected and praising Discourse’s capabilities.

1

Hi,
I’m trying to add a new class to topic-post for users, seeing self replies. In fact, I am trying to show self messages with different looks in topics.
This feature is good when a template is designed like a messenger app.

Is this feature already defined anywhere?

2

This is already possible with the .topic-owner CSS class. You can use below CSS to highlight the self replies

.topic-owner .topic-body {
  background: #fffaaa;
}
8 Likes
3

But topic-owner class just assigned to replies of the topic creator. I need a class for example named my-own for adding to other replies if logged in user wrote them.

Like a messenger app, shows my replies right side and others on the left side balloon.

1 Like
4

You can do this by adding the following code to the Header of your theme (or to the header of a theme component):

<script type="text/discourse-plugin" version="0.8">
    const currentUser = api.getCurrentUser();
    api.addPostClassesCallback((attrs) => {
        if (currentUser && currentUser.id === attrs.user_id) {
            return ["post-by-current-user"];
        } else {
            return [];
        }
    });
</script>

You can then use the post-by-current-user class in your stylesheet.

11 Likes
5

Woooow, I thought that doing so would require a lot of changes.
Discourse is really exciting …

Thanks a million!

5 Likes