How to achieve a side by side layout for topic posts like this?

Product Support

AI-generated summary

User lilstranded seeks to implement a side-by-side layout in Discourse, with post author details on the left and content on the right, as opposed to the default vertical stack. Initial suggestions include using CSS Flexbox NateDhaliwal, but Canapin notes it can’t be done with CSS alone and would require a theme component. lilstranded confirms CSS tinkering broke the layout. After clarification, manuel agrees CSS alone won’t suffice due to template structure, referencing Epic forums as an example. Arkshine reverse-engineers the Epic layout and shares a working theme component that repositions widgets and adjusts CSS, with a note that post count requires a separate plugin Arkshine. lilstranded confirms success and thanks Arkshine with a celebratory GIF.

1

I would love to achieve a side-by-side layout for my Discourse instance (see attached image). Could anyone please guide me on how to do this? I appreciate any help you can provide!

This image contains a screenshot of a YouTube comment by a user named "Everyone" discussing the use of colliders in character design and animation, suggesting implementing a capsule shape for collision computing rather than a long antenna, and mentioning the convenience of using a simple box to avoid complications. (Captioned by AI)
This image contains a screenshot of a YouTube comment by a user named "Everyone" discussing the use of colliders in character design and animation, suggesting implementing a capsule shape for collision computing rather than a long antenna, and mentioning the convenience of using a simple box to avoid complications. (Captioned by AI)2768×836 249 KB

3

CSS Flexboxes, perhaps? Just from the top of my head. Then perhaps using the API/requests to fetch some other data like the post count.

4

What you want is basically replace horizontal bars with vertical bars?
They could be done with a theme component, and can’t be done with css only.
It would require care to not break anything, and might not be trivial to do :thinking:

5

I’ve tried some basic flex box tinkering but it only broke the layout.

6

Hello @Canapin! basically i want the post author details on the left and post content on the right instead of them being one on top of the other like the stock discourse layout.
Would be helpful if there are any mods for it.

7

I’d agree, you can’t re-position these items in a clean way with CSS. The avatar and the default metadata are arranged separately on the template:

image
image574×122 11.9 KB

I wonder how it’s actually done on the Epic forums. Is this a template override? I don’t see any plugin outlet at this location:

image
image574×105 8.12 KB

8

From what I see, they re-added the data (username, etc.) after the post-avatar widget content, added some width to .topic-avatar, and they hide everything else with CSS except the date. Let me see If I can reproduce it.

9

You can try this basic theme component: GitHub - Arkshine/discourse-topic-avatar-vertical-layout · GitHub.

Let me know if you see issues.

  1. It moves the poster-name widget under the post-avatar widget. No other changes apart from CSS adjustments. ↩︎

10

That worked like a charm! Thanks a lot, buddy.