Insérer du texte sous le nom d'utilisateur ?

Dev
1

Existe-t-il un moyen d’insérer une ligne de texte sous les noms d’utilisateur ? Idéalement, j’aimerais que cela apparaisse sous le nom d’utilisateur de chacun.

usernamebelow
usernamebelow453×121 23.6 KB

Le CSS que j’ai utilisé pour y parvenir est :

.username::after {
    content: 'website.com';
    font-size: 14px;
}

Mais évidemment, je voudrais que cela apparaisse en dessous. Merci !

1 « J'aime »
2

Est-ce que cela fonctionnerait pour vous ?

image
image1536×266 36.8 KB

.topic-meta-data .names {
  flex-wrap: wrap;
}

.names::after {
  display: block;
  content: "hello world";
  font-size: 14px;
  width: 100%;
  flex: 1 0 100%;
  order: 4;
}

edit : ajouté la propriété order pour le mobile

3 « J'aime »
3

Merci ! Cela fonctionne parfaitement sur ordinateur, mais pour une raison quelconque, cela s’affiche au-dessus du nom d’utilisateur sur mobile.

4

Oh. Intéressant. ils ont une propriété order supplémentaire sur mobile.

Vous pouvez ajouter order: 4 à l’élément pseudo after et cela devrait résoudre le problème.

1 « J'aime »
5

Vous pourriez y parvenir avec les titres par défaut de groupe.

Les groupes peuvent avoir des titres par défaut qui apparaissent à côté du nom d’utilisateur.

De cette façon, vous pouvez en avoir un différent pour chaque groupe.

Vous pourriez les styliser avec CSS pour qu’ils apparaissent en dessous si vous le souhaitez.

2 « J'aime »
6

Ça fonctionne parfaitement, merci !

7

Vous pouvez également utiliser l’API si vous avez besoin d’ajuster le contenu par programme (pour vérifier l’utilisateur, le message, etc.).

Par exemple :

api.decorateWidget("poster-name:after", (dec) => {
    // "dec.attrs" pour accéder aux attributs du message
    return dec.h("div", "meta.discourse.org");
  });

.topic-meta-data .trigger-user-card {
    flex-direction: column;
    align-items: flex-start;
}

image

2 « J'aime »
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.