How to move the avatar_template inside the topic body

Development

AI-generated summary

katruki is creating a custom theme for their community and wants to move the user avatar inside the topic body. They provided screenshots of the current and desired layouts. Heliosurge suggested using the browser’s inspect element to see how another Discourse site, https://forums.unrealengine.com/, achieved a similar design. katruki tried this approach but was unable to figure it out. Don provided an example CSS code to help katruki achieve the desired layout, which katruki plans to add to their theme.

1

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)
A test reply to a message, suggesting it looks good. (Captioned by AI)849×215 11.8 KB

Wanting:

image
image1099×540 97.6 KB

2

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.

3

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

4

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%;
}
5

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