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)]

You can try this basic theme component: GitHub - Arkshine/discourse-topic-avatar-vertical-layout · GitHub. Desktop view only It’s compatible with other modifications [1] The post count is not included. You need a plugin, like this one: GitHub - Arkshine/discourse-user-post-count · GitHub. Let me know if you see issues. It moves the poster-name widget under the post-avatar widget. No other changes apart from CSS adjustments. ↩︎

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.

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:

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

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.

[image] Coin-coin le Canapin: can’t be done with css only. 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] 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]

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.

That worked like a charm! Thanks a lot, buddy. [image]

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

Product Support

lilstranded (LiLStranded-Here) March 13, 2025, 3:28pm 10

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

Topic		Replies	Views
How to make 2 sidebars and the topic list in the middle? Product Support	10	2729	March 3, 2019
How to add the two floating sidebar banners? Product Support	1	1605	November 7, 2019
Is there CSS code to put HTML banner beside post topic UX	2	1635	July 14, 2018
What I need to do if I want this kind of page layout? UX	6	1591	November 29, 2021
Perfectionist - the default curve interface UX	5	313	November 2, 2024

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

Related topics