Come spostare l'avatar_template all'interno del corpo del topic

Sviluppatore
1

Ciao, sto creando un tema personalizzato per una mia community. Sto cercando di spostare l’avatar dell’utente all’interno del corpo dell’argomento (pubblicherò screenshot di come appare attualmente rispetto a quello che sto cercando). Sto usando il plugin per visualizzare gli outlet di Discourse, anche se non vedo un outlet per farlo. Un po’ di supporto su questo sarebbe di grande aiuto!

Attuale:

Una risposta di prova a un messaggio, suggerendo che sembra buono. (Sottotitolato dall'IA)
Una risposta di prova a un messaggio, suggerendo che sembra buono. (Sottotitolato dall'IA)849×215 11.8 KB

Desiderato:

immagine
immagine1099×540 97.6 KB

1 Mi Piace
2

La tua seconda SS desidera. È su un altro sito di discussione?

Se sì, potresti essere in grado di vedere come lo hanno fatto con l’elemento di ispezione del tuo browser.

3

Sì, lo è, https://forums.unrealengine.com/ Ci ho provato, anche se non sono riuscito a capirlo.

4

Ciao :wave:
Ecco un esempio che ho creato ora, probabilmente non è perfetto ma puoi personalizzarlo…

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

Ciao, Don! Grazie mille per l’esempio. Mi aiuterà moltissimo, lo aggiungerò al mio tema.

1 Mi Piace