Inserir texto abaixo do nome de usuário?

Dev
1

Existe alguma maneira de inserir uma linha de texto abaixo dos nomes de usuário? Idealmente, eu gostaria que isso aparecesse abaixo do nome de usuário de todos.

usernamebelow
usernamebelow453×121 23.6 KB

O CSS que usei para conseguir isso é:

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

Mas obviamente eu gostaria que aparecesse abaixo. Obrigado!

1 curtida
2

Isso funcionaria para você?

image
image1536×266 36.8 KB

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

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

editar: adicionada propriedade order para dispositivos móveis

3 curtidas
3

Obrigado! Funciona perfeitamente no desktop, mas por algum motivo aparece acima do nome de usuário no celular.

4

Ah. Interessante. eles têm uma propriedade order adicional no celular.

Você pode adicionar order: 4 ao pseudo-elemento after e isso deve corrigir.

1 curtida
5

Você poderia conseguir isso com os Títulos Padrão de Grupo.

Os grupos podem ter títulos padrão que aparecem ao lado do nome de usuário.

Dessa forma, você pode ter um diferente para cada grupo.

Você poderia estilizar esses títulos com CSS para aparecerem abaixo, se quisesse.

2 curtidas
6

Funciona perfeitamente, obrigado!

7

Você também pode usar a API se precisar ajustar o conteúdo programaticamente (para verificar o usuário, a postagem, etc.).

Por exemplo:

api.decorateWidget("poster-name:after", (dec) => {
    // "dec.attrs" para acessar os atributos da postagem
    return dec.h("div", "meta.discourse.org");
  });

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

image

2 curtidas
8

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