Distintivo de autor nas postagens do Tópico Proprietário

Dev
1

Olá,

Será muito bom para tópicos grandes… onde os usuários saibam quando o autor original (OP) responde. Aparece um selo de “Autor” nas respostas do OP…

Fiz isso com CSS, mas acho que isso poderia ser um recurso principal ou um componente de tema. :slight_smile:

Estou mirando na classe .topic-owner, mas tenho certeza de que existe uma maneira mais elegante. Assim :arrow_down:

Obrigado! :slight_smile:

No desktop, estou mirando na classe .names

.topic-owner article .row .topic-body .topic-meta-data .names::after {
    content: "Autor";
    color: var(--secondary);
    background: var(--secondary-medium);
    padding: 0px 8px;
    border-radius: 8px;
}
// Ocultar em postagens incorporadas
.topic-owner article .row .embedded-posts .topic-body .topic-meta-data .names::after {
    content: "";
}

Fica assim :arrow_down:

Screen Shot 2020-12-02 at 10.07.49 AM

No mobile, estou mirando na classe .first

.topic-owner article .row .topic-body .topic-meta-data .names .first::after {
    content: "Autor";
    color: var(--secondary);
    background: var(--secondary-medium);
    margin-left: 4px;
    padding: 0px 8px;
    border-radius: 6px;
}

Fica assim :arrow_down:
Screen Shot 2020-12-02 at 10.14.00 AM

Se quiserem ver ao vivo :arrow_down: Acabei de escolher um tópico do meu site. A única mudança é que o rótulo “Autor” está em húngaro.

8 curtidas
2

Isso é bem legal. Seu fórum é público? Você pode editar sua postagem e adicionar um link para aquele tópico?

2 curtidas
3

Olá @pfaffman,
Adicionei o link. Obrigado :slight_smile:

1 curtida
4

Você pode considerar omitir isso na primeira postagem, pois ela sempre virá do criador do tópico!

Edição CSS:

3 curtidas
5

Obrigado, Kane! Esse é um bom ponto, vou usar isso :heart::slightly_smiling_face:

6

Pequena atualização! :slight_smile:

Desktop :arrow_down:

// Dono do tópico

.topic-post.topic-owner article:not(#post_1) .row .topic-body .topic-meta-data .names::after {
  content: "Autor";
  color: var(--secondary);
  font-weight: bold;
  background: var(--secondary-medium);
  padding: 0px 8px;
  border-radius: 8px;
  line-height: normal;
}

Móvel :arrow_down:

// Dono do tópico

.topic-post.topic-owner article:not(#post_1) .row .topic-body .topic-meta-data .names .first:after {
  content: 'Autor';
  color: var(--secondary);
  background: var(--secondary-medium);
  margin-left: 4px;
  padding: 0px 8px;
  border-radius: 6px;
  line-height: normal;
}
4 curtidas
7

Vinculando o novo componente de tema :partying_face:

2 curtidas