Привет,
Хочу поделиться с вами небольшим CSS-улучшением, которое делает видимость постов очевидной для всех. На нашем форуме пользователи иногда не могли понять, какой видимость имеет созданный пост: это личное сообщение или публичная беседа? Из-за этого они часто публиковали личные данные и другую информацию в открытом доступе…
Теперь я сделал это более заметным для всех с помощью небольшого CSS-кода, который добавляет метку видимости ко всем постам. Существует три типа видимости: Публичный, Сообщество (это ограниченные категории) и Личный.
Добавьте это в админ-панель/
Desktop/CSS 
body.archetype-regular .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f57d \00a0 Public";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
body.archetype-private_message .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f023 \00a0 Private";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
#main-outlet .read_restricted .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f0c0 \00a0 Community";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
Mobile/CSS
body.archetype-regular .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f57d \00a0 Public";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
body.archetype-private_message .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f023 \00a0 Private";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
#main-outlet .read_restricted .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f0c0 \00a0 Community";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
Common/ секция <head>
Свойство font-family: 'Font Awesome\ 5 Free', var(--font-family); содержит иконки Font Awesome, поэтому вам нужно добавить их в секцию <head>, чтобы отобразить эти значки.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
Если вы хотите отключить иконки, используйте эту версию.
Без иконок
Добавьте это в админ-панель/
Desktop/CSS
body.archetype-regular .topic-body .contents::after {
font-family: var(--font-family);
content: "Public";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
body.archetype-private_message .topic-body .contents::after {
font-family: var(--font-family);
content: "Private";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
#main-outlet .read_restricted .topic-body .contents::after {
font-family: var(--font-family);
content: "Community";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
Mobile/CSS
body.archetype-regular .topic-body .contents::after {
font-family: var(--font-family);
content: "Public";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
body.archetype-private_message .topic-body .contents::after {
font-family: var(--font-family);
content: "Private";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
#main-outlet .read_restricted .topic-body .contents::after {
font-family: var(--font-family);
content: "Community";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
И ничего добавлять в секцию <head> не нужно. 
Спасибо Надеюсь, это поможет нашему сообществу, и если у вас возникнет та же проблема, это решение вам пригодится.
Вы можете проверить, как это работает в реальном времени, на сайте https://vaperina.cc — просто откройте любую тему. Вы увидите значок публичной видимости на постах. На венгерском языке. :slight_smile