Как переместить avatar_template внутри тела темы

Разработка
1

Привет! Я сейчас создаю пользовательскую тему для своего сообщества. Я пытаюсь переместить аватар пользователя внутрь тела темы (я пришлю скриншоты того, как это выглядит сейчас, и того, как я хочу это видеть). Я использую плагин для просмотра точек расширения Discourse, но не вижу подходящей точки для этого. Любая помощь в этом вопросе была бы очень кстати!

Сейчас:

Тестовый ответ на сообщение, предполагающий, что всё выглядит хорошо. (Подпись сгенерирована ИИ)
Тестовый ответ на сообщение, предполагающий, что всё выглядит хорошо. (Подпись сгенерирована ИИ)849×215 11.8 KB

Хочу:

image
image1099×540 97.6 KB

2

Ваш второй SS желает. Это на другом сайте Discourse?

Если да, то вы, возможно, сможете посмотреть, как они это сделали, используя функцию «Исследовать элемент» в вашем браузере.

3

Да, это так: https://forums.unrealengine.com/ Я пытался сделать именно так, но не смог разобраться.

4

Привет :wave:
Вот пример, который я только что сделал. Он, вероятно, не идеален, но вы можете его настроить…

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;
  }
  
  // Используем подсветку текущего пользователя для всей строки
  .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

Привет, Дон! Большое спасибо за пример. Это очень поможет, я добавлю это в свою тему.