Hello, I am currently making a custom theme for a community of mine. I am trying to move the user avatar inside the topic body (I’ll post screen-shots for what it currently looks like vs what I am looking for). I am using the plugin to view DIscourse outlets though I am not seeing an outlet to possibly do this. Some support on this would be a huge help! Current: [A test reply to a message, suggesting it looks good. (Captioned by AI)] Wanting: [image]

Your 2nd SS wanting. Is this a on another discourse site? If so you might be able to see how they did it with your browser’s inspect element.

Yeah it is, https://forums.unrealengine.com/ I tried doing as such, though couldn’t figure it out.

Hello :wave: Here is an example I made now, it’s probably not perfect but you can customize it… Desktop / CSS .topic-post { margin-bottom: 1em; > article > .row { background-color: var(--secondary); box-shadow: 0 0 0 1px var(--primary-low); border-radius: 1em; padding: 1em; .topic-avatar { border: none; } .topic-body { background: none; border: none; box-sizing: border-box; width: 100%; padding: 1em; } } .post-menu-area { margin: 1em 0 0; } } // PM .archetype-private_message { .regular.contents { border: none; } .topic-map { padding-left: 1em; padding-bottom: 0.25em; } .topic-post { margin-bottom: 1em; } // use current-user post highlight on full row .topic-post { &.current-user-post { > article > .row { background: var(--tertiary-very-low); box-shadow: 0 0 0 1px var(--tertiary-very-low); } } .regular.contents { background: none; border-color: none; } } } // Timeline .topic-navigation.with-timeline { width: 150px; } .container.posts { // ensure to keep the post full width grid-template-columns: 1fr auto; .topic-navigation { margin-right: -2em; padding-left: 2em; } } // Topic map .topic-map { &.--op, &.--bottom { padding: 1em 1em 0; max-width: 100%; border-top: none; border-bottom: none; } } // Small action .small-action { .topic-avatar, .small-action-desc { border-top: none; padding-top: 0; } .topic-avatar:empty { display: none; } .small-action-desc { width: calc(100% - 1em); } } // Topic bottom .topic-area { > .loading-container { width: 100%; } } .topic-status-info, .topic-timer-info { max-width: 100%; }

How to move the avatar_template inside the topic body

Development

katruki (katruki) December 29, 2024, 9:18pm 5

Hello, Don! Much thanks for the example. It’ll help a ton, I’ll get this added to my theme.

Topic		Replies	Views
Change avatar position Development css	8	549	January 28, 2024
Add column to home page topic list Product Support	7	1432	March 28, 2020
Avatars by posts in Category with Featured Topics Product Support	2	1347	November 11, 2018
Move topic post avatar within post body Development	0	521	November 10, 2019
How to reverse the position of the avatar to be in front of the topic text? Product Support	5	266	September 21, 2025

How to move the avatar_template inside the topic body

Related topics