토픽 본문 안으로 avatar_template를 이동하는 방법

개발
1

안녕하세요, 저는 현재 제 커뮤니티용 커스텀 테마를 제작 중입니다. 사용자 아바타를 토픽 본문 안으로 이동시키려 하고 있습니다(현재 모습과 원하는 모습을 스크린샷으로 올리겠습니다). 저는 Discourse 아웃렛을 확인하기 위해 플러그인을 사용 중인데, 이 작업을 수행할 수 있는 아웃렛을 찾지 못하고 있습니다. 이 부분에 대한 도움을 주시면 큰 도움이 될 것입니다!

현재:

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

원하는 모습:

image
image1099×540 97.6 KB

2

2차 SS를 원하시나요? 다른 디스코르스 사이트에서 가져온 건가요?

그렇다면 브라우저의 요소 검사 기능을 통해 그들이 어떻게 구현했는지 확인해 볼 수 있을 것입니다.

3

네, 맞아요. https://forums.unrealengine.com/ 에 가서 그렇게 해보려 했는데요, 방법을 찾지 못했습니다.

4

안녕하세요 :wave:
방금 만든 예시입니다. 완벽하지는 않을 수 있지만, 직접 수정해서 사용할 수 있습니다…

데스크톱 / 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;
  }
  
  // 전체 행에 현재 사용자 게시물 하이라이트 사용
  .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;
    }
  }
}
  
// 타임라인
.topic-navigation.with-timeline {
  width: 150px;
}
.container.posts {
  // 게시물이 전체 너비를 유지하도록 보장
  grid-template-columns: 1fr auto;
  
  .topic-navigation {
    margin-right: -2em;
    padding-left: 2em;
  }
}
  
// 토픽 맵
.topic-map {
  &.--op,
  &.--bottom {
    padding: 1em 1em 0;
    max-width: 100%;
    border-top: none;
    border-bottom: none;
  }
}
  
// 작은 액션
.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-area {
  > .loading-container {
    width: 100%;
  }
}
.topic-status-info,
.topic-timer-info {
  max-width: 100%;
}
5

안녕하세요, Don! 예시를 보여주셔서 정말 감사합니다. 큰 도움이 될 것 같아 제 테마에 추가할게요.