Значок автора в постах владельца темы

Разработка
1

Здравствуйте,

Это будет очень полезно для крупных тем… где пользователи будут видеть, когда автор (OP) отвечает. На ответах автора будет появляться значок «Автор»…

Я реализовал это с помощью CSS, но, возможно, это могло бы стать стандартной функцией или компонентом темы. :slight_smile:

Я использую селектор класса .topic-owner, но уверен, что существует более элегантный способ. Вот пример :arrow_down:

Спасибо! :slight_smile:

На рабочем столе я использую селектор класса .names

.topic-owner article .row .topic-body .topic-meta-data .names::after {
    content: "Автор";
    color: var(--secondary);
    background: var(--secondary-medium);
    padding: 0px 8px;
    border-radius: 8px;
}
// Скрыть во встроенных сообщениях
.topic-owner article .row .embedded-posts .topic-body .topic-meta-data .names::after {
    content: "";
}

Выглядит это так :arrow_down:

Screen Shot 2020-12-02 at 10.07.49 AM

На мобильных устройствах я использую селектор класса .first

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

Выглядит это так :arrow_down:
Screen Shot 2020-12-02 at 10.14.00 AM

Если хотите увидеть это в действии :arrow_down: Я просто выбрал тему со своего сайта. Единственное изменение — метка «Автор» на венгерском языке.

2

Это довольно круто. Ваш форум публичный? Можете ли вы отредактировать свой пост и добавить ссылку на эту тему?

3

Привет @pfaffman,
Я добавил ссылку. Спасибо :slight_smile:

4

Возможно, стоит опустить это в первом сообщении, так как оно всегда будет исходить от создателя темы!

Редактирование CSS:

5

Спасибо, Кейн! Это хороший момент, я это учту :heart::slightly_smiling_face:

6

Небольшое обновление! :slight_smile:

Desktop :arrow_down:

// Владелец темы

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

Mobile :arrow_down:

// Владелец темы

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

Связывание нового компонента темы :partying_face: