Olá,
Quero apenas compartilhar com vocês essa pequena alteração em CSS para mostrar a visibilidade das postagens para todos. Em nosso fórum, os usuários às vezes não conseguiam reconhecer a visibilidade da postagem criada. É uma mensagem privada ou uma conversa pública? Então, muitas vezes, eles publicavam dados pessoais e outras coisas em locais públicos…
Agora, tornei isso mais óbvio para todos com um pequeno código CSS que adiciona a visibilidade das postagens em todas elas. Existem três tipos diferentes de visibilidade: Pública, Comunidade (que são as categorias restritas) e Privada.
Adicione isso em admin/
Desktop/CSS ![]()
body.archetype-regular .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f57d \00a0 Pública";
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 Privada";
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 Comunidade";
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 Pública";
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 Privada";
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 Comunidade";
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;
}
Comum/ seção <head> ![]()
A font-family: 'Font Awesome\ 5 Free', var(--font-family); contém ícones do Font Awesome, então você deve adicioná-los na seção <head> para exibir esses ícones.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
Se você quiser desativar os ícones, basta usar esta versão. ![]()
Sem ícones
Adicione isso em admin/
Desktop/CSS ![]()
body.archetype-regular .topic-body .contents::after {
font-family: var(--font-family);
content: "Pública";
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: "Privada";
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: "Comunidade";
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: "Pública";
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: "Privada";
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: "Comunidade";
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;
}
E nada a adicionar na seção <head>. ![]()
Obrigado
Isso ajuda nossa comunidade. Espero que, se você tiver o mesmo problema, isso ajude. ![]()
Você pode conferir como funciona ao vivo em https://vaperina.cc e clicar em qualquer tópico. Você verá o selo de visibilidade pública nas postagens. Em húngaro. ![]()


