Comment déplacer le avatar_template à l'intérieur du corps du sujet

Dev
1

Bonjour, je suis actuellement en train de créer un thème personnalisé pour ma communauté. J’essaie de déplacer l’avatar de l’utilisateur à l’intérieur du corps du sujet (je posterai des captures d’écran de ce à quoi cela ressemble actuellement par rapport à ce que je recherche). J’utilise le plugin pour visualiser les sorties de Discourse, mais je ne vois aucune sortie pour éventuellement faire cela. Un peu d’aide à ce sujet serait très utile !

Actuel :

Une réponse test à un message, suggérant que cela a l'air bien. (Légendé par l'IA)
Une réponse test à un message, suggérant que cela a l'air bien. (Légendé par l'IA)849×215 11.8 KB

Ce que je veux :

image
image1099×540 97.6 KB

1 « J'aime »
2

Votre 2ème SS souhaité. Est-ce sur un autre site de discussion ?

Si c’est le cas, vous pourriez peut-être voir comment ils l’ont fait avec l’outil “inspecter l’élément” de votre navigateur.

3

Oui, c’est le cas, https://forums.unrealengine.com/ J’ai essayé de faire ainsi, mais je n’ai pas réussi à comprendre.

4

Bonjour :wave:
Voici un exemple que j’ai créé, il n’est probablement pas parfait mais vous pouvez le personnaliser…

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

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

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

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

  // utiliser la mise en surbrillance du message de l'utilisateur actuel sur toute la ligne
  .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;
    }
  }
}

// Chronologie
.topic-navigation.with-timeline {
  width: 150px;
}
.container.posts {
  // s'assurer que le message conserve toute sa largeur
  grid-template-columns: 1fr auto;

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

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

// Petite 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);
  }
}

// Zone du sujet
.topic-area {
  > .loading-container {
    width: 100%;
  }
}
.topic-status-info,
.topic-timer-info {
  max-width: 100%;
}
6 « J'aime »
5

Bonjour, Don ! Merci beaucoup pour l’exemple. Cela m’aidera énormément, je vais l’ajouter à mon thème.

1 « J'aime »