# Отображение видимости сообщений

**URL:** <https://meta.discourse.org/t/display-posts-visibility/181878>\
**Category:** Feature\
**Created:** [03.Март.2021 18:40:22 UTC](https://meta.discourse.org/t/display-posts-visibility/181878 "2021-03-03T18:40:22Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [03.Март.2021 18:40:22 UTC](https://meta.discourse.org/t/display-posts-visibility/181878/1 "2021-03-03T18:40:22Z")

</div>

Привет,

Хочу поделиться с вами небольшим 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"/>`

 ![Screenshot 2021-03-03 at 19.23.09](https://global.discourse-cdn.com/meta/original/3X/c/d/cdc1e25b89bdca6b7a58a697d7a7ade4fe192f8d.png) ![Screenshot 2021-03-03 at 19.24.01](https://global.discourse-cdn.com/meta/original/3X/b/6/b67c938c103cf5b2604603c00b708ec1202688f6.png) ![Screenshot 2021-03-03 at 19.24.36](https://global.discourse-cdn.com/meta/original/3X/7/b/7bff60f0e64775da7e474a71d6038ac76f9baba0.png)

Если вы хотите отключить иконки, используйте эту версию. ⬇

> **Без иконок**
>
> Добавьте это в админ-панель/  
> **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](https://vaperina.cc) — просто откройте любую тему. Вы увидите значок публичной видимости на постах. На венгерском языке. :slight\_smile

---

_[View the full topic](https://meta.discourse.org/t/display-posts-visibility/181878)._