Cómo mover la plantilla de avatar dentro del cuerpo del tema

Desarrollador
1

Hola, actualmente estoy creando un tema personalizado para una de mis comunidades. Estoy intentando mover el avatar del usuario dentro del cuerpo del tema (publicaré capturas de pantalla de cómo se ve actualmente frente a lo que busco). Estoy usando el plugin para ver los outlets de Discourse, aunque no veo ningún outlet para hacer esto. ¡Alguna ayuda con esto sería de gran ayuda!

Actual:

Una respuesta de prueba a un mensaje, sugiriendo que se ve bien. (Subtitulado por IA)
Una respuesta de prueba a un mensaje, sugiriendo que se ve bien. (Subtitulado por IA)849×215 11.8 KB

Buscando:

imagen
imagen1099×540 97.6 KB

1 me gusta
2

Tu segundo SS deseado. ¿Está esto en otro sitio de discurso?

Si es así, es posible que puedas ver cómo lo hicieron con el elemento de inspección de tu navegador.

3

Sí, lo es, https://forums.unrealengine.com/ Intenté hacerlo así, aunque no pude resolverlo.

4

Hola :wave:
Aquí tienes un ejemplo que acabo de crear, probablemente no sea perfecto pero puedes personalizarlo…

Escritorio / 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;
  }
}

// Mensaje privado
.archetype-private_message {
  .regular.contents {
    border: none;
  }

  .topic-map {
    padding-left: 1em;
    padding-bottom: 0.25em;
  }

  .topic-post {
    margin-bottom: 1em;
  }

  // usar resaltado de publicación del usuario actual en toda la fila
  .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;
    }
  }
}

// Línea de tiempo
.topic-navigation.with-timeline {
  width: 150px;
}
.container.posts {
  // asegurar que la publicación mantenga el ancho completo
  grid-template-columns: 1fr auto;

  .topic-navigation {
    margin-right: -2em;
    padding-left: 2em;
  }
}

// Mapa del tema
.topic-map {
  &.--op,
  &.--bottom {
    padding: 1em 1em 0;
    max-width: 100%;
    border-top: none;
    border-bottom: none;
  }
}

// Acción pequeña
.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);
  }
}

// Área del tema
.topic-area {
  > .loading-container {
    width: 100%;
  }
}
.topic-status-info,
.topic-timer-info {
  max-width: 100%;
}
6 Me gusta
5

Hola, Don. ¡Muchas gracias por el ejemplo! Ayudará muchísimo, lo añadiré a mi tema.

1 me gusta