Forum Discussion

manuelrohrbach's avatar
8 years ago

How can I design comments differently from answers if I use threaded layout within topic?

According to this post https://community.lithium.com/t5/Community-display/Different-types-of-Linear-Topic-orders-Normal-topic-order-Oldest/ta-p/64536 , it is possible to use threaded layout within topic.

 

However all answers to the question and comments to answers are visually the same. So it is not easy to understand the flow of conversation without using indents for each comment.

 

For example, airbnb community is using indents for all comments to answers: https://community.withairbnb.com/t5/Hosts/What-is-the-hold-up-with-adding-a-pet-fee-option-to-the/m-p/377897#M86206

 

Is there any possibility to add indents for each comment without creating custom component? I could not find any different or specific css classes in the comments or answers.

 

Thank you for helping!

  • Welcome Manuel and congrats to your first post on the Lithium Community :)

     

    Right now there's no CSS class in the default DOM that Lithium creates that would allow you to determine the thread depths - and style accordingly - if the threaded layout is used. As you can see from Airbnb's DOM they worked around by overriding the default message view with a custom component and inserting an intermediate container that exposes the reply depth as a CSS class.

     

    When going for a custom component you can use the message context object's message.parent method to determine if the current message is the root message or a reply. To determine multi-level depth you would need to check the Community API v2 "message" collection and the depth field for that message.

  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)

    Welcome Manuel and congrats to your first post on the Lithium Community :)

     

    Right now there's no CSS class in the default DOM that Lithium creates that would allow you to determine the thread depths - and style accordingly - if the threaded layout is used. As you can see from Airbnb's DOM they worked around by overriding the default message view with a custom component and inserting an intermediate container that exposes the reply depth as a CSS class.

     

    When going for a custom component you can use the message context object's message.parent method to determine if the current message is the root message or a reply. To determine multi-level depth you would need to check the Community API v2 "message" collection and the depth field for that message.